Lämpliga bildstorlekar för webbplatser

Mät utrymmet i din egen layout

Ta reda på bildytans bredd på sidan, i stället för hela webbläsarfönstrets bredd. Börja med de mått som temat eller bildblocket rekommenderar. Om de saknas kan du använda webbläsarens inspektör eller be webbplatsens ansvariga att kontrollera visningsbredden på en telefon och en dator. Ta även hänsyn till en större galleri- eller zoomvy om den behövs.

För en bild som visas 720 pixlar bred kan du jämföra versioner på 720 och 1440 pixlar. Den större kan se skarpare ut på en skärm med hög pixeltäthet, men kontrollera om de extra detaljerna är värda den större filen. Använd ett tillräckligt stort original: att förstora från 900 till 1440 pixlar återställer inte saknade detaljer.

Startvärden utifrån placering

Ett omslag på 2400 pixlar är inte rätt för alla. Telefonen kan behöva mindre version eller annan beskärning. Produktzoom kan däremot behöva en separat större fil än det vanliga kortet.

Skilj pixlar från filstorlek

Pixelmått beskriver rutnätet, exempelvis 1200 × 800. Filstorlek beskriver lagring och överföring i kilo- eller megabyte. Samma mått kan ge olika filstorlekar beroende på detaljer, format och komprimering.

En CSS-pixel mäter den synliga storleken i sidans layout. På en skärm med hög pixeltäthet kan den använda flera fysiska skärmpixlar. En skarp bild kan därför behöva fler bildpixlar än den visade bredden.

Börja med layouten. Ett foto som visas 600 CSS-pixlar brett behöver oftast inte samma källa som ett skrivbordsfyllande foto. Skärmar med hög pixeltäthet kan dra nytta av fler bildpixlar än CSS-bredden, beroende på motiv och den ökade filstorleken.

Behåll avsiktliga proportioner

Lås proportionerna i storleksverktyget och ange 1200 pixlars bredd för ett original på 3000 × 2000. Höjden blir automatiskt 800. Du behöver inte räkna ut och ange båda måtten. Kontrollera att ansikten och cirklar behåller sin form.

Beskär för en kvadratisk miniatyr i stället för att pressa ihop ett brett foto. Använd beskärning och håll motivet synligt även på liten skärm. Förstoring skapar inte detaljer som aldrig fångats.

Leverera rätt storleksvarianter

Responsiv bildkod låter webbläsaren välja filer. Breddbaserad srcset och sizes beskriver tillgängliga bredder och visningsytan; de skapar inte filer. Se MDN:s responsiva bildguide.

Kontrollera om publiceringssystemet redan skapar varianter och kod. Exportera och referera rätt filer på statiska sidor. Tre uppladdningar utan koppling i sidan ger ingen responsiv leverans.

Sätt ett mål för bildernas filstorlek

Testa representativa bilder och hela sidan. Tolv produktkort har annan budget än ett portfolio med ett detaljerat foto. Ingen enskild kilobytegräns garanterar hastighet eller kvalitet.

1. Granska i verklig visningsstorlek.
2. Jämför mindre mått och effektivare format.
3. Kontrollera den hämtade filens storlek och synliga detaljer.
4. Testa mobilt innan inställningen återanvänds.

Skilj omslag, produktbilder och miniatyrer åt

Försvinner motivet i ett brett omslag på mobil, gör en separat beskärning i stället för att förvränga bilden. Produktzoom kan behöva en stor separat fil som varje litet produktkort inte ska hämta. En kvadratisk miniatyr behöver beskäras, inte pressas ihop.

Anteckna proportioner, största visningsbredd, möjliga filbredder och viktiga detaljer för varje placering. Kontrollera efter temabyte. Hämtar telefonen fortfarande största filen, undersök det responsiva bildvalet. En ny liten export hjälper inte om sidan aldrig använder den.