JPEG-optimering för webben - Ultimate Guide

Bildkomprimering finns i alla inbyggda mediaformat. Men skillnaden mellan GIF, PNG och JPEG är på vilket sätt Informationen komprimeras och visas på skärmen. Det finns så många tips för att komponera bra bildmedia som publiceras på webben, och ändå förstår många konstruktörer fortfarande inte några av de grundläggande.

I den här guiden skulle jag vilja dela några idéer för korrekt JPEG-komprimering. Du vill optimera dina bilder för att minska sidans belastningstider samtidigt som du har en anständig kvalitetsnivå. Det handlar om att hitta balans mellan filstorlekar och skärmbild. Det finns ingen perfekt lösning för designers att följa. Det tar lite inledande träning, men när du förstår JPEG-komprimering blir det mycket lättare att utveckla webbplatser i framtiden.

Undvik alltid att spara vid 100%

Du bör nästan aldrig spara dina JPEG-bilder med 100% kvalitet. Det här kommer att inte producera mest möjliga “optimerad” bild. Det beräknar faktiskt genom en optimeringsgränsformel som ökar dina filstorlekar exorbitantly. Även i jämförelse med 90% eller 95% kvalitet ser du en betydande minskning av filstorleken.

De flesta gånger rekommenderas att spara bilder mycket lägre än 90% kvalitet. Om du öppnar dialogrutan Spara för webb i Photoshop märker du att de erbjuder förinställda värden du kan välja mellan. Jag lade till de möjliga JPEG-värdena nedan - märk de inneboende namngivningskonventionerna.

Låg - 10%
Medium - 30%
Hög - 60%
Väldigt högt - 80%
Maximal - 100%

Även i Adobe Photoshop anses 60% bildkvalitet vara "hög". Många webbutvecklare garanterar mellan 50% - 70% är ett säkert utbud att hålla sig till.

Hur låg är för låg?

De värden du väljer för optimering är helt beroende av det aktuella projektet. Du måste överväga vilka typer av grafik som kommer att ge de högsta filstorlekarna - det här är de som verkligen behöver komprimering.

Jag skulle argumentera för att under 30% du verkligen hämmar grundläggande bildkvalitet. Andra designers kommer att svära 50% som en “begränsa” för att minska det optimala värdet. Men det bästa rådet här är att bara prova olika inställningar och se vad som är bäst! Du kan inte gå fel med några teststudier som optimerar JPEG-bilder på webben.

Komprimeringsalternativ

Vi bör först klargöra de två termen "kompression" och "kvalitet" som är inversa av varandra. Detta innebär att om du sparar en JPEG vid 40% komprimering får du 60% kvalitet (jämfört med högst 100% kvalitet utan komprimering).

Dessa är de mest grundläggande alternativen att utnyttja - och de borde räcka när de sparas för webben. Allmänna användare kommer inte in i mycket djupare anpassningar. Subsampling kommer in i mer komplicerade saker där du konverterar RGB-bilder till YCbCr (Luminans, Chroma Blue, Chroma Red).

(Bildkälla: Kara Monroe)

De luminans eller ljusstyrkan inställs alltid till högsta möjliga värde i JPEG-komprimering. Med detta ljusstyrka på en separat kanal är det lättare att optimera de enskilda färgvärdena Röd och Blå. Detta är också känt som chroma subsampling. Designers intresserade av att få sina händer smutsiga kommer att älska att läsa lite mer om denna komprimeringsalgoritm. Kolla in det här stora blogginlägget på chroma-provtagning som är särskilt inriktad på JPEG-bilder.

(Bildkälla: Derek Hatfield)

Som en intressant sidotag använder Adobe Photoshop inte alltid subsampling för komprimering. Alla bilder som sparas via “Spara för webben” dialogrutan använder endast chroma-subsampling under ett kvalitetsvärde på 50%.

Olika webbmedier

Webben är också full av olika typer av bildmedier. Du kan ha fotografier, ikoner, knappar, märken och massor av annan grafik. Men det är anmärkningsvärt att det inte är meningslöst att jämföra kvalitet mellan en knapp och ett fotografi.

När du använder fotografier eller detaljerade bilder anser du att du kopplar till en separat mindre komprimerad JPEG-fil. Då kan du konfigurera miniatyrer på din webbplats med ett högre komprimeringsförhållande och mycket mindre filstorlekar. Den enda nackdelen är att du måste tillhandahålla två uppsättningar bilder för ett mediegalleri. Ta del av de många olika grafik som du har sydd på en webbplats och överväga optimeringstekniker för var och en individuellt.

Planerar en grafisk modell

Du vill ha ett organiserat filsystem som är lätt att röra genom. Vissa webbansvariga väljer att värd sina foton på annat håll på webben - som Flickr eller Picasa. Ändå vill du fortfarande använda ett komprimeringsverktyg för att minska bildstorlekarna, men hur du visar dem på din webbplats varierar. Detta gäller speciellt med den populära ökningen av mobila enheter med tillgång till Internet.

Jag hittade en intressant artikel som diskuterar JavaScript JPEG-kodning som skulle hända i din frontend-kod. Det finns inte stor nytta för bildgallerier av hög kvalitet men det kan raka bort laddningstider för dina mobila besökare. Det skulle också vara en användbar teknik när det varar hotlinking bilder eller ombildar miniatyrbilder dynamiskt.

Ett annat bra verktyg att kolla på är Yahoo! Smush.it. Det är en webbläsarbaserad webbapp där du kan ladda upp en bild och Smush.it tar bort alla onödiga extra byte för att optimera filstorleken. Det är 100% förlustfritt vilket innebär att bildkvaliteten inte kommer att brytas ned alls. Och ännu bättre kan du batch-ladda upp bilder från direkta webbadresser om du har dem värd på din webbplats eller en tredje part-server.

Ytterligare verktyg

Det finns gott om programvara för att försöka med avseende på bildmanipulation. Eventuella extra bytes du kan raka av varje fils storlek är avgörande. Det finns inte mycket mjukvara där ute, men alternativen som är tillgängliga är fantastiska.

Irfanview

Denna gratis programvara för Windows låter dig visa och optimera alla uppsättningar stora bilder. Jag gillar särskilt den här programvaran eftersom den stöder batchkonvertering från bilder i flera kataloger. Du kan automatiskt använda samma funktioner över hundratals JPEG-bilder automatiskt.

Vad som är ännu bättre är plugin support från tredje part utvecklare. Ett sådant exempel är RIOT (Radical Image Optimization Tool). Denna plugin fungerar för andra liknande grafikredigerare som GIMP. Den erbjuder en dubbelbildsvy där du manuellt kan justera komprimeringsparametrar för var och en av dina bilder.

Programvaruunderstöd är underbart och RIOT-funktionerna är mycket lätta att använda. Tillsammans med bildkomprimering har du också tillgång till att ta bort ytterligare metadata som EXIF och Adobe XMP. Dessa extra bitar av data kan bara lägga till din totala filstorlek och de behövs sällan.

ImageOptim för Mac

Om du kör OS X och behöver en kraftfull komprimeringsapp ser du inte längre. ImageOptim är ett kraftfullt verktyg för att komprimera bilder på webben - ibland ännu bättre än Photoshop.

Hela applikationen stöder dra-och-släpp-funktionalitet så att det är enkelt att optimera stora uppsättningar bilder. Du kan på samma sätt köra kommandon direkt från skriptet Terminal och setup shell. Kolla in Googles kodsida för mer information och teknisk support.

Det har förekommit några mindre problem med den senaste 1.3.3-stabila utgåvan vid återgivning av pixelerade JPEG-bilder i Opera. Prova att kontrollera alla dina optimerade bilder i de 4 stora webbläsarna - Chrome, Safari, Firefox och Opera (och kanske IE). Om något ser snett ut kan du försöka ladda ner ImageOptim 1.3.0 som konverterar lite renare.

Användbara resurser

JPEG 101: En Crash Course Guide på JPEG
Rätt komprimeringsinställningar för att spara JPG-bilder för WordPress
Snabba JPEG-optimeringstekniker
Hur man optimerar JPEG-bilder för webbplatser
Allt du behöver veta om bildkomprimering

Slutsats

JPEG-komprimering är knepig eftersom du behöver hitta rätt balans mellan kvalitet och ämne. Även när våra moderna Internetanslutningshastigheter ökar finns det fortfarande ett behov av att minska storleken på webbsidor. Nya ramar som jQuery och Typekit kan klara av hundratals ytterligare kilobytes, även på en väl optimerad design.

Jag måste fortfarande rekommendera Adobe Photoshop som min premiärprogram för bildredigering. Det finns andra exempel möjligen bättre för JPEG-optimeringsprocessen. Men webbdesigners kan klara sig med ännu mindre kända open source-lösningar. Om du har liknande knep eller idéer om JPEG-komprimering, vänligen dela med oss i det efterföljande diskussionsområdet nedan.