@Gertt has done some excellent work in getting the first responsive image support into a CMS that I’m aware of that works through Grav’s impressive image handling features: http://getgrav.org/blog/retina-responsive-images.
When the browser first parses this code, it wants to get started downloading the image file right away, even before it has composed the page layout and determined the actual width of the image on the page. All it knows at that point is the screen density and the viewport width.
So, if it’s running on a retina display with a viewport width of 1000px, it’s going to download the image2x.jpeg file. Even if it later finds out that the image is in a narrow column and ends up being displayed at 100px wide.
Grav defaults to using sizes="100vw" because it has nothing else to go on. Only the author working on that website knows how wide that image might be.
Can we/should we want to extend Grav even more by providing Markdown syntax that Grav understands that could be used by the author to define the sizes= to be used?
I think that having user configurable size attributes would be a worth addition to our responsive image handling. Definitely something we can discuss for a future release. Especially as retina style displays are getting more and more popular.
Wouldn’t this need 2 parameters for image size and screensize?
I might be misunderstanding but it seems like just specifying an image width you would need to add the image width as the browser width parameter as well. So an image resized to 300px would have a srcset width of 300w also?
But if you have an image that takes up 50% of the screen you would want to resize to 500px for a screen of 1000w (and not a 1000px image or specify a screen width of 500w)
@rhukster Done! @rwent There is no need for 2 paramaters. The widh and sizes option are independent of each other. If you change the width, Grav automatically calculate the needed srcset for your (presumed you have more than one image of the format image@n.jpg, where n is just a number). The sizes option instead tells your browser, which image of your srcset shall the browser load, i.e.
will load medium.jpg if the viewport is 700px having a width of 50% (if the viewport is 700px wide, than 700px > 28em and the first media condition is triggered. Since the image shall have a width of 50% (350px > 320vw) the browser loads medium.jpg).
Ok, so the sizes parameter specifies the browser breakpoints and the images are resized in multiples of the original?
image.jpg = 100px
image@2x.jpg = 200px
image@3x.jpg = 300px etc?
So if I added an image named image@6x.jpg grav would essentially do the rest and in future you would be able to modify the sized through a query?
I should really just have a play with it and see what happens
Hi @rwent, yeah the sizes option can be understood as a parameter to specify breakpoints. It generally tells the browser, which size should be used to select the image from the srcset.
To have responsie images in Grav you must have the image like ìmage.jpg and at least a file named image@1x.jpg. The width and heights can be very different e.g. ìmage.jpg could have a width of 500px, whereas image@1x.jpg could have a width of 700px. It depends on your choice.
What Grav then does is the following. It detects the alternatives (here: ìmage@1x.jpg) of ìmage.jpg and determines their sizes and automagically generates the srcset attribute (here “image.jpg 500w, ìmage@1x.jpg 700w”). Without the sizes attribute ìmage@1x.jpg will be shown only when the viewpoint is greater than 500px. With the sizes attribute you can modify the viewpoint width (which is by default the browser width). 100vw means full browser width. 50vw means half the browser width.
It is best to see an example and figure it out on your own. The sizes option is not available in Grav 0.9. 20, but it will be soon. For the moment you can play around using Gravs built-in support for responsive images and modify the page in your browser via Firebug or something similiar.
Perfect, thanks. I think I was getting confused thinking that grav was automatically creating the different copies of the images.
I need to get back into grav and take a look, unfortunately the day job tends to get in the way
I think Koken does something very similar to this but totally javascript based and I think it’s all automatic so there’s no control outside the theme
Actually Grav does automatically create any missing images. If you have one image called image@3x.jpg it will create @2x and @1x versions automatically.
You can however provide all the versions if you wish, but why bother when Grav can automatically do that for you.
That’s cool.
That’s why I was thinking about the params in the first place. How grav knows what size to make the other copies.
Anyway, I just need to spend a bit of time playing with it.
Keep up the good work!