Flera bildfiler för samma bild
srcset listar olika bildbredder eller pixeltätheter. Webbläsaren väljer den fil som bäst passar skärm, layout och nätverk.
sizes beskriver layouten
sizes berättar hur bred bilden förväntas visas vid olika viewportbredder. Utan rätt sizes kan webbläsaren välja en onödigt stor fil.
WordPress skapar srcset automatiskt
När en bild infogas via WordPress kan systemet använda genererade bildstorlekar. Specialmallar måste använda WordPress bildfunktioner för att behålla stödet.
Så kontrollerar du vilken srcset-bild som valdes
Öppna utvecklarverktygens nätverkspanel och se vilken fil som faktiskt hämtas på mobil och desktop. Ändra inte bara HTML-koden utan att kontrollera layoutens CSS.
Så kan fel sizes göra att mobil ändå hämtar desktopbilden
En bild ligger i en tvåkolumnslayout och visas ungefär 50 procent av viewporten på desktop.
HTML innehåller flera kandidater i `srcset`, men `sizes` är satt till `100vw` för alla bredder. Webbläsaren tror då att bilden behöver hela skärmens bredd och kan välja en större fil än layouten kräver. När `sizes` ändras för att motsvara den verkliga kolumnbredden kan en mindre kandidat väljas. Det visar varför `srcset` inte kan bedömas isolerat: CSS bestämmer layouten, `sizes` beskriver den för bildvalet och kandidatlistan behöver innehålla lämpliga dimensioner. Bildoptimering är också redaktionellt arbete.
Srcset låter webbläsaren välja mellan flera bildkandidater
I `srcset` kan samma motiv anges i flera filstorlekar, exempelvis 480, 960 och 1600 pixlar brett. Webbläsaren väger ihop informationen med skärmens pixeldensitet och den beräknade layouten för att välja en lämplig fil. Det betyder att servern inte behöver gissa om besökaren använder mobil eller desktop.
Valet görs av webbläsaren, som har bättre information om den faktiska visningssituationen.
Sizes beskriver hur stor plats bilden väntas få
När `srcset` använder bredddeskriptorer behöver `sizes` tala om hur bred bilden kommer att visas vid olika viewportstorlekar. Om `sizes` säger att bilden alltid är 100vw trots att den bara ligger i en halv kolumn kan webbläsaren välja en onödigt stor fil.
Därför behöver markup och CSS stämma överens. Responsiva bilder är inte bara en lista med filer; webbläsaren behöver även en rimlig beskrivning av layouten.
WordPress skapar mycket av strukturen automatiskt när rätt bildfunktioner används
När bilder infogas genom WordPress vanliga mediefunktioner genereras ofta flera storlekar och `srcset` skrivs ut automatiskt. Specialbyggda teman kan tappa detta om utvecklaren hårdkodar en enda original-URL i `<img>`. Använd WordPress bildfunktioner eller bygg motsvarande responsiv markup själv. Kontrollera sedan i DevTools vilken fil som laddas på mobil och desktop. Det är den faktiska nätverkstrafiken som visar om lösningen fungerar.
Behöver företaget en bättre hemsida?
Få ett tydligt förslag och fast pris
Vi bygger och förbättrar WordPress-hemsidor med fokus på tydlighet, prestanda, SEO och enkel förvaltning.
Snabb återkoppling
Hjälpte den här artikeln dig?
Din röst sparas anonymt och hjälper oss att förbättra guiderna.