HTML Img Width/heigh Vs Srcset/sizes

Contents hide

Problem Description:

Recently, I am fighting with responsive images for my website. Usually, my policy for images is that they must not be larger than 450 pixel wide, but there could be images that are less than this size.

Initially, I used img tag with attribute width and height containing the actual image size. However, they don’t work fine in a Responsive world where there could be screen less than 450 pixels.

So I started to do some tests with this image. I don’t want to provide multiple version of this image to the browser (unless some specific exception), because they are not so wide. So I decided to use this code:

<img src="assets/img/software-developer.jpeg" alt="Some Stuff" srcset="assets/img/software-developer.jpeg 450w" sizes="(max-width: 449px) 75vw, (min-width: 450px) 450px"

This code works quite well because if screen size (tested with Chrome Developer Tools) is less than 450px the image is simply resized (75 vw), otherwise it is used as it is.

However, I also use Page Speed to have performance under control. Consider that I am moving my WordPress website from a Paid host to Jekyll on Gihub pages for two reasons:

costs (Paid Web Host vs Free Github Pages)
performance (very poor with WordPress considering that my content is 99% static)

Now if I test the page with Page Speed it tells me to specify width and height attributes. I think for Page Speed they are important because the browser calculate quickly the image dimension without download it and render the page without wait the download of all the images. However, width and height seems don’t fit well with today Responsive world.

So my question is: is it possible have both widht/height and srcset/sizes?

In the code I posted above I expected to use 100vw instead of 75 vw but my image were cropped. I think probably this was due to padding/margin? Am I correct?

Solution – 1

The " width & height" image attribute fixed the image’s dimensions this thing you can see in my code snippet. So it would help if you used CSS to style your photos to make them responsive (automatically scaleable on big and small screens.).

Try following the CSS code:

.my_img {
  width: 420px;
  max-width: 100%;
  height: auto;
}

<img src="https://images.pexels.com/photos/2453551/pexels-photo-2453551.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="leaf-image" width="200" height="300" />


<img src="https://images.pexels.com/photos/2453551/pexels-photo-2453551.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="leaf-image" class="my_img" />

Set class for the image.
Then set width whatever you want, after that set max-width: 100%; and height: auto; which will help the browser to increase and decrease the height of the image when the image needs to be scaled down on smaller than 420px screens.

Width property will set the image size to 420px when the screen size is bigger than 420px and the max-width: 100%; will make the image responsive, It means when the screen size will less than 420px your image will automatically be adjusted according to your screen with.

You can avoid scrset and width/height image attribute. Use CSS.

Rate this post