2

I am trying to working with srcset to create a responsive image for my website, the idea is that I have a few breakpoints, 320, 768, 1024, 1280 and for each break point I display an appropriate resolution image, so for a breakpoint between 320-768 I would show the 768 image.

I have tried the following, 

    <img src="http://abc.dev/wp-content/uploads/2017/05/abc-320x187.jpg"  
     srcset="http://abc.dev/wp-content/uploads/2017/05/abc-768x450.jpg 480w,  
     http://abc.dev/wp-content/uploads/2017/05/abc-992x581.jpg 768w, 
     http://abc.dev/wp-content/uploads/2017/05/abc-1200x703.jpg 992w,
     http://abc.dev/wp-content/uploads/2017/05/abc-1500x878.jpg 1200w,
   http://abc.dev/wp-content/uploads/2017/05/abc-1800x1054.jpg 1500w,  
   http://abc.dev/wp-content/uploads/2017/05/abc-1920x1124.jpg 1700w"   alt="">

What ever my screen size I ways seem to get served the 1920x1124 image.

Can any one shed any light on what I am doing incorrectly?

Udders
  • 6,914
  • 24
  • 102
  • 194
  • Possible duplicate of [How to use srcset and sizes for responsive images](https://stackoverflow.com/questions/35099471/how-to-use-srcset-and-sizes-for-responsive-images) – Peyman Mohamadpour Jul 02 '19 at 07:31

2 Answers2

1

The usage of srcset in your code is incorrect, the sizes attribute is missing. According to the specification:

If the srcset attribute is present and has any image candidate strings using a width descriptor, the sizes attribute must also be present, and is a sizes attribute.

It seems there is an old design of srcset attribute. However, srcset syntax and usage has been changed to a completely new thing. To use srcset:

  1. sizes must be present to define the displayed area of image. For example, sizes="(min-width: 600px) 200px, 50vw" means when the (min-width: 600px) media condition matches, the image will be 200px wide, otherwise it will be 50vw wide (50% of the viewport width). This is an example from MDN.
  2. For srcset attribute, 480w, 1200w etc in the value means the width of corresponding image file, not the width of viewport.
  3. After the displayed area (width) of image is calculated (step-1), and the candidates images' file width is defined (step-2), browser will use this information to calculate pixel ratio for all images -- width_of_image_file / displayed_area_width
  4. Then, the browser can choose any of the given resources depending on the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.
shaochuancs
  • 15,342
  • 3
  • 54
  • 62
0

Auto IMG Responsive CSS

img{max-width:100%;height:auto}
moon93
  • 129
  • 3
  • 11