# Image Assets for Retina and Hi-DPI screens
Due to modern screens having higher pixel-densities (more pixels per square inch), they will require images with a higher resolution to look sharp.
Sharp-looking graphics are especially important for elements that are supposed to catch the user's attention such as logos and icons, but also for anything containing text.
For every pixel on a traditional desktop monitor, modern screens will [have at least 4 (2x2)](https://www.danrodney.com/blog/retina-web-graphics-explained-1x-versus-2x-low-res-versus-hi-res/).
To support these screens, we should at least **double** the height and width of our images. This is often times referred to as **2x graphics**.
## Performance
To keep load times short (especially on mobile), we should be using modern image formats like [WebP](https://caniuse.com/?search=webp) or [AVIF](https://caniuse.com/?search=avif) which have a much better compression than traditional lossy (JPEG) and lossless compressions (PNG).
**Note**: (as of Sep 2023) AVIF is not yet enabled by default on Edge.
Also worth mentioning here is the use of vector graphics ([SVG](https://caniuse.com/?search=svg)) whenever applicable.
## Allow the browser to choose
Now that we have saved our image in multiple resolutions, the CSS [image-set()](https://caniuse.com/?search=image-set) property will allow the User Agent to pick the appropriate image based on the current device's pixel densities and supported image formats.
Example:
```html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<link rel="stylesheet" href="styles.css" />
<meta charset="UTF-8" />
</head>
<body>
<img id="banner" intrinsicsize="500x300" />
</body>
</html>
```
Note: `intrinsicsize` ([CanIuse](https://caniuse.com/intrinsic-width)) [avoids layout shifts](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)
```css
#banner {
background-image:
url("img/photo.jpg"); /* fallback: `image-set` not supported */
background-image: image-set(
url("img/
[email protected]") 1x, /* 500x300 */
url("img/
[email protected]") 2x, /* 1000x600 */
url("img/
[email protected]") 3x, /* 1500x900 */
url("img/photo.jpg") /* fallback: `WebP` not supported */
);
height: 300px;
width: 500px;
}
```
**Note:** the fallback to JPEG for browsers that either don't support WebP or the image-set() property.
[Codesandbox.io example](https://codesandbox.io/s/blog-web-graphics-for-retina-hidpi-displays-p9p2z2?file=/src/styles.css)
#webdev