Snabba upp ditt WordPress - Spara bilder optimerade för webben

Sparar du bilder fel? De flesta nybörjare vet inte hur man sparar bilder på ett korrekt sätt, vilket kan ha stor inverkan på webbhastigheten. I den här artikeln kommer vi att visa dig hur du korrekt sparar bilder optimerade för webben.

Varje bloggande expert kommer att berätta att bilder bidrar till att öka engagemanget. Men vad de inte säger är att inte optimera bilder för webben kan sakta ner din webbplats. Enligt Strangeloop kan en en-sekundsfördröjning kosta 7% av försäljningen, 11% färre sidvisningar och 16% minskning av kundnöjdhet.

Video Tutorial

Om du inte gillar videon eller behöver mer instruktioner, fortsätt läsa.

Hur man sparar bilder korrekt?

När du sparar bilder måste du överväga två saker: bildfilformat, och kompression. Genom att välja rätt kombination kan du minska din bildstorlek med 5x.

För de flesta av oss är de enda två bildformat som är viktiga för JPEG och PNG. För att hålla saker enkelt, använd JPEG för foton eller bilder med mycket färg och använd PNG-filer för enklare bilder eller när du behöver transparenta bilder.

För dem som inte känner till skillnaden är PNG-bildformat okomprimerat vilket betyder att det är en högre kvalitetsbild. Nackdelen är att filstorleken är mycket större. Å andra sidan är JPEG ett komprimerat filformat som något minskar bildkvaliteten för att ge en betydligt mindre filstorlek.

På WPBeginner är majoriteten av våra bilder JPEG.

Nästa sak är komprimering vilket innebär att du använder ett verktyg för att spara bilder optimerade för webben. Komprimering kan göra en stor skillnad.

Se tabellen nedan, som lyfter fram de få kombinationer som vi kunde ha använt för att spara Strangeloop-bilden som används i den här artikeln.

Bildkomprimeringsverktyg för bloggare

Nu när du har sett skillnaden gör varje komprimeringstyp, nedan är hur du rätt kan spara bilder optimerade för webben och påskynda din webbplats.

Adobe Photoshop

Adobe Photoshop är en premiumprogramvara som levereras med en funktion för att spara bilder optimerade för webben. Öppna din bild och klicka på knappen Arkiv> Spara för webb och enheter.

Detta öppnar en spara skärm. Till höger kan du ställa in olika bildformat. För JPEG-format ser du olika kvalitetsalternativ. När du väljer dina alternativ visar den också filstorleken längst ned till höger.

Obs! Vi förstår att Photoshop är ganska dyrt. GIMP är ett gratis alternativ som användare kan använda. Andra Adobe-produkter som Fireworks kan också göra jobbet.

TinyPNG

TinyPNG är en gratis webbapp som använder smart lossy komprimeringsteknik för att minska storleken på dina PNG-filer. Allt du behöver göra är att gå till deras hemsida och ladda upp dina bilder. De kommer att komprimera bilden och ge dig hämtningslänken.

För utvecklare har de också ett API för att konvertera bilder automatiskt.

JPEG Mini

JPEGmini använder en komprimeringsteknik som avsevärt minskar bildstorleken utan att påverka deras perceptuella kvalitet. Du kan använda sin webbversion gratis eller köpa programmet för din dator. De har också ett betalt API för att automatisera processen för din server.

ImageOptim

ImageOptim är ett Mac-verktyg som låter dig komprimera bilder utan att förlora någon kvalitet genom att hitta de bästa komprimeringsparametrarna och ta bort onödiga färgprofiler.

Windows alternativ till detta är Trimage.

Som du kan se att det finns flera verktyg du kan använda för att optimera bilder för webben. Vid användning av Photoshop-komprimering såg vi de bästa resultaten i storlek men kvaliteten påverkades. TinyPNG var en klar vinnare för att spara alla typer av PNG på webben.

Några tyder på att du kan använda en kombination av TinyPNG eller JPEG Mini och Image Optim för ännu bättre resultat. Att köra två separata verktyg för att ladda upp bilder kan dock öka din arbetsbelastning lite.

Slutliga tankar om bildoptimering

Om du inte sparar bilder som är optimerade för webben börjar du göra det nu. Det kan göra en stor skillnad på din webbplatshastighet, och dina användare kommer tacka för det. Visst kan bildkvaliteten minska något, men de flesta användare kommer inte märka det.

Om du letar efter kvalitetsbilder kan du se vår guide om hur du hittar royaltyfria bilder för dina blogginlägg.

Sist men inte minst, med hjälp av en CDN för att betjäna bilder för din WordPress-webbplats kan du snabbt påskynda din webbplats. Kolla in denna infographic för att se vad som är en CDN, och använd vår guide om hur du installerar CDN för din webbplats. Vi använder MaxCDN för vår webbplats.

Vi hoppas att du hittade den här artikeln till hjälp.

Har du bloggarvänner som sparar bilder fel? Dela den här artikeln med dem, så de kan påskynda sin webbplats. De kommer tacka för det.

Om du har några frågor, vänligen lämna en kommentar nedan. Glöm inte att följa oss på Twitter och Google+