Can't seem to get this to work. Currently only the full-size img (soho-w920h665) loads.
What I'm trying to do: the img spans 100vw until window width is 766px or bigger, then the img spans only 50vw.
<img
srcset="/img/soho-w500h361.jpg 500,
/img/soho-w700h605.jpg 700,
/img/soho-w920h665.jpg 920"
sizes="(min-width : 766px) 50vw,
data-src="/img/soho-w920h665.jpg
">
Make sure you're using the right syntax for it, src attribute seems to be missing for now. An example of correct syntax would be -
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w,
clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw">
so double check your data-src attribute. Look into MDN documentation for better insight here - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
Related
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 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">
Since I've implemented Google AMP I am struggling with this problem. Every time I add an image with a width far smaller than my website width, amp-img automatically add margins to keep the aspect ratio, like this:
I have tried other layouts mentioned in the [official documentation],(https://www.ampproject.org/docs/guides/responsive/control_layout#supported-values-for-the-layout-attribute) like flex-item.
With flex-item for example, I can get the desired behavior in the desktop version, that is, reducing the total margin of the image to look like this:
But in the mobile version, when an image is wider that the screen, the image overflows left and right.
Is there a way I can tweek the responsive layout in order to remove such larger margins when the image is relative small?
Investigating a bit in the code, the problem seems to be caused by the element i-amphtml-sizer, which is an element google-amp adds automatically and of which I have no control of.
I am not posting the url for my blog post in case it is considered spam, but if for some reason you need it, I'll update the question.
UPDATE
It seems more people are having this issue.
I solved it! reading amp documentation on github, in concrete the section on amp-html-layout, in "sizes" there is an example saying:
In the following example, if the viewport is wider than 320px, the image will be 320px wide, otherwise, it will be 100vw wide (100% of the viewport width).
<amp-img src="https://acme.org/image1.png"
width="400" height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw">
</amp-img>
Previously, my image was:
<figure>
<amp-img
on="tap:lightbox1"
role="button"
tabindex="0"
layout="responsive" src="/img/securitynow.jpg"
width="100"
height="100">
</amp-img>
</figure>
After reading AMP documentation:
<figure>
<amp-img
sizes="(min-width: 100px) 100px, 100vw"
on="tap:lightbox1"
role="button"
tabindex="0"
layout="responsive" src="/img/securitynow.jpg"
width="100"
height="100">
</amp-img>
</figure>
Now it is displaying well on all screen sizes:
In order to work with all kind of image sizes, I'm following this rule:
sizes="(min-width: withOfImage) WithOfImage, 100vw"
This way, when the screen is wider than the image width, the image will have its original width, otherwise the image will be 100% of the viewport width.
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 trying to get to grips with srcset but I am having trouble finding a detailed reference.
From what I understand I can do something like this to specify an image for a mobile phone.
<img src="1.jpg" alt=""
srcset="1x300.jpg 300w"
sizes="(max-width: 480px) 300px">
However I am unclear how I can specify to correct image for the display density.
In the above example at a screen width of less than 480px I have specified to use the 300px image. However on a 2x retina display I would want a 600px width image but the screen size will still read as 480px.
How do I specify another image for a different pixel density?
Basic structure for the IMG tag with SRCSET and SIZES,
<img src="images.jpg" srcset="images1x.jpg 200w, images2x.jpg 400w,
images8x.jpg 600w" sizes="(max-width: 40em) 100vw, 50vw" alt="Some Text">
Reference