Retina Display Guide
| Device | Device Pixel Ratio | Image Needed |
|---|---|---|
| Standard display | 1x | 1ร base size |
| Retina (most iPhones) | 2x | 2ร base size |
| Retina HD (iPhone Plus/Pro Max) | 3x | 3ร base size |
| Android (high-end) | 2.5โ3x | 3ร recommended |
If you display a 100ร100 CSS pixel image, provide a 200ร200px (@2x) and 300ร300px (@3x) version.
<!-- Using srcset -->
<img src="image.jpg"
srcset="image@2x.jpg 2x, image@3x.jpg 3x"
width="200" height="200" alt="...">
<img src="image.jpg"
srcset="image@2x.jpg 2x, image@3x.jpg 3x"
width="200" height="200" alt="...">
<!-- Using picture element -->
<picture>
<source srcset="image@2x.webp 2x" type="image/webp">
<img src="image.jpg" srcset="image@2x.jpg 2x" alt="...">
</picture>
<picture>
<source srcset="image@2x.webp 2x" type="image/webp">
<img src="image.jpg" srcset="image@2x.jpg 2x" alt="...">
</picture>
/* CSS background retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo { background-image: url('logo@2x.png'); background-size: 100px 50px; }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo { background-image: url('logo@2x.png'); background-size: 100px 50px; }
}