Responsive image, srcset and sizes

1
votes

I'm starting to use responsive image and I have a small doubt.

I have an icon. This icon on my website has always two sizes: a small version, 74 pixel wide and a large versione, 94 pixel wide. 

<img alt="Sezione Gino" style="background-color: #dd0505" srcset="https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=1&amp;q=75 1x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=2&amp;q=50 2x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=3&amp;q=35 3x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=4&amp;q=23 4x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=5&amp;q=20 5x" sizes="94px" src="https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress">

I created using imgix this srcset for the large icon. I check the images and they are resized in the right way, the 1x is the 94pixel wide, the 2x is 188 pixel wide.

I fixed the sizes of 94 because in the large version the image is always 94px.

Now my question: for the 74 pixel version, so the small icona, I have to recreate the set using 74px for size?

1
htmlresponsive-designimgix

1 Answers

2
votes

Yes, you would have to recreate the set.

If they're the same icon, you could just copy and paste and replace w=94 with w=74, though you may also have to adjust the height so the image isn't distorted.