I try to use an srcset attribute inside an image_tag but I can not make it work.
Im not sure if it is a syntax error or it generally does not work in an image_tag.
Is it possible to use a srcset attribute in an image_tag?
If yes, how?, and if not…
I'm in the process of trying to wrap my head around using srcset and sizes on img tags.
Whilst I think I have grasped the basics – mainly thanks to this article – I'm struggling in practical application of the sizes attribute.
In all the examples I…
I have two images, one is 1000 x 800 px ("large"), and one is 200 x 200 px ("small").
I want to use srcset / sizes / picturefill to display the small image when the screen is less than or equal to 500 CSS pixels wide, and the large image…
I can't seem to discern a difference in function or meaning between using the picture element or just using the img element with the srcset attribute. I understand how they work; I just don't fully understand why or when to choose one over the…
I understand that the srcset is used to determine which image to load based on the dpi of the device. I came across this example on the Google Web Fundamentals which seems to use the w unit along with the vw unit which just happens to be the 1 %…
I wanted to implement the responsive images using srcset, as described here, so the image src that the user loads is the most similar to his resolution.
The thing is that I made this test and it doesn't respond to viewport changes,
I'm trying to get my head around the new 'srcset' attribute of 'img'. I've built a simple test page, but the behavior I see from browsers is surprising.
First, here's the test page:
I have read through a number of articles on using srcset for both device-pixel-density adjustments as well as art direction:
The State of Responsive Images in 2015 by Paddi Macdonnell
srcset Part 2: The W descriptor and sizes attribute by Rich…
I have read about this problem quite often so far and it also occurs for my own projects. Here is an introduction of what I have found out so far about the srcset and the sizes attribte.
There are two different possibilities on how to use the…
After reading all day about one method or the other I am still not sure what is the best for me, all sites explain the same thing but when I want to know the things that really worries me, nobody talks about that.
My case: I have almost all my…
I'm using Bootstrap with Responsive Images. I want to optimize load times by offering multiple image sizes to browsers. According to this article, a plain approach with srcset like this is good for letting the browser pick the optimal image…
The user-agent selects one of the images below based on device pixel ratio and viewport size. But i have noticed that only when user-agent selects ./emmaHQbanner.jpg, the width of image displayed is not exactly 100vw instead its little more than…
Using the LazySizes plugin (https://github.com/aFarkas/lazysizes) I'm trying to build a grid of images, each with an alternate version for smaller viewports. The grid (container) is a simple column/row based percentage based layout.
I'm not quite…
I have a slideshow sort of thing where images will expand as large as they can, but not exceed the viewport's width or height. Basically object-fit: contain.
I'd like to make these images responsive, since "as large as they can" for a phone and a…