Pixel density

Screens differ in pixel density: a 2x screen packs two physical pixels into every CSS pixel in each direction. An image shown 600 CSS pixels wide needs 600 pixels on a 1x screen, 1200 on a 2x screen and 1800 on a 3x screen to look sharp. Too few pixels and the image looks soft; too many and the page loads slower.

The site lists one version of each image per density in the image's srcset, for example 1x and 2x. The browser picks the version that matches its screen. Nothing is picked on the server, so the same page serves a phone, a laptop and a 4K monitor.

Choose upload sizes

• Upload images at least as wide as the largest size they are shown at, times two for sharp results on high-density screens. The editor warns when an upload is too small.
• A small image looks fine on a 1x screen and blurry on a 2x screen. Check a new image on a phone.

Which sizes get 2x

Mobile and tablet sizes get 1x and 2x versions. Desktop gets 1x only.

Read the table

The table below reads the candidates from the srcset of each image in the frame.

• Screen density: this browser's pixel density. Change it with the browser's zoom or device emulation, then reload.
• Needs: the shown width times the screen density.
• Picked: the version the browser chose.

The page labels the match with the same labels as the Sizes page.