Een schermafbeelding van tekst hoort geen JPEG te zijn

Een foto opgeslagen als PNG is een veelvoud groter dan nodig. Een schermafbeelding van tekst opgeslagen als JPEG komt terug met grijs pluis rond elke letter. Het is dezelfde fout in twee richtingen: het formaat is gekozen zonder te kijken wat er in de afbeelding staat.

Foto’s bestaan uit geleidelijke overgangen, vlakke graphics uit harde randen. Compressors zijn voor het een of het ander gebouwd, en geen van beide gaat netjes om met de verkeerde soort.

Welk formaat voor welke inhoud?

Vier keuzes dekken zo goed als alles.

Het moderne formaat doet beide klussen, en daarom heeft het de twee oudere grotendeels vervangen. Het heeft een lossy modus voor foto’s en een lossless modus voor graphics, ondersteunt transparantie in beide, en is bij vergelijkbare kwaliteit doorgaans een kwart tot een derde kleiner dan JPEG.

Nieuwere formaten comprimeren nog kleiner, ten koste van trager coderen. Voor het meeste werk is de winst op het huidige formaat de moeite van beide serveren nog niet waard.

Waarom ziet tekst er slecht uit in een JPEG?

Omdat de compressie in blokken werkt en ervan uitgaat dat het beeld binnen een blok geleidelijk verloopt. Een harde overgang van zwart naar wit is het tegendeel daarvan, dus de compressor benadert hem met een rimpeling, die verschijnt als grijze waas rond letters en langs elke scherpe grens.

Het effect is het ergst bij kleine tekst en bij vlakken van één kleur, en daar bestaat een schermafbeelding precies uit. De kwaliteit opschroeven vermindert het maar haalt het nooit weg, en tegen de tijd dat het acceptabel is, is het bestand groter dan een lossless versie was geweest.

Het omgekeerde geval is milder maar echt. Een foto die lossless is opgeslagen, bewaart detail dat niemand ziet, dus het bestand is groot zonder zichtbaar voordeel.

Wanneer is een vector het antwoord?

Als de afbeelding uit vormen bestaat en niet uit pixels. Een logo, icoon of diagram beschreven als lijnen en curves is piepklein, blijft op elke grootte scherp en heeft geen aparte versies nodig voor verschillende schermdichtheden.

Het is ook tekst, dus de pagina kan het opmaken: een vectoricoon kan zijn kleur uit het omringende thema halen in plaats van een lichte en een donkere kopie nodig te hebben. Geen pixelafbeelding kan dat.

Voor foto’s is het onbruikbaar, want een foto heeft geen vormen om te beschrijven. Een poging tot omzetten levert een enorm bestand op of een illustratie die niet meer op het origineel lijkt.

En transparantie?

Twee soorten, en het verschil doet ertoe. Het oude geanimeerde formaat kent alleen volledig transparante of volledig dekkende pixels, en dat geeft de gekartelde rand die je kent van slordig uitgeknipte logo’s.

Echte alfatransparantie staat tussenwaarden toe, zodat randen zacht overlopen in wat erachter staat. Dat bieden PNG en het moderne formaat, en dat heeft een afgeronde of gevormde afbeelding nodig.

JPEG heeft helemaal geen transparantie. Een transparante afbeelding erin opslaan vult het transparante deel met een kleur die je niet koos, meestal wit en soms zwart.

Maakt het formaat uit voor de laadtijd?

Flink, en het is een van de makkelijkste winsten die er zijn. Afbeeldingen zijn meestal het zwaarste op een pagina, dus foto’s omzetten naar een modern formaat haalt een merkbaar deel van het paginagewicht weg zonder iets anders aan te raken.

De volgorde van eerst verkleinen, dan comprimeren telt meer dan de formaatkeuze, want een foto op vier keer de getoonde maat serveren verspilt meer dan welke codec ook kan terugwinnen.

Allebei doen is het volledige antwoord: eerst de goede afmetingen, dan het passende formaat, en de kwaliteit op het oog afgesteld in plaats van op een getal.

En het bronbestand?

Bewaar het. Elk formaat dat hier langskomt is een export, en opnieuw exporteren vanuit een origineel kost niets, terwijl opnieuw exporteren vanuit een gecomprimeerde kopie het verlies opstapelt.

Dat geldt het meest voor alles wat je op andere maten of plekken hergebruikt. Een logo dat alleen als kleine PNG bestaat, moet opnieuw getekend worden als iemand het groot wil; hetzelfde logo als vector nooit.

Bij foto’s is het equivalent bewaren wat de camera maakte. Het is groter dan elke export en de enige versie die nog niet door een compressor is gegaan.

Vragen die mensen stellen

Is een hoger kwaliteitsgetal altijd beter? Voorbij een bepaald punt groeit het bestand en wordt er niets zichtbaar beter. Vergelijk twee instellingen naast elkaar op ware grootte.

Bepaalt de extensie het formaat? Nee. De bytes doen dat, en een hernoemd bestand brengt software in de war in plaats van het om te zetten.

Kan één afbeelding elke maat bedienen? Een vector wel. Een pixelafbeelding heeft voor scherpe schermen minstens een grote en een kleine versie nodig.

Werkt WebP overal? In huidige browsers wel. Heel oude software heeft soms nog een alternatief nodig.

Brengt JPEG naar WebP omzetten kwaliteit terug? Nee. Het detail dat bij de eerste compressie verdween is weg, en het artikel over lossy legt uit waarom.

Moet ik GIF nog gebruiken? Alleen voor compatibiliteit. Moderne formaten doen animatie beter en kleiner.

Welke kwaliteitsinstelling kies ik? Beoordeel het op het oog op ware grootte. Het goede getal verschilt per afbeelding.

Zet om naar wat de inhoud vraagt. Jpg naar webp en png naar webp brengen foto’s en graphics naar het moderne formaat, webp naar jpg en webp naar png gaan terug waar iets het oude formaat nodig heeft, en afbeelding comprimeren stelt de kwaliteit af zodra het formaat klopt.