Bilder är knepiga. Varje webbplats behöver dem, oavsett om det gäller produktsidor eller blogginlägg, men de är lätta att göra fel.
I synnerhet bilder kan bli väldigt, väldigt stora. En typisk smartphone kan ta bilder som ärligt talat är enorma, speciellt när man betänker att det bara för 10-20 år sedan skulle ta flera minuter att ladda ner en bild i storleken som ett frimärke.
Enkel tillgång till stora bilder, enkel visning på stora datorskärmar och enkel tillgång till höghastighetsinternet för många av oss gör att vi kanske inte tänker på bilder som har nästan den effekt de har.
Men sedan kör du ut till ett landsbygdsområde och försöker använda din smartphone via LTE-tjänsten för att surfa på en webbplats, och du ser bilder timeout när du laddar, ser webbplatser som saknar innehåll eftersom bilderna inte laddas in, och du inser.
“Åh, det är därför Google bryr sig!”
Över 50 % av modern webbsurfning hanteras på mobila enheter. Och även om höghastighetsinternet växer snabbt i tillgänglighet, finns det fortfarande inte överallt. Visste du det nästan 25 % av hushållen har inte ens tillgång till internet eller att miljoner använder fortfarande uppringd tjänst?
Bildkredit: Reviews.org
Kom ihåg att internet inte bara är till för personer med tillgång till gigabitfiber i hjärtat av Silicon Valley. Internet är för alla, vilket innebär att personer som använder långsamma, fläckiga anslutningar, människor som surfar via satellitinternet, etc.
Vad har allt detta med bilder att göra?
Bilderna är stora. Inte bara i dimensioner; bilderna är stora i filstorlek. Den genomsnittliga filstorleken för bilder blir allt störremen de är fortfarande bara 2-3 megabyte i genomsnitt 2022. En webbplats, även en fullfjädrad webbplats med massor av innehåll, kommer inte att vara mer än ett par megabyte.
Tänk nu på hur stor en bild är. Ett enskilt foto kan vara flera gånger större än en hel webbsida, och en webbsida kan ha många bilder på sig. Det är inte konstigt att bilder kan sakta ner webbplatser i flera storleksordningar.
Detta fenomen är där Googles policyer kommer in. Google har angett “snabbladdade sidor” och flera laddningstidsmått i Core Web Vitals som avgörande sökrankningsfaktorer. Ju långsammare en sida laddas, desto mer kommer det att påverka din sökrankning. Om någon försöker besöka din webbplats med en eller två rader av mobiltelefontjänst, bör de fortfarande kunna se din webbplats utan att vänta 30 sekunder för att börja se rörelser.
För att underlätta optimering av detta tillhandahåller Google ett verktyg som heter Page Speed Insights. PageSpeed Insights skannar din webbplats och bestämmer hur snabbt den laddas, både för mobila och stationära versioner. De granskar din webbplats för dussintals potentiella problem och ger dig en rapport med eventuella problem de upptäcker. Ett av de vanligaste problemen är felet “Bilder i rätt storlek”.
Denna handledning hjälper dig att lösa det här problemet en gång för alla. Låt oss komma igång!
30 sekunders sammanfattning
Bilder är viktiga för webbplatsens innehåll men kan vara problematiska på grund av deras stora storlek. Den genomsnittliga fotofilstorleken år 2022 är 2-3 megabyte. Bilder, särskilt stora, kan drastiskt bromsa webbplatsens hastighet. Över hälften av webbsurfandet sker nu på mobila enheter, men höghastighetsinternet är inte tillgängligt överallt. Googles Core Web Vitals markerar snabbladdningssidor som viktiga för sökrankning. Googles verktyg PageSpeed Insights möjliggör webbplatskontroller för laddningshastighet på mobila och stationära versioner. Korrekt bildstorlek är en viktig fix för att påskynda laddningstider för webbplatsen. Även om vissa lösningar kan innebära att storleksändra bilder eller justera WordPress-inställningar, kan verktyg som Mobile Featured Image och Just Responsive Images automatiskt presentera den mest lämpliga bildstorleken för tittare.
Vad betyder “Bilder med rätt storlek”?
Om du får varningen om “Bilder i rätt storlek” i PageSpeed Insights vill du förmodligen veta vad det är och hur du kan lösa det. När allt kommer omkring, om du siktar på att nå över 90 på din PSI-poäng, måste du ta itu med så många problem i läsningen som möjligt.
Innan jag gräver i vad det här felet är och vad det betyder, vill jag säga en sak: det är inte en absolut deal-breaker om du har den här varningen.
Det här problemet tar inte upp din SEO, och att fixa det kommer inte att skjuta i höjden för dig till #1-positionen. Att lösa det kommer att hjälpa till att förbättra din sidas laddningstider och Core Web Vitals, men det kommer inte att ha en massiv, dramatisk effekt – det är en rankningsfaktor av hundratals.
Så vad är problemet?
När du laddar upp en bild i WordPress kommer plattformen automatiskt att generera flera olika stora versioner av bilden för användning, som du sedan kan specificera i bildbloggen du lägger till på din sida. Med den här funktionen kan du välja en stor, medium, liten eller miniatyrversion av bilden som ska visas.
Alla andra storleksändringar på webbplatsen – till exempel när din webbplats är förminskad med en responsiv design på en mobil enhet – kan WordPress dra nytta av plugins eller anpassad kod för att tjäna dessa slanka miniatyrversioner istället.
Det betyder att du kanske har en bild med dimensioner som 1440×1080, med kodkryssning för att visa den i 370×278 på en mobil enhet. Det är en enorm skillnad! Den extra storleken är onödig på små skärmar, men det betyder att dina originalbildfiler är enorma. Funktionen för att skapa flera miniatyrer är en central WordPress-funktion, men WordPress byter inte ut dem beroende på din enhet, och du är tvungen att välja en enda storlek när du infogar en bild – mer om det om en stund.
Ännu viktigare är att många moderna webbdesigner har en stor bild ovanför mitten för att åtfölja titeln och inledningen av ett inlägg. Den enorma bilden ser utmärkt ut på ett skrivbord, men den måste laddas fram och tillbaka, vilket tar tid. Det skadar dina första och största innehållsrika målpoäng på mobilen, kan orsaka kumulativa layoutförskjutningar och i allmänhet förstöra dina mobila kärnwebben.
En av mina testsajter får 98 poäng på den stationära PageSpeed Insights men knappa 76 på mobilen, och det beror nästan helt på att bilderna ovanför mitten inte är optimerade för mobilvisning. Det är en otrolig skillnad!
För en teknisk sammanfattning: när Google skannar din webbplats på mobilen efter PageSpeed Insights, gör de det genom att simulera ett 4G-cellnätverk med dålig service och använda en Moto G4 (eller en emulerad version därav), så den använder föråldrad “hårdvara”.
Men eftersom miljontals människor över hela landet fortfarande använder gammal hårdvara, är det en realistisk simulering av vad någon i en mitt på vägen kan använda.
Googles förväntningar på bilder i en responsiv design är relativt liten. Specifikt jämför de storleken på den renderade bilden (vad du ser) mot storleken på den faktiska bildfilen som laddas. Om det finns någon betydande skillnad i dimensioner eller mer än 4 kb i filstorlek kommer Google att flagga detta som ett problem som du bör lösa för att förbättra din användarupplevelse.
Tyvärr finns det ingen enkel kryssruta som du kan klicka på för att fixa detta i WordPress. De flesta WordPress-teman är utformade för att underlätta bildskalning och tror inte att skalning är fel i sig. Å andra sidan föredrar Google om bilderna är så nära visningsstorleken som möjligt. Varför bry sig om att ladda ett foto som är 3 000 pixlar brett på en skärm som bara är 1 170 pixlar bred? Dina användare väntade bara tre gånger längre än de behövde, och sökmotorer kan se detta.
Fyra möjliga lösningar
När jag undersökte (och fixade) felet WordPress korrekt storlek på bilder, har jag upptäckt flera möjliga lösningar.
1. Lösning ett är att ignorera det för nu och åtgärda mer kritiska problem först. Om du kan ta hand om andra väsentliga problem i PageSpeed Insights kan du ofta nå över 90 i verktyget utan att åtgärda problemet. Faktum är att på den testsajten jag nämnde har desktopversionen med 98 poäng felet, medan mobilversionen med 76 inte har det. Vild!
Är det en bra idé att ignorera det? Förmodligen inte. För det mesta handlar det om två saker: hur mycket tid du har att pyssla och vilka andra möjliga problem du skulle kunna lösa istället.
Jag skulle mycket hellre mixtra och få den 76 upp till över 90 än jag skulle få 98 till 99 i Google PageSpeed Insights.
2. Lösning två är att göra en massa manuell bildstorleksändring och bildkomprimering. Du kan göra detta med appar som Imagify, Shortpixel eller Smush; Jag skrev om många olika alternativ här, så läs detta om du vill ändra storlek på bilder i bulk. En anmärkning: det här alternativet kan kräva att du går igenom och ersätter alla dina utvalda bilder och alla andra nya bilder som orsakar problem. Men de flesta av dessa verktyg kommer proaktivt att ändra storlek på varje ny bild som du laddar upp till din webbplats framåt.
3. Lösning tre använder plugins för att automatiskt byta ut dina mindre bilder till miniatyrversionen WordPress genererar, till exempel. Den här lösningen kan i vissa fall ha problemet med att överskjuta och använda för små bilder, men det är ofta bättre än att använda för stora bilder, vilket kan fungera till din fördel. Du kan också använda plugins för att lata ladda dina bilder, vilket är en praxis som döljer bilder som inte är synliga för användaren.
Latladdade bilder börjar laddas först när de syns. Om du har en sida med många bilder kan de alla försöka ladda på en gång när du egentligen bara behöver bilderna ovanför mitten för att laddas först.
4. Lösning fyra är att vada djupt in i ogräset i ditt WordPress-tema, identifiera flera olika brytpunkter och specificera källbilder för var och en med CSS-mediefrågor. Det här alternativet är överdrivet; det garanterar praktiskt taget bästa möjliga resultat för alla på vilken mobil enhet som helst, men Google brukar använda en simulerad mobil enhet för PageSpeed Insights (och, förmodligen, deras index.) Den här lösningen är bäst för webbplatser som inte har en blogg eller som bara har en liten handfull interna sidor. Detta är inte ett realistiskt alternativ om du har hundratals eller tusentals sidor.
Varför skulle du då vilja göra det här? Det beror på ditt mål. Om du vill ha den bästa möjliga användarupplevelsen för varje mobilanvändare, hjälper det här alternativet dig att uppnå det målet. Å andra sidan, om du vill ha det bästa SEO-måttet enligt Google, kommer det extra arbetet (och fördelen) inte att påverka din rankning. Det är upp till dig vad du vill göra.
Eftersom lösning ett är att ignorera problemet och lösning två är både tråkig och har behandlats någon annanstans, kommer jag att fokusera resten av det här inlägget på lösningar tre och fyra.
Använda plugins för att lösa bilder med rätt storlek
Om vi ska vara ärliga är det här alternativet som 90 % av er kommer att använda. Det är snabbt och relativt enkelt, och det riktar sig specifikt till vad Google letar efter. Om Google ändrar hur de mäter mobilsidas responsivitet kan dina bilder behöva justeras, men det här borde fungera bra fram till dess.
Den första plugin du vill använda är Mobile Featured Image, som du kan hitta på denna GitHub-sida. Hur fungerar det?
När du laddar upp bilder till WordPress bearbetar det automatiskt dessa bilder och genererar flera olika storlekar. Sedan försöker pluginet att tjäna den bästa storleken för varje användare. Tyvärr, med mobil responsiv design, är det inte alltid exakt, men i de flesta fall gör det det tunga lyftet åt dig.
Insticksprogrammet lägger till en ny rad i listan över storlekar som WordPress använder och ger dig det extra alternativet för en “mobil utvald bild” under standardrutan “utvald bild” i ett inlägg du skapar. Om du låter den göra sitt, kommer den automatiskt att ersätta alla utvalda mobilbilder med miniatyrversionen av din utvalda bild.
Men om du vill kan du också ange den exakta bilden som visas på mobilen, inklusive att göra den till en annorlunda och unik grafik. Jag skulle inte rekommendera att göra den unik – Google gillar att de olika upplösningarna på en webbplats är desamma – men det är ett alternativ om du vill använda det.
Om ovanstående plugin inte löser problemet för dig kan du prova något liknande Bara responsiva bilder.
Det här alternativet är ett mer detaljerat plugin som hjälper till att konvertera alla dina bilder till responsiva bilder med mer nyans än vad WordPress vanligtvis tillåter. Den upptäcker din användares skärmupplösning och byter automatiskt ut var och en av dina bildadresser med den miniatyrstorlek som bäst passar deras enhet. Denna plugin är lysande eftersom dessa miniatyrbilder redan finns på din webbplats och genereras automatiskt av WordPress-kärnan; detta plugin drar fördel av detta och visar de miniatyrer som bäst passar dina besökares skärmstorlek. Väldigt smart.
Den andra delen av denna process är att optimera resten av bilderna på din webbplats. Genom att ladda ner bilderna nedanför mitten på lata, snabbar du upp sidladdningstiderna avsevärt. Jag älskar WP Rocket för detta; de har funktionen inbyggd i deras kärnplugin, en betald plugin, eller du kan använda gratis spinoff för lazy loading här. Om du till exempel använder plugin-programmet “Mobile Featured Image”, utesluter det från lat inläsning och laddar sedan in resten, kommer PageSpeed Insights bara att se din utvalda bild, som redan är mobiloptimerad.
Som ni förstår finns det mer än en lösning på detta problem. Plugins gör livet mycket lättare ibland.
Manuell redigering av WordPress för att lösa bilder med rätt storlek
Det andra alternativet är att manuellt hitta “brytpunkter” i skärmstorlek, där din responsiva design anpassar sig för olika mobila visningsportar.
Jag rekommenderar att använda Responsive Image Linter för att granska dina bilder. Det här manuset är ett bokmärke; det vill säga en kodbit som körs när du kopierar den till ditt adressfält. Allt du behöver göra är att bokmärka länken på sidan och sedan aktivera bokmärket när du är på din webbplats. Det kommer att köra ett skript, granska din sida och generera en rapport över alla dina bilder i olika skärmstorlekar. Koden kommer att berätta vilka bilder som har problem, vid vilka dimensioner och hur du åtgärdar dem.
När du har den här rapporten måste du ta reda på vilka bildmått och storlekar du behöver optimera för. Du måste generera dessa bilder och ladda upp dem till ditt webbhotell och återskapa miniatyrer för dem. Sedan måste du registrera fler bildstorlekar i din add_image_size()-funktion och visa bilder korrekt för olika visningsportstorlekar.
Du kan läsa mer dokumentation om denna process på den här sidan. Kom ihåg att det här kommer att bli ett ganska stort projekt med mycket tid som ägnas åt att köra skript om din WordPress-webbplats har mer än ett par dussin sidor på den, så budgetera din tid därefter.
Om det här alternativet är för tekniskt för dig, oroa dig inte för det. Det tidigare WordPress-plugin-baserade alternativet kommer att komma dig tillräckligt nära – detta är bara för mina andra webbansvariga som vill väga alla möjliga alternativ.
Om du har lyckats ta bort varningen “Bilder i rätt storlek” finns det några saker du kan göra för att förbättra din poäng ytterligare och komma över 90 på Google PageSpeed.
Till exempel:
- Implementera ett CDN. Detta kommer att förbättra din FCP-tid (first contentful paint) och LCP-tid (largest contentful paint). Om ett innehållsleveransnätverk kan leverera en bild till en användare snabbare än vad din webbvärd kan, betyder det att din webbplats kommer att läses in snabbare, vilket kommer att förbättra dina poäng över hela linjen. Bilder tenderar att vara några av de tyngsta elementen på en webbplats, så det är klokt att vara värd för dem på en hypersnabb server. Bandbredden är också smutsbillig; vår KeyCDN-tjänst kostar oss några dollar per månad.
- Ändra dina bildformat. Undvik PNG-filer och håll dig i första hand till JPG-filer. Om du bestämmer dig för att använda en betald bildoptimeringsplugin som Imagify optimerar den inte bara dina bilder, utan den konverterar bilder till .webp-format. Att använda .webp-bildformatet kommer att bli av med “Visa bilder i nästa generations format” varning. Imagify hjälper dig också att komprimera bilder och ändra storlek på dina bilder i full storlek om de är för stora, vilket hjälper dig att bli av med “Bilder i rätt storlek” varning. Det kommer fortfarande att säkerhetskopiera dina högupplösta bilder, såväl som de ursprungliga bildformaten, så oroa dig inte för att förlora dina originalfiler.
- Definiera dina bilder i din HTML. Ställ in en specifik höjd- och bredddimension och kontrollera dina WordPress-tema CSS-filer för att säkerställa att de skalas ordentligt vid varje upplösning. Du vill också se till att bilder har en “maxbredd” definierad så att de inte svämmar över från skärmen. Utan en specifik höjd och bredd kommer dina bilder att utlösa en varning i Google Lighthouse och PageSpeed insikter: “Bildelement har inte explicit bredd och höjd.”
- Ladda bara näthinnabilder på näthinnaskärmar. Du kan söka efter näthinnaskärmar med följande CSS-mediafråga:
@media (-webkit-min-device-pixel-ratio: 2), (min-upplösning: 192dpi) { - Lata ladda bilder. Lazy loading förhindrar bilder utanför skärmen från att laddas tills användaren rullar till dem. Om dina bilder med högre upplösning finns längre ner på sidan kan detta lösa ditt problem direkt. Det kommer också att lösa “Skjut upp bilder utanför skärmen” fel.
Dessa alternativ bör hjälpa dig att lösa de flesta potentiella problem med bilder som inte laddas i rätt dimensioner. Efter att ha implementerat en korrigering måste du vara uppmärksam på de andra Core Web Vitals och se till att de är lösta.
Beroende på storleken på din webbplats och mängden verklig data som Google kan samla in, kan det ibland ta månader eller till och med år för Core Web Vitals att uppdateras i Search Console, så fortsätt köra tester och gör ditt bästa för att få din webbplats till godkänt betyg.
Kunde du få det här felet löst, och om inte, vilka metoder använde du för att försöka åtgärda dem? Dela gärna med mig i kommentarerna nedan, så svarar jag snabbt med tips som kan hjälpa dig! Jag har hjälpt hundratals webbplatser att uppnå 90+ PageSpeed-resultat, och jag skulle gärna peka dig i rätt riktning. Ju fler tips vi kan dela desto snabbare kan vi göra internet.
