CSS

Last Updated: 11/14/2022

Responsive Images

  • Today you have lot of high-density screens with more pixels.
  • Devices like mobile, tablet and laptop have different screen resolutions and scale factor

Device Properties

  • Physical Resolution: based on the actual number of pixels on the device
  • Logical Resolution: CSS based on logical resolution
  • Device Pixel Ratio (DPR)/Scale Factor = Physical Resolution/Logical Resolution or PPI/150 approx

https://www.ios-resolution.com/

IPhone 3G

Physical Resolution: 320 x 480 Logical Resolution: 320 x 480 DPR/Scale Factor: 1 Screen Diagonal: 3.5 inch PPI: 163

IPhone 4

Physical Resolution: 640 x 960 Logical Resolution: 320 x 480 DPR/Scale Factor: 2 Screen Diagonal: 3.5 inch PPI: 326

Dell Laptop 15 inch

https://yesviz.com/mydevice.php Laptop Physical Resolution - 1920 x 1080 Logical Resolution - 1536 x 864 (Press Full Screen in Browser - Full Viewport)

body {
	margin: 0px;
	width: 100vw;
	height: 100vh;
}

Visible Area - 1519 x 746 varies based on toolbar/sidebar in the browser

body {
	margin: 0px;
    height: 100vh;
}

DPR - 1.25

srcset

Fixed Size Image (Raster)

Problem

  • Fixed size image when viewed on high density screens will be scaled/resized based on scale factor and it will look blurry Width: 320 x 213 DPR 1 - Standard DPR/Scale Factor 2 - image resized to 640 x 426 DPR/Scale Factor 3 - image resized to 960 x 639

Fix

Create image for different scale factors like flower.jpg flower@2x.jpg (640 x 426) flower@3x.jpg (960 x 639)

  • Using the srcset attributes, you can provide high quality versions of your image for high density screens.
  • Use this technique for homepage with images that should look very sharp
img {
	width: 320px;
}

<img src="images/flower.jpg" srcset="images/flower.jpg 1x, images/flower@2x.jpg 2x, images/flower@3x.jpg 3x">

Relative Size Image

Problem

  • Relative size image (100vw) when viewed on different screens resolutions with same scale factor will be resized and it will look blurry

IPhone 11 - Physical Resolution: 828 x 1792, Scale Factor: 2 IPad Air (3 Gen) - Physical Resolution: 1668 x 2224, Scale Factor: 2

Fix

  • You want to provide different versions of this image for different screen sizes or different resolutions.
  • Provide three different sizes like small, medium, and large and let the browser pick up the best image based on the screen resolution and the pixel ratio of the device.

Create image flower-small.jpg flower-medium.jpg flower-large.jpg

img {
	width: 100vw;
}

<img  src="images/flower-small.jpg"  srcset="images/flower-small.jpg 320w, images/flower-medium.jpg 640w, images/flower-large.jpg 1280w">

w unit represents the actual width of this image.

sizes

  • Used to display different size of images on different resolution
<img  src="images/flower-small.jpg"  
	srcset="images/flower-small.jpg 320w, images/flower-medium.jpg 640w, images/flower-large.jpg 1280w"
	sizes="(max-width:425px) 100vw, (max-width:768px) 50vw, 33vw">

Generate Responsive Images

https://www.responsivebreakpoints.com/

picture

  • Use the picture elements if you want to support Internet Explorer, or any other browsers that don't support these modern formats.
  • Add an image element for two reasons. One reason is that this is where we're going to type the alternative text. The other reason is to support browsers that don't support the picture or the source elements.
  • WebP is modern image format
  • Use cloudconvert.com to convert image to webp
<picture>
    <source srcset="images/rose.webp" type="image/webp">
    <source srcset="images/rose.jpg" type="image/jpg">
    <img src="images/rose.jpg" alt="">
</picture>

References:

https://web.dev/high-dpi/

Previous