PNG onscherp, SVG veel te groot | Voor web

[Wachten...]

Beste leden.

Ik heb een klein probleempje die ik al enige tijd voor lief heb genomen, maar nu toch echt iets aan wil doen.

Voor mijn website maak ik veel gebruik van eigen gemaakte illustraties die ik in Illustrator maak.
Nu is het zo dat ik deze voorheen als PNG exporteerde en deze op mijn website plaatste.

Nu ben ik wat meer bezig geweest met SVG bestanden, omdat deze schaalbaar zijn en dus nooit onscherp worden. Ik heb ook een test gedaan, en het ziet er echt 10 keer beter uit in een SVG formaat. Het enige waar ik tegenaan loop, is dat mijn SVG bestanden bijna 4MB groot worden na de export.
Als ik exact dezelfde image in PNG exporteer, dan houd ik een bestand over van 100kb. Echt een gigantisch verschil dus.

Zie mijn illustraties een beetje zoals onderstaande qua complexiteit.
Het is niet mijn tekening, maar het gaat meer om de vormen en lijnen die ik gebruik (hand getekend in illustrator).



Heeft dit te maken met de complexe lijnen e.d. dat de SVG zo groot wordt? Of is er toch een manier om SVG te gebruiken, zonder dat het zo belachelijk groot wordt?

[ Voor 22% gewijzigd door Wachten... op 02-04-2021 14:53 ]

[pagani]

Logischerwijs is je SVG veel groter, je hebt immers veel meer informatie in je bestand (curves in plaats van losse pixels) én het is een XML based format met veel overhead t.o.v. een binair formaat. Daarbij is het wel afhankelijk van hoeveel lijnen je neerzet, met welke tool en welke software hoe efficiënt dit allemaal gaat.

Wat je kan proberen is of een PNG op de maximale grootte die je wil weergeven niet kleiner is dan 4MB, dan pak je dat formaat en verklein je de afbeelding voor thumbnails enzo.

[ Voor 8% gewijzigd door pagani op 02-04-2021 14:59 ]

[kaesve]

kun je de svg ergens plaatsen? dan kunnen we zien of daar iets geks in zit, of dat er nog wat valt te optimaliseren.

[Wachten...]

kaesve schreef op vrijdag 2 april 2021 @ 15:02:
kun je de svg ergens plaatsen? dan kunnen we zien of daar iets geks in zit, of dat er nog wat valt te optimaliseren.

@pagani

Ik kan helaas de bestanden niet ergens tonen aangezien dit verkoop gerelateerd is.
Ik heb echter opnieuw even een bestand gemaakt en helemaal clean begonnen. Nu ziet het er wel beter uit, maar de SVG is nog steeds wel 300kb t.o.v. 50kb voor de PNG file.

Ik denk dus dat er iets fout zat ik het eerste bestand dat ik had gemaakt, Maar nog steeds is het een factor 6 wat hij groter is.

Ik vraag me nu af waar ik goed aan doe, want 300kb per afbeelding is niet niks en dat zal wel een aardig effect hebben op de snelheid van mijn website. Echter zien de PNG bestanden er niet uit als je dit vergelijkt met de SVG files. Ik weet dus niet zo goed waar ik nu goed aan doe, want krijg de PNG bestanden met geen mogelijkheid echt scherp zoals de SVG.

Zoals gezegd zijn het geen rondjes en vierkantjes o.i.d. er zit best wel wat "kraswerk" in dus veel complexe lijnen zoals ik in de eerdere afbeelding heb laten zien.

[Hahn]

Moet het per se SVG of PNG zijn? Wat gebeurt er als je bijvoorbeeld een JPG ervan maakt?

[bregweb]

Test de snelheid van je website eens met die SVG van 300 kb, kan me in dit moderne tijdperk niet voorstellen dat het een issue gaat zijn.

[Hahn]

bregweb schreef op vrijdag 2 april 2021 @ 15:25:
Test de snelheid van je website eens met die SVG van 300 kb, kan me in dit moderne tijdperk niet voorstellen dat het een issue gaat zijn.

De snelheid van je website is maar één deel van de som natuurlijk. Bezoekers kunnen zelf ook een trage verbinding hebben.

[consolefreak]

Dus je wilt je ontwerp verkopen, maar wil wel een schaalbare vector tekening van je ontwerp gratis beschikbaar stellen in je website. Ik zie een mogelijk zakelijk conflict, want waarom zou ik nog de tekening kopen als ik gewoon die SVG kan laten afdrukken?

[Mavamaarten]

Die afbeeldingen lenen zich gewoon niet tot het opslaan ervan in vector formaat. Je hebt heel veel kleine lijntjes, wat ervoor zorgt dat het moeilijk te renderen is en een grote bestandsgrootte heeft.

Op zich zou een PNG-versie ervan niet onscherp mogen zijn, zo lang je deze maar opslaat met een resolutie die voldoende is. Misschien is dat gewoon het issue? Een mogelijk alternatief is WebP.

[Hahn]

consolefreak schreef op vrijdag 2 april 2021 @ 15:28:
Dus je wilt je ontwerp verkopen, maar wil wel een schaalbare vector tekening van je ontwerp gratis beschikbaar stellen in je website. Ik zie een mogelijk zakelijk conflict, want waarom zou ik nog de tekening kopen als ik gewoon die SVG kan laten afdrukken?

Op zich geen heel gek punt om aan te geven dat een perfecte versie in SVG gebruikt kan worden voor illegale kopieën. Maar antwoord op je vraag is simpel: omdat dat illegaal is

[_JGC_]

Die SVG grootte, is dat voor of na compressie? Het is in feite XML, comprimeert vaak heel goed.

[_NooT_]

Voor dit type illustratie is 300kB niet vreemd. Je kan eventueel SVGO compressie toepassen, maar ik zou sowieso voor png kiezen voor dit type illustratie. Dat leent zch hier heel goed voor.
Ook om je eigen artwork te beschermen.

Die png kan je makkelijk mooi scherp krijgen en waarschijnlijk nog wel kleiner in bestandsgrootte ook.
Je zou het volgende moeten doen:

1. Exporteer naar png 24bit met minimaal 2x de grootte die je nodig hebt (3x of 4x kan ook).
   Zo zorg je ervoor dat het er ook mooi uit ziet op schermen met een hoge resolutie.
   Tegenwoordig bijna alles dus.
   Door de wijze waarop een png geoptimaliseerd wordt, neemt de bestandsgrootte niet zo erg veel toe bij een hogere resolutie bij afbeeldingen met volvlakken / eenvoudige verlopen / beperkt kleurpallet.
2. Gebruik vervolgens een programma dat pngquant gebruikt voor compressie. Je kan dan het aantal kleuren flink terugbrengen wat in een aanzienlijk kleiner bestand resulteert. Jouw type illustratie leent zich voor 32 of 64 kleuren. Dan heb je genoeg tinten om te voorkomen dat je lijnen kartelig worden.

Als je een mac of linux systeem gebruikt kan ik ImageOptim aanraden. Gebruiksvriendelijk en met een duidelijke voorvertoning.

Voor pc en ook voor batch-processing kan ik Pngyu aanraden.

[Giant87]

Voor je PNG (die in de basis echt niet onscherp zou moeten zijn): https://tinypng.com/

[Savantas]

Wat misschien ook kan schelen is om van alle objecten eerst een expand toe te passen (alle lijnen worden dan omgezet naar vlakken met de door jou gebruikte diktes) en deze vervolgens met Pathfinder samen te voegen. Aan de andere kant zit in het voorbeeldplaatje zoveel wit tussen de kleuren dat dit waarschijnlijk weinig oplevert in het aantal vertices (tekenpunten), maar zal zeker een reductie geven op het grote aantal paths of polygons in je SVG.
Er zijn overigens trucjes met pattern-vulling waarmee je een dergelijke inkleuring kunt emuleren. Is uiteraard anders dan handwerk, want gegenereerd, maar met een goed gekozen pattern (of filter) kan er wel iets uitkomen wat in de buurt komt en de inhoud wordt dan door de browser (of waarmee je de svg opent) gegenereerd (kan afhankelijk van grootte van weergave dus ook variëren).
Maar goed, dat is uiteraard niet wat je zoekt

Alleen al vanwege het makkelijke kopiëren zou ik inderdaad voor PNG gaan met de tips hierboven. Je kan wel bijvoorbeeld één, eventueel kleinere, tekening op je site zetten in SVG zodat men bijvoorbeeld kan inzoomen of zo. Toon je toch detail, alleen niet van de verkoopbare originelen.

[rayx]

Het probleem zijn alle kleine lijntjes waarmee je de tekening inkleurt.
Dat zijn allemaal afzonderlijke lijntjes, dus vectors die allemaal info zijn, dus data.
Als de poppetjes en het autootje gevuld worden met een egale kleur wordt het bestand aanzienlijk kleiner.
Je wilt iets dat tegenstrijdig is. Je zal moeten kiezen.

Of een hele grote png maken, en die schalen naar 20% of zo.
Waarom zou je een svg plaatsen, half Nederland kijkt alleen maar op zijn telefoon.... die zien helemaal nergens verschil in

[ Voor 23% gewijzigd door rayx op 18-04-2021 20:58 ]

[downtime]

pagani schreef op vrijdag 2 april 2021 @ 14:56:
Logischerwijs is je SVG veel groter, je hebt immers veel meer informatie in je bestand (curves in plaats van losse pixels) én het is een XML based format met veel overhead t.o.v. een binair formaat.

Beide factoren hebben er weinig mee te maken. Een binair formaat kan juist extreem inefficient zijn. Een (extreem) voorbeeld: Neem een canvas van een miljoen bij een miljoen pixels. Neem als achtergrond een gradient van zwart naar wit en teken dan een perfecte rode cirkel met een straal van een kwart miljoen pixels en een lijndikte van duizend pixels en hij is 50% transparant.

Grote kans dat de XML versie een fractie van het formaat van de binaire versie zal zijn. In XML kun je die gradient en de bol met een paar regels code beschrijven en is het irrelevant dat je een canvas van een biljoen pixels gebruikt hebt. In een binair bestand moet je juist een biljoen pixels stuk voor stuk beschrijven in (vaak) 32 bits per pixels. En het is maar afwachten hoeveel je met compressie van die omvang af kunt snoepen.

De meest efficiente manier om die afbeelding op te slaan is namelijk volledig afhankelijk van de afbeelding. En handgetekende vormen laten zich lastig in een paar regels mathematisch beschrijven. Het is de complexiteit van deze tekeningen waardoor ze zo groot worden.

[q-enf0rcer.1]

Ik zou zeggen maak eens een tekening en deel deze met ons als SVG. Dan kunnen we aan de hand van de data in de SVG wel zien of hier nog wat valt te halen of niet.

[Rannasha]

downtime schreef op dinsdag 20 april 2021 @ 12:13:
[...]

Beide factoren hebben er weinig mee te maken. Een binair formaat kan juist extreem inefficient zijn. Een (extreem) voorbeeld: Neem een canvas van een miljoen bij een miljoen pixels. Neem als achtergrond een gradient van zwart naar wit en teken dan een perfecte rode cirkel met een straal van een kwart miljoen pixels en een lijndikte van duizend pixels en hij is 50% transparant.

Grote kans dat de XML versie een fractie van het formaat van de binaire versie zal zijn. In XML kun je die gradient en de bol met een paar regels code beschrijven en is het irrelevant dat je een canvas van een biljoen pixels gebruikt hebt. In een binair bestand moet je juist een biljoen pixels stuk voor stuk beschrijven in (vaak) 32 bits per pixels. En het is maar afwachten hoeveel je met compressie van die omvang af kunt snoepen.

Dat heeft weinig te maken met het onderscheid tussen binair en tekst (XML).

Je kunt prima een beeldformaat maken dat gegevens op pixel-basis opslaat, maar toch plain text / XML gebruikt. En omgekeerd: Je kunt een vector-bestandstype a la SVG definieren dat binaire gegevensstructureren gebruikt.

Plain text is simpelweg minder efficient dan een degelijke binaire indeling, dat is onafhankelijk van wat je precies opslaat.

[Yucon]

Dat inkleuren zal idd niet bijdragen aan een kleine file, maar het is ook nogal bepalend voor de stijl dus daar zul je niet veel mee kunnen. Maar heb je onbewust toevallig nog wat onzichtbare layers in de svg zitten?

[Hahn]

We zijn inmiddels zo'n 3 weken verder. @Wachten... heb je nog wat gehad aan de posts hier?

[downtime]

Rannasha schreef op woensdag 21 april 2021 @ 16:26:
[...]


Dat heeft weinig te maken met het onderscheid tussen binair en tekst (XML).

Je kunt prima een beeldformaat maken dat gegevens op pixel-basis opslaat, maar toch plain text / XML gebruikt. En omgekeerd: Je kunt een vector-bestandstype a la SVG definieren dat binaire gegevensstructureren gebruikt.

Plain text is simpelweg minder efficient dan een degelijke binaire indeling, dat is onafhankelijk van wat je precies opslaat.

En dat verandert niets aan het feit dat SVG niet "logischerwijze" groter dan een binair bestand is.