This is a nice technique with great results! It looks like a lot of work. Do you know any good tools to help you quickly generate each version of the image and perhaps generate the CSS media queries for each one? Thanks for the interesting post.
Thanks Stephen!
Yes. There is one tool I know of -- Responsive Image Breakpoints Generator. I love this tool for generating sets of one-offs in a pinch.
Unfortunately, I haven't got it to work like in the demo above. Here's an example.
Another thing I still have to do is go back and optimise the images from the generator. It spits out lots of images ;-)
Let me know if you get it to work or if you find something better!
enjoy :-)
P.s. The generator uses the cool HTML5 picture element. However, I generally work with background hero images.
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
This is a nice technique with great results! It looks like a lot of work. Do you know any good tools to help you quickly generate each version of the image and perhaps generate the CSS media queries for each one? Thanks for the interesting post.
Thanks Stephen!
Yes. There is one tool I know of -- Responsive Image Breakpoints Generator. I love this tool for generating sets of one-offs in a pinch.
Unfortunately, I haven't got it to work like in the demo above. Here's an example.
Another thing I still have to do is go back and optimise the images from the generator. It spits out lots of images ;-)
Let me know if you get it to work or if you find something better!
enjoy :-)
P.s. The generator uses the cool HTML5 picture element. However, I generally work with background hero images.