K. Andersson
En stor del av att maximera din webbplatshastighet är bildoptimering. Och från och med version 5.8 stöder WordPress nu WebP-bildformatet. Detta filformat är 30 % mindre än JPEG eller PNG, vilket innebär att bilder laddas snabbare.
Att använda ett bättre filformat är naturligtvis bara ett sätt att optimera dina bilder. Du kan fortfarande få ut mycket mer av prestandaoptimerade JPEG- och PNG-bilder. Faktum är att det finns många verktyg som gör detta enkelt.
Idag kommer jag att ta upp olika sätt att optimera bilder och förbättra din webbplatshastighet.
Vad är WebP?
WebP är ett bildformat skapad av Google År 2010. Det är mindre än traditionella filformat som JPEG och PNG, samtidigt som det ger utmärkt förlustfri och förlustfri komprimering.
Som ett resultat är webbplatser som använder WebP snabbare än de som inte gör det. Så hur fungerar det?
Utan att bli för teknisk, använder förlustfull WebP-komprimering en prediktiv kodningsteknik. I grund och botten tittar den bara på en liten del av koden i närliggande block av pixlar och förutsäger hur resten av den kommer att se ut.
Förlustfri WebP-komprimering använder bilddata som den redan har sett för att rekonstruera bilden.
Kom bara ihåg att inte alla webbläsare stöder WebP som filformat. Den goda nyheten är att de flesta stora gör det, inklusive Google Chrome, Firefox, Microsoft Edge och Opera.
Detta täcker över 95 % av all webb- och mobiltrafik, så du behöver inte oroa dig mycket.
De bästa plugins för bildoptimering
I den här artikeln kommer jag att gå över några av de bästa plugins för att optimera bilder för WebP. Sedan ska jag gå igenom några verktyg du kan använda just nu för att skapa strömlinjeformat visuellt innehåll för din webbplats.
1. EWWW Image Optimizer
Om du någonsin har tittat på din webbplats hastigheter och gått “ewww”, bör du ge det en chans EWWW Image Optimizer företag. Den är specialiserad på bildoptimering i WordPress och stöder flera filformat, inklusive WebP.
Och viktigast av allt, det fungerar även på alla bilder från andra plugins. Detta innebär inga kompatibilitetsproblem!
Insticksprogrammet låter dig välja vilka komprimeringstyper som ska användas för varje filtyp, och ja, du kan ha olika alternativ för olika filer. Efter det kan du börja optimera bilderna med massfunktionen.
Att optimera enskilda bilder går mycket snabbt, vanligtvis mindre än en minut, om inte filen är mycket stor. Men om du gör massoperationer, förvänta dig att processen tar flera minuter, särskilt på större webbplatser.
2. Smush
Smush är den mest populära bildoptimeraren för WordPress med över en miljon aktiva installationer. Och det är för att det är mer än att bara optimera bilder. Istället lägger den till andra funktioner som lat laddning för att öka sidhastigheten.
Naturligtvis är pluginets bröd och smör bildoptimering, vilket är där det lyser.
Den täcker alla populära filtyper, men det är värt att nämna att WebP inte är tillgänglig i gratisversionen. Dock kompenserar täckningen av detta plugin för det. Till skillnad från många andra optimeringsplugins går det utöver mediebiblioteket.
Bilder utanför mediebiblioteket optimeras automatiskt. Den hanterar även bildstorleksändring under komprimeringsprocessen, så att du kan slå två flugor i en smäll. Och du kan se all optimeringsstatistik direkt i bildblocket.
3. ShorPixel Image Optimizer
ShortPixel Image Optimizer är ett gratis plugin för bildoptimering. Den erbjuder användarna 100 tokens per månad, där en bild kräver en token. Den största skillnaden är dock att dessa gratis tokens ger dig tillgång till premiumpaketet.
I jämförelse måste du köpa Pro-versionen i andra plugins för att matcha kvaliteten.
Nu finns det ett stort problem med detta system, och det är hur WordPress hanterar bilder. WordPress gör faktiskt flera kopior av dina bilder i olika storlekar, och var och en av dessa storlekar tar faktiskt ett ID. Således är det faktiskt inte ett en-till-en-förhållande.
Detta är dock ett ganska bra verktyg för en ny webbplats eftersom du förmodligen inte behöver optimera 100 bilder i månaden. Speciellt på en liten blogg. Det kan också hjälpa till att konvertera alla JPEG-, PNG- eller GIF-format till WebP-format.
4. Komprimera JPEG- och PNG-bilder
Under tiden Komprimera JPEG- och PNG-bilder hanterar faktiskt inte WebP-filformatet, det gör ett utmärkt jobb med JPEG- och PNG-filer. Och för många webbplatser är detta mer än tillräckligt, speciellt om du inte använder redigeringsprogram som stöder WebP.
Det finns dock massor av gratis redigeringsverktyg där ute, så se till att kolla in avsnittet nedan.
Detta plugin erbjuder 500 paket gratis varje månad. Den stöter dock på samma problem som den senaste plugin; den optimerar alla bildkopior. Så det är mycket närmare 100 bilder, men det är mer än tillräckligt för nyare webbplatser.
Det är också värt att notera att detta plugin är helt kompatibelt med WooCommerce, men råder till försiktighet. WooCommerce verkar försöka återskapa bildens metadata vid varje sidbesök. Detta kan sluta äta på dina månatliga krediter.
5. Optimus – WordPress Image Optimizer
Optimus WordPress Image Optimizer är ett annat bra verktyg att tänka på när du optimerar bilder i WordPress. Det kan hjälpa till att minska bildstorleken med upp till 70 %, vilket definitivt kan hjälpa till att snabba upp dina sidor.
Nu är det värt att notera att även om det finns ett gratis alternativ, är det förmodligen värdelöst för många webbplatser.
Detta beror på att gränsen är 100KB, vilket de flesta filer naturligtvis kommer att överskrida, särskilt de som behöver optimeras. Dessutom fungerar många av inställningarna bara i Pro-versionen, så du måste betala någon gång.
De tjänster som tillägget erbjuder är dock utmärkta och minskningen av bildstorleken är ganska märkbar. Det fungerade med alla större bildfiltyper, inklusive WebP. Batchfunktionen är enkel att använda och ganska rimlig, men som alltid tar större webbplatser längre tid.
6. Imagify – Optimera dina bilder och konvertera WebP
Tänka är ett bra alternativ för webbplatser som letar efter ett freemium-alternativ för bildoptimering. Det ger dig en stor månatlig gräns som inte mäts av antalet bilder, utan av deras storlek.
Varje månad kan du optimera upp till 20 MB bilder gratis. Och det kan vara mycket för utvecklare som vet hur man hanterar bilder.
Den stöder alla standardfiltyper, inklusive PDF-filer, och gör en WebP-fil varje gång den optimerar en bild, förutsatt att du väljer en bricka. Den erbjuder användarna tre optimeringsnivåer: Normal, Aggressiv och Ultra.
Varje nivå förbättrar komprimeringsfunktionen, och om du inte är nöjd kan du använda backupalternativet för att återställa originalet och välja en annan optimeringsnivå. Detta hjälper dig att se vad som fungerar bäst för dina bilder.
7. WebP Express
Om du vill konvertera alla dina webbplatsbilder till WebP-filformat finns det inget bättre alternativ än WebP Express ansluta. Den tillhandahåller flera sätt för webbplatser att göra detta och visar dem endast i webbläsare som stöder WebP.
Besökare som inte använder sådana webbläsare, vilket är sällsynt, kommer att se den ursprungliga JPEG- eller PNG-versionen.
Denna plugin använder WebP Convert-biblioteket för att konvertera JPG- och PNG-filer till WebP. Vissa webbplatser kan ha problem beroende på deras webbserver. I dessa fall kan du behöva använda en molnlösning som pluginet ger alternativ för.
Kom bara ihåg att det här är premiumfunktioner. Slutresultatet är en mycket snabbare webbplats, men kom ihåg några begränsningar. Till exempel konverteras inte Gravatar-bilder eftersom de lagras på Gravatar-servrarna.
Du måste vara värd för bilden för att pluginet ska fungera.
WebP-redigeringsverktyg
Nu, om du använder Photoshop eller andra redigeringsverktyg, kanske du upptäcker att de flesta av dem inte stöder WebP-formatet. Förmodligen kommer detta att förändras med tiden när WordPress implementerar filformatet, men när är ett mysterium.
Under tiden behöver du ett verktyg för att skapa och redigera WebP-bilder, och lyckligtvis finns det många gratisalternativ tillgängliga, som:
- Picosmos
- Paint.Net
- RealWorld Paint
- JPEGView
Däremot rekommenderar jag PhotoPea.
Photopea
När det kommer till Photoshop-alternativ finns det inget bättre alternativ än Photopea. Det ser nästan identiskt ut med Photoshop, så användarna ska känna sig som hemma. Det finns dock två viktiga skillnader.
Photopea stöder inbyggt WebP-bildfilformatet och är helt gratis att använda.
Faktum är att du inte ens behöver skapa ett konto för att använda den här programvaran. Photopea fungerar direkt via din webbläsare, men alla filer lagras på din dator, vilket kan göra det svårt att byta dator. Detta löses dock enkelt med molnlagringsfunktionen.
Och som du kanske förväntar dig, eftersom den inte har en egen app på din dator, kan prestanda vara lite bristfällig. Komplexa bilder med många lager kan ta flera minuter att ladda.
Photopea är dock gratis och fungerar otroligt bra med PSD och andra bildfiler som kan konverteras till WebP.
Lazy Loading är din bästa vän
Naturligtvis har även WebP sina gränser för hur liten din bild kan bli. Det finns dock andra tekniker du kan använda för att ytterligare optimera dina bildladdningstider på Lazy Loading-fronten.
Lazy loading är en teknik där endast synliga bilder laddas. Tänk dig till exempel en lång sida med massor av bilder. Är det vettigt för besökare att vänta på att bilderna nedan ska laddas?
De flesta skulle nog säga nej, och det är vad lat nedladdning är. Den laddar bara vad besökaren ser när sidan laddas.
Om de väljer att scrolla ner, vilket inte alla gör, kommer resten av bilderna att laddas när de scrollar. Detta kan avsevärt snabba upp sidor med många bilder eftersom den initiala belastningen minskar.
Bättre optimering, högre hastigheter, bättre upplevelse
Det borde vara självklart, men en snabbare webbplats är bara en bättre upplevelse. Och viktigast av allt, det är vad besökare kan förvänta sig 2021.
Ett av de största problemen de flesta webbplatser stöter på är dåligt optimerade bilder. Många nybörjare förstår inte hur bildstorleken ska se ut och använder ofta filer som är till och med över megabyte stora.
I verkligheten bör bilder sällan överstiga ett par hundra kilobyte.
Den goda nyheten är att bildoptimering aldrig har varit enklare, och det finns massor av plugins i WordPress som kan hjälpa dig att göra det. Detta förbättrar inte bara besökarupplevelsen, utan det förbättrar också din sökmotorrankning.
Hastighet är en av de få faktorer vi vet säkert i sökningar, och det är för att Google berättade för alla.
Planerar du att använda filformatet WebP på din WordPress-webbplats? Hur optimerar du för närvarande bilder för webben?
