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="[email protected] 2x, [email protected] 3x"
width="200" height="200" alt="...">
<img src="image.jpg"
srcset="[email protected] 2x, [email protected] 3x"
width="200" height="200" alt="...">
<!-- Using picture element -->
<picture>
<source srcset="[email protected] 2x" type="image/webp">
<img src="image.jpg" srcset="[email protected] 2x" alt="...">
</picture>
<picture>
<source srcset="[email protected] 2x" type="image/webp">
<img src="image.jpg" srcset="[email protected] 2x" alt="...">
</picture>
/* CSS background retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo { background-image: url('[email protected]'); background-size: 100px 50px; }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo { background-image: url('[email protected]'); background-size: 100px 50px; }
}