I'm trying to implement srcset this way
<img class="i-product-image-big"
srcset="http://dev.test:8000/uploads/thumbnail-80/1602202734The_Reptile_Room_by_Daniel_Handler.webp 80w,
http://dev.test:8000/uploads/thumbnail-160/1602202734The_Reptile_Room_by_Daniel_Handler.webp 160w,
http://dev.test:8000/uploads/thumbnail-320/1602202734The_Reptile_Room_by_Daniel_Handler.webp 320w,
http://dev.test:8000/uploads/thumbnail-640/1602202734The_Reptile_Room_by_Daniel_Handler.webp 640w,
http://dev.test:8000/uploads/thumbnail-960/1602202734The_Reptile_Room_by_Daniel_Handler.webp 960w,"
src="http://dev.test:8000/uploads/thumbnail-160/1602202734The_Reptile_Room_by_Daniel_Handler.webp"
alt="The Reptile Room by Daniel Handler">
I edited the code by adding sizes like this
<img class="i-product-image sidebar_image" loading="lazy"
sizes=" (min-width 200px) 320px, (min-width 576px) 80px, (min-width 768px) 160px, 100vw"
srcset="http://dev.test:8000/uploads/thumbnail-960/1586515257Little_History_of_the_World.webp 960w
..........
I open the website in private window in responsive mode first to be sure that the browser didn't load the larger version but the problem is I find out that the browser picks the wrong version (size) of the image. Here it should pick the 320px (it's 322px including 1px border from each side and the image itself is 320px) version of the image but it picks the 640px version of the image. Why is that and how to fix it without using the picture tag?
I reduces the size of the image in css but still loading 640xp version
I reversed sizes like this
sizes=" (max-width 575px) 320px, (max-width 767px) 80px, (min-width 768px) 160px, 100vw"
But that didn't work either
OK, did some tests here (created some filler images to debug). Found what's causing your issue. Not being able to see your full HTML code, I could get the 320-pixel-width image to show in a bare-bones, hand-coded HTML page. When I add the standard viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1">, the 640-pixel-width image will display again, due to viewport scaling. If I were to post your code in a snippet here on SE, the same thing would happen.
Additionally, if I replace the 320_Image.png 320w, with 320_Image.png 2x, and 640_Image.png 1x,, the 320-pixel image will show, but the display will be broken when viewed in the desktop.
If all you’re trying to do is serve an image size that’s based on the viewport width, you’d be best served using 160_Image.png 160w, while for resolution switching, use this: 160_Image.png 1x. A comprehensive resource on responsive images on MDN describes this more fully. And, based on your preference not to use the <picture> element, this article is a good resource. The author recommends not using the <picture> element when all you want is to serve the appropriate image based on the users' device.
For a quick demo, I’ve modified the code a bit, and am using dummy images to show (not including fillers for all the images in the code). If viewed in desktop, the images will switch sizes based on viewport width. For mobile, they will switch based on device width. I only added the CSS to set the image to full-width debugging, but the images with switch without this code.
img {
max-width: 100%;
width: 100%;
}
<img class="i-product-image-big" srcset="80_Image.png 80w,
160_Image.png 160w,
https://i.stack.imgur.com/JkhiN.png 320w,
https://i.stack.imgur.com/Lwddt.png 640w,
https://i.stack.imgur.com/8Z9jL.jpg 960w" sizes="(max-width: 575px) 320px, (max-width: 767px) 640px, (min-width: 768px) 960px, 100vw" src="https://i.stack.imgur.com/8Z9jL.jpg" alt="Test Responsive Image">
Have I misunderstood the img srcset tag if I say that I'd like to specify to the browser what image to show when the screen is max-size: 599px (mobile) and when it's above that?
<img
srcset="
small.jpg 600w,
big.jpg 2000w"
sizes="
(max-width: 599px) 600w,
2000w"
src="big.jpg" alt="Some text" />
This code doesn't behave at all how I'd expect it to. I'd like the browser to show the small image when it's a mobile screen, and show the large one for every other device resolution. Is there no way to do this simply? So confusing.
I've read articles on SitePoint, Smashing Mag, etc, and none of them explains it simply as above. They go into image widths, viewports, ratios, etc. All I need is to specify in a media-query screen resolution style which image to show at which resolution.
Many thanks.
In my sublayout I'm trying to render image
HTML:
<sc:Image runat="server" ID="fldImage" Height="75px" Width="98px" />
CS code has following line to fill the image,
sitecoreImage.Field = SitecoreUtility.SITECORE_FIELD_LIST_IMAGE;
sitecoreImage.Item = sitecoreItem;
Image is getting Rendered with the black border on top and bottom.
while debug I see the Image URL like
/~/media/Images/image-thumb.jpg?as=1&h=75&la=en&w=98&hash=920D0F90FR9BE29A9DC4131BAF1C5CD6BEA96F3B
When try to request just the image with the following URL
http://domain/~/media/Images/image-thumb.jpg?as=1&h=75&la=en&w=98&hash=920D0F90FR9BE29A9DC4131BAF1C5CD6BEA96F3B
I see the image with the border.
But when I strip that hash=920D0F90FR9BE29A9DC4131BAF1C5CD6BEA96F3B from the url
http://domain/~/media/Images/image-thumb.jpg?as=1&h=75&la=en&w=98
I see the image is rendered without the black lines.
Why we are seeing the image with the black border in top and bottom?
Appreciate your help.
Your are requesting the image with a width and height which is probably not the original causing Sitecore to adjust the image to your request. As it will preserve the aspect ratio, it is possible that a background color is added to do so. The default background color used is black, that is why you are seeing this. You can change the color with the Media.DefaultImageBackgroundColor setting.
Once you remove the hash, Sitecore will no longer make the adjustments as the url has been tampered with. I assume that the width and height of your image is also different then (the actual size, not what you see on screen).
I'd like to add an image to the web page down the y-axis. This image would need to repeat, so I thought a background image would work best. As you'd expect I'm having trouble telling the CSS how tall the page is, especially with dynamic content from WordPress.
<div class="overlaid-image"></div>
<section class="green">Section content</section>
<section class="red">Section content</section>
<section class="blue">Section content</section>
I put together a fiddle to help explain: http://jsfiddle.net/15wc2noe/
Currently, unless I give the DIV a specific height, it won't travel down the full length of the page.
The goal is to get the repeating image to follow down the y-axis of the page to the bottom, without hard coding the height.
I have added an open graph image to my site but in the news feed it is not scaled correctly. The image is clipped both at the top and at the bottom. The image itself is a png with the size of 1500x1500px.
Looking at my profile page where the image is placed to the left of the text it scales correctly.
I have specified the following meta tags: og:title, og:type, og:image, og:url, and og:description.
I use the ShareThis API for the actual share button (if that can have anything to do with this).
Has anyone had this problem as well?