6.1 Using srcset and sizes Attributes
High-density pixel screens, like Apple's Retina displays, have become standard for many modern devices. These displays have a lot more pixels per inch (PPI), providing sharper and more detailed images. Web developers need to optimize graphics for such screens to keep the user experience top-notch. Let's dive into how to do that.
Challenges with High-Density Screens
On high-density screens, standard images might look blurry or pixelated since one image pixel stretches across several screen pixels. To solve this, you need to use higher resolution images that the browser can then scale down to fit the high-density screen.
The srcset and sizes attributes let you specify different image versions for various pixel densities. This helps the browser pick the right image for the specific device.
Example of using srcset and sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimizing for Retina Displays</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Example Image for Retina Displays">
</body>
</html>
Code Explanation:
srcset: specifies three image versions for different pixel densities (1x,2x,3x)-
sizes: sets the image width for different display conditions:- Up to
600px— the image takes up100%of the viewport width - Up to
1200px— the image takes up50%of the viewport width - In all other cases — the image takes up
33%of the viewport width
- Up to
6.2 Using Vector Graphics (SVG)
Vector Graphics (SVG) is an awesome solution for high-density screens because SVG files scale without losing quality. They're perfect for logos, icons, and other interface elements.
Example of using SVG:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using SVG for Retina Displays</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Code Explanation:
src="images/logo.svg": specifies the path to the SVG file, which will scale to any size without losing quality
6.3 Using CSS
For background images, you can use media queries and CSS properties to load different versions of the images based on the device's pixel density.
Example of using CSS for background images:
.background {
background-image: url('images/background-1x.jpg');
}
@media only screen and (min-resolution: 2dppx) {
.background {
background-image: url('images/background-2x.jpg');
}
}
@media only screen and (min-resolution: 3dppx) {
.background {
background-image: url('images/background-3x.jpg');
}
}
Code Explanation:
.background: defines the base background image@media only screen and (min-resolution: 2dppx): changes the background image to a version for2xdensity screens@media only screen and (min-resolution: 3dppx): swaps the background image for a version tailored to3xdensity screens
6.4 The Picture Element
The <picture> tag lets you specify multiple image sources with different display conditions. It's useful for more complex image adaptation scenarios.
Example of using <picture>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using <picture> for Retina Displays</title>
</head>
<body>
<picture>
<source srcset="images/image-3x.jpg" media="(min-resolution: 3dppx)">
<source srcset="images/image-2x.jpg" media="(min-resolution: 2dppx)">
<img src="images/image-1x.jpg" alt="Example Image for Retina Displays">
</picture>
</body>
</html>
Code Explanation:
<source>: specifies different image sources with display conditions<img>: sets a default image for devices that don't support<picture>
6.5 Image Optimization Examples
Example 1: Responsive High-Resolution Image
Here's an example where an image is optimized for high-density screens using srcset and sizes attributes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image for Retina Displays</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Example Image for Retina Displays">
</body>
</html>
Code Explanation:
srcset: specifies three image versions for different pixel densities (1x,2x,3x)-
sizes: sets the image width for different display conditions:- Up to
600px— the image takes up100%of the viewport width - Up to
1200px— the image takes up50%of the viewport width - In all other cases — the image takes up
33%of the viewport width
- Up to
Example 2: Using SVG for Scalable Images
Here's an example using SVG to ensure quality display across any device:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using SVG for Retina Displays</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Code Explanation:
src="images/logo.svg": specifies the path to the SVG file, which will scale to any size without losing quality
GO TO FULL VERSION