JPEG-optimalisatie voor het web - Ultieme gids

Beeldcompressie is te vinden in elk native media-formaat. Het verschil tussen GIF, PNG en JPEG is echter hoe de informatie wordt gecomprimeerd en op het scherm weergegeven. Er zijn zoveel tips voor het samenstellen van geweldige beeldmedia die op internet worden gepubliceerd, en toch begrijpen veel ontwerpers sommige van de grondbeginselen nog steeds niet.

In deze handleiding wil ik enkele ideeën delen voor de juiste JPEG-compressie. U wilt uw afbeeldingen optimaliseren om de laadtijd van webpagina's te verminderen en tegelijkertijd een behoorlijk kwaliteitsniveau te behouden. Het gaat allemaal om het vinden van een balans tussen bestandsgroottes en schermweergave. Er is geen perfecte oplossing voor ontwerpers om te volgen. Het vereist enige initiële oefening, maar zodra je JPEG-compressie begrijpt, wordt het in de toekomst veel gemakkelijker om websites te ontwikkelen.

Vermijd altijd om 100% te besparen

U dient uw JPEG-afbeeldingen bijna nooit voor 100% op te slaan. Dit zal niet produceren de meest mogelijke “geoptimaliseerde” beeld. Het berekent eigenlijk door middel van een optimaliseringslimietformule die uw bestandsgroottes exorbitant verhoogt. Zelfs in vergelijking met 90% of 95% kwaliteit ziet u een aanzienlijke daling van de bestandsgrootte.

Meestal wordt u aangeraden afbeeldingen op te slaan met een kwaliteit die veel lager is dan 90%. Als u het dialoogvenster Opslaan voor web in Photoshop opent, ziet u dat deze vooraf ingestelde waarden bieden waaruit u kunt kiezen. Ik heb de mogelijke JPEG-waarden hieronder toegevoegd - let op de inherente naamgevingsconventies.

Laag - 10%
Medium - 30%
hoog - 60%
Heel hoog - 80%
maximaal - 100%

Zelfs in Adobe Photoshop wordt een beeldkwaliteit van 60% als 'hoog' beschouwd. Veel webontwikkelaars staan tussen 50% en 70% garant voor een veilig bereik.

Hoe laag is te laag?

De waarden die u kiest voor optimalisatie zijn volledig afhankelijk van het project. U zult moeten overwegen welke soorten grafische afbeeldingen de hoogste bestandsgrootten zullen produceren - dit zijn degenen die echt compressie nodig hebben.

Ik zou zeggen dat je onder de 30% echt de fundamentele beeldkwaliteit onderbreekt. Andere ontwerpers zullen 50% zweren als een “begrenzing” om de optimale waarde te verlagen. Maar het beste advies is om gewoon verschillende instellingen uit te proberen en te zien wat er het beste uitziet! Je kunt niet fout gaan met een paar teststudies om JPEG-afbeeldingen voor het web te optimaliseren.

Compressie-opties

We moeten eerst de twee termen 'compressie' en 'kwaliteit' verduidelijken, die het omgekeerde van elkaar zijn. Dit betekent dat als u een JPEG opslaat met een compressie van 40%, u 60% kwaliteit krijgt (vergeleken met een maximale kwaliteit van 100% zonder compressie).

Dit zijn de meest elementaire opties om te gebruiken - en ze zouden voldoende moeten zijn bij het opslaan voor het web. Algemene gebruikers komen niet in veel diepere aanpassingen. Subsampling komt in meer gecompliceerde zaken waarbij u RGB-afbeeldingen converteert naar YCbCr (Luminance, Chroma Blue, Chroma Red).

(Afbeeldingsbron: Kara Monroe)

De luminantie of de helderheidsinstelling wordt altijd in de JPEG-compressie op de hoogst mogelijke waarde gehouden. Met deze helderheidswaarde op een afzonderlijk kanaal is het eenvoudiger om de afzonderlijke kleurwaarden van rood en blauw te optimaliseren. Dit staat ook bekend als chroma subsampling. Ontwerpers die geïnteresseerd zijn in het vies maken van hun handen zullen graag wat meer lezen over dit compressie-algoritme. Bekijk deze geweldige blogpost over chroma-sampling specifiek gericht op JPEG-afbeeldingen.

(Afbeeldingsbron: Derek Hatfield)

Als een interessante kanttekening maakt Adobe Photoshop niet altijd gebruik van subsampling voor compressie. Alle afbeeldingen die zijn opgeslagen via de “Opslaan voor internet” dialoogvenster gebruikt alleen chroma subsampling onder een kwaliteitswaarde van 50%.

Verschillende webmedia

Het web zit ook vol met verschillende soorten beeldmedia. U kunt foto's, pictogrammen, knoppen, badges en tal van andere afbeeldingen gebruiken. Maar het is opmerkelijk dat het vergelijken van de kwaliteit tussen een knop en een foto gewoon niet logisch is.

Wanneer u foto's of gedetailleerde afbeeldingen gebruikt, overweeg dan om een koppeling te maken naar een afzonderlijk, minder gecomprimeerd JPEG-bestand. Vervolgens kunt u miniaturen op uw site instellen met een hogere compressieverhouding en veel kleinere bestandsgroottes. Het enige nadeel is dat je twee sets afbeeldingen moet opgeven voor een mediagalerij. Let op de vele verschillende afbeeldingen die u op een website hebt genaaid en overweeg optimalisatietechnieken voor elke afzonderlijke.

Een grafisch model plannen

U wilt een georganiseerd bestandssysteem hebben dat gemakkelijk genoeg is om door te snuffelen. Sommige webmasters zullen ervoor kiezen hun foto's elders op internet te hosten, zoals Flickr of Picasa. Toch wilt u nog steeds een aantal compressietools gebruiken om de afbeeldingsgrootten te verkleinen, maar de manier waarop u ze op uw site weergeeft, kan variëren. Dit geldt met name voor de populaire opkomst van mobiele apparaten met toegang tot internet.

Ik vond een interessant artikel over JavaScript JPEG-codering dat zou gebeuren in uw frontend-code. Er zijn niet veel voordelen voor hoogwaardige fotogalerieën, maar het kan de laadtijden schaden voor uw mobiele bezoekers. Het zou ook een nuttige techniek zijn bij het dynamisch koppelen van afbeeldingen of het opnieuw bijsnijden van miniaturen.

Een ander mooi hulpmiddel om uit te checken is Yahoo! Smush.it. Het is een browsergebaseerde webapp waarmee u een afbeelding kunt uploaden en Smush.it alle onnodige extra bytes verwijdert om de bestandsgrootte te optimaliseren. Het is 100% verliesvrij, wat betekent dat de beeldkwaliteit helemaal niet verslechtert. En nog beter: u kunt afbeeldingen batchgewijs van rechtstreekse URL's uploaden als u deze op uw website of een server van een derde partij host.

Aanvullende hulpmiddelen

Er is genoeg software om te proberen met betrekking tot beeldmanipulatie. Extra bytes die u de grootte van elk bestand kunt afschaven, zijn cruciaal. Er is niet heel veel software beschikbaar, maar de beschikbare opties zijn verbluffend.

IrfanView

Met deze gratis software voor Windows kunt u elke reeks grote afbeeldingen bekijken en optimaliseren. Ik vind deze software vooral leuk omdat het batchconversie ondersteunt van afbeeldingen in meerdere mappen. U kunt dezelfde functies automatisch toepassen op honderden JPEG-afbeeldingen.

Wat nog beter is, is de ondersteuning voor plug-ins van externe ontwikkelaars. Een voorbeeld hiervan is RIOT (Radical Image Optimization Tool). Deze plug-in werkt voor andere soortgelijke open-source grafische editors zoals GIMP. Het biedt een dubbele beeldweergave waarin u de compressieparameters handmatig kunt aanpassen voor elk van uw afbeeldingen.

Software-ondersteuning is geweldig en de RIOT-functies zijn zeer eenvoudig te gebruiken. Samen met beeldcompressie heeft u ook toegang tot het verwijderen van aanvullende metadata zoals EXIF en Adobe XMP. Deze extra gegevens kunnen alleen worden toegevoegd aan uw totale bestandsgrootte en zijn zelden nodig.

ImageOptim voor Mac

Als u OS X gebruikt en een krachtige compressie-app nodig hebt, hoeft u niet verder te zoeken. ImageOptim is een krachtig hulpmiddel om afbeeldingen voor het web te comprimeren - soms zelfs beter dan Photoshop.

De hele applicatie ondersteunt slepen-en-neerzetten, dus het is eenvoudig om grote sets afbeeldingen te optimaliseren. U kunt op dezelfde manier opdrachten uitvoeren vanuit de Terminal en shell-scripts instellen. Bekijk de Google-codepagina voor meer informatie en technische ondersteuning.

Er zijn enkele kleine problemen geweest met de nieuwste 1.3.3 stabiele release bij het weergeven van pixeled JPEG-afbeeldingen in Opera. Probeer al uw geoptimaliseerde afbeeldingen in de 4 belangrijkste browsers te controleren - Chrome, Safari, Firefox en Opera (en misschien IE). Als er iets scheef lijkt te zijn, probeer dan ImageOptim 1.3.0 te downloaden, dat een beetje schoner converteert.

Handige bronnen

JPEG 101: een gids met crashcursussen op JPEG
Juiste compressie-instellingen om JPG-afbeeldingen voor WordPress op te slaan
Slimme JPEG-optimalisatietechnieken
Hoe JPEG-afbeeldingen voor websites te optimaliseren
Alles wat u moet weten over beeldcompressie

Conclusie

JPEG-compressie is lastig, omdat u de juiste balans tussen kwaliteit en inhoud moet vinden. Zelfs naarmate onze moderne internetverbindingssnelheden toenemen, is het nog steeds nodig om de grootte van webpagina's te verkleinen. Nieuwe frameworks zoals jQuery en Typekit kunnen honderden extra kilobytes aan, zelfs op een goed geoptimaliseerd ontwerp.

Ik moet Adobe Photoshop nog steeds aanbevelen als mijn eerste beeldbewerkingssoftware. Er zijn andere voorbeelden mogelijk beter voor het JPEG-optimalisatieproces. Maar webontwerpers kunnen zich redden met nog minder bekende open source-oplossingen. Als je vergelijkbare trucs of ideeën hebt over JPEG-compressie, deel deze dan met ons in het gedeelte voor nabespreking hieronder.