Pixel density

Skärmar har olika pixeltäthet: en 2x-skärm packar två fysiska pixlar i varje CSS-pixel i varje riktning. En bild som visas 600 CSS-pixlar bred behöver 600 pixlar på en 1x-skärm, 1200 på en 2x-skärm och 1800 på en 3x-skärm för att se skarp ut. För få pixlar och bilden ser mjuk ut; för många och sidan laddar långsammare.

Webbplatsen listar en version av varje bild per täthet i bildens srcset, till exempel 1x och 2x. Webbläsaren väljer den version som passar skärmen. Ingenting väljs på servern, så samma sida fungerar för en mobil, en laptop och en 4K-skärm.

Välj storlek vid uppladdning

• Ladda upp bilder som är minst lika breda som den största storleken de visas i, gånger två för skarp bild på skärmar med hög täthet. Redigeraren varnar när en uppladdad bild är för liten.
• En liten bild ser bra ut på en 1x-skärm och suddig på en 2x-skärm. Kontrollera en ny bild på en mobil.

Vilka storlekar får 2x

Storlekarna för mobil och surfplatta får versionerna 1x och 2x. Desktop får bara 1x.

Läs tabellen

Tabellen nedan läser kandidaterna ur srcset på varje bild i ramen.

• Skärmtäthet: webbläsarens pixeltäthet. Ändra den med webbläsarens zoom eller enhetsemulering och ladda om.
• Behöver: den visade bredden gånger skärmtätheten.
• Vald: den version webbläsaren valde.

Sidan märker träffen med samma etiketter som sidan Sizes.