I am trying to load responsive images and things seem to be working in the latest version of firefox. However, my images are not loading as intended in Safari and Chrome.
<img
src="/images/pages/arrivals/02_exterior_1000.jpg"
srcset="/images/pages/arrivals/02_exterior_400.jpg 400w,
/images/pages/arrivals/02_exterior_600.jpg 600w,
/images/pages/arrivals/02_exterior_800.jpg 800w,
/images/pages/arrivals/02_exterior_1000.jpg 1000w"
alt="Blank"
/>
The goal is to have each of these images load on their respective screen. 02_exterior_400.jpg should load on screens less than 400px. 02_exterior_600.jpg loads on screens less than 600px, etc. Each of these images should be taking up 100vw.
On Chrome (see below) my page is at 386px but it's loading the 800px image and I want it to load the 400px:
Same issue on Safari. What am I doing incorrectly?
Edit: Chrome/Safari seem to be doubling my screen width when deciding which image to load. For example: if my screen is at 350px the browser is interpreting it at as 700px and then loading 02_exterior_800.jpg.
Any help appreciated,
thanks
You may be missing the "sizes" attribute. Also, put the regular "src" attribute after the "srcset" attribute. This is used as a fallback if the first srcset is either not supported, or the images are not found.
<img srcset="/images/pages/arrivals/02_exterior_400.jpg 400w,
/images/pages/arrivals/02_exterior_600.jpg 600w,
/images/pages/arrivals/02_exterior_800.jpg 800w,
/images/pages/arrivals/02_exterior_1000.jpg 1000w"
sizes="(max-width: 400px) 400px,
(max-width: 600px) 600px,
(max-width: 800px) 800px,
1000px"
src="/images/pages/arrivals/02_exterior_1000.jpg" alt="A Sense of Arrival">
Related
Is the img attribute srcSet supported perfectly by Chrome or Firefox?
I have tried to test srcSet, but I found Chrome and Firefox will show different image under the same conditions.
<img
src="./0.png"
srcSet="./1.png 100w,
./2.png 359w,
./3.png 600w"
sizes="(max-width: 576px) 100px,
(max-width: 768px) 359px,
600px"
alt=""
/>
I tried to resize from small to big width.
Chrome
It will show 1.png when width is smaller than 576px.
After width is more than 576px, it skipped 2.png and directly displayed 3.png.
Why?
Firefox
It will show 2.png when width is smaller than 576px.
After width is more than 576px, it directly show 3.png.
1.png is not displayed anymore.
Why?
I have setup the following img srcset:
<img srcset="http://via.placeholder.com/320x150 320w,
http://via.placeholder.com/480x150 480w,
http://via.placeholder.com/800x150 800w"
src="http://via.placeholder.com/800x150"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
width="200" />
No matter how I set the width of the img, or how I resize the window, chrome always downloads and displays the 800px wide image. What gives? Adding sizes attribute also has no effect. I referenced this article.
Demo here: http://jsfiddle.net/7ek62m13/1/
You are using srcset the correct way. Srcset is for when you have big images and you have smaller formats on smaller devices. If you load the biggest image there is no need to load another smaller image (cause a srcset is meant for the same image). This results in when you open this code on your phone it will display the smallest image, but when you are on desktop it will open the regular image. If you upscale your browser again srcset will replace your image with a bigger image but it will never swap back to a lower image. I hope I made it a bit clearer.
I have the following
<img
src="/img/footer/logo_white.png?v=2.0"
srcset="/img/footer/logo_white.png?v=2.0 1x,
/img/footer/logo_white2x.png?v=2.0 2x"
>
which works fine on normal and hiDPI screens.
But when the viewport's very small (below 400px) the logo doesn't fit therefore I need a smaller version of the image in terms of real length, which I created. Then I tried
<img
class="biw-logo"
sizes="(max-width: 390px) 110px, 175px"
src="/img/footer/biw_logo.png?v=2.0"
srcset="/img/footer/biw_logo_small.png?v=2.0 110w,
/img/footer/biw_logo.png?v=2.0 175w,
/img/footer/biw_logo2x.png?v=2.0 350w"
>
Which works in terms of showing the _small image for viewports lower than 390 pixels - but now I've lost the "high resolution" factor; I cannot force the iOS browser in iphone5s to display a 220px image in length of 110px with the above syntax.
Could you correct my syntax?
<img class="biw-logo" sizes="(max-width: 390px) 110px, 175px" src="http://placehold.it/175x75" srcset="http://placehold.it/110x50 110w,
http://placehold.it/175x75 175w, http://placehold.it/350x150 350w">
You can do that with srcset and sizes. At first tell the browser which images you have available and how many pixels wide these images are, this can be done with srcset:
<img srcset="
/img/footer/logo_white.png?v=2.0 300w,
/img/footer/logo_white2x.png?v=2.0 600w,
/img/footer/logo_white_small.png?v=2.0 150w
">
Now the browser knows it can select from three images that are 150, 300 and 600 pixels wide (I guessed the dimensions, your actual widths might be different).
Second, you tell the browser how large the image will be displayed in the webpage, this can be achieved with sizes:
<img
sizes="(max-width: 400px) 150px, 300px"
srcset="..."
>
The browser knows now, that if the width of the viewport is 400px or less the image will be displayed 150px wide, for viewports larger than 400px it is displayed 300px wide.
This is enough information for the browser to select the right image. On a normal desktop with a normal screen it will select the 300w-image and on a HiDPI desktop it will be the 600w one. On a small viewport with a normal screen the 150w will get selected and on a small viewport with HiDPI the 300w one.
If you want more information about srcset and sizes, take a look at http://ericportis.com/posts/2014/srcset-sizes/.
You also can try using a couple more sources like that:
<picture>
<source srcset="img.png" media="(resolution: 150dpi)" type="image/png" />
<source srcset="img2x.png" media="(resolution: 300dpi)" type="image/png" />
<img src="img.png" alt="alt text" />
</picture>
Or something like that - i didn't test it, i need to learn more about resolution media query to be sure.
I've got a problem with uderstanding why html5 img attribute doesn't work corectly?
In this chunk I set srcset, and when I have screen width 320px, i gonna get image-xs.jpg, but browser shows image-md.jpg and I think it because of loads to images. Is it a bug or I don't understand something? Explain please and won't tell about tag picture and img inside, I wonder, why specifically img works so?
<img
sizes="(min-width: 700px) 80vw, 100vw"
srcset="img/image-xs.jpg 375w,
img/image-sm.jpg 480w,
img/image-md.jpg 768w"
alt="City">
I am currently trying to make better responsive images on my site. After some research I found the the srcset and sizes attributes.
My goal here is the following:
When the screen size is above 600px or below 300px I want to serve a 250x250 image
When it is between these two values I want to serve a 350x350 image
Also I want higher resolution images for screens which have a higher pixel ratio
This is what I came up with. But it is not working as I though it would. The small 250x250 is always being served.
<img src="https://placehold.it/250"
srcset="https://placehold.it/700 700w, https://placehold.it/500 500w, https://placehold.it/350 350w, https://placehold.it/250 250w"
sizes="((max-width: 600px) and (min-width: 300px) and (min-resolution: 2)) 350px, (min-resolution: 2) 250px, ((max-width: 600px) and (min-width: 300px)) 350px, 250px" />
And I have one additional question:
In my tests I found out that the browser won't load new images when the window is resized so that a different image should be served. Is it possible to do that?
Ok. After some tidious research I found out that I did not understand the sizes-attribute correctly.
The following is how I can achieve what I want:
<img src="https://placehold.it/250"
srcset="https://placehold.it/700 700w, https://placehold.it/500 500w, https://placehold.it/350 350w, https://placehold.it/250 250w"
sizes="(max-width: 600px) calc(100vw - 50px), 250px" />