Is there a solution for responsive images available in Webflow, e.g. 3 different images size that can be provided?
I would think the best way is to put the image inside a block, and then make the image 100% width.
For responsive, then you just need to resize the block.
Would that work?
Is your intention to make the images load faster for different devices or so that visually the image will appear fluid on all devices as @asssmidt is suggesting?
some frameworks offer a way to define pictures for the different screen sizes, e.g. http://foundation.zurb.com/docs/components/interchange.html.
What would be interesting for Webflow:
- I was thinking of automatically generating it: a user only would upload the image for the desktop and Webflow will render images for the different screen sizes (tablet and phone).
- Another way would be that the user can upload own images for the screen sizes.
We’re planning on using this method.
I started a whole new thread with related image optimization ideas until your relevancy engine led me here.
If you combined this (or some RESS solution) with some back end processing to automate two of the services (Sprites/TinyPNG) that @bartekkustra pointed to in [Optimization] Tips and tricks, it could be an unbeatable combo:
Wouldn’t it be awesome if all the images in a site or page were automatically turned into a sprite sheet, and then post-processed with the excellent TinyPNG algorithm? With one sheet per breakpoint served up in this manner, you’d have made screaming image performance a seamless UX no-brainer.
A checkbox option to not include an image in the sprite sheet might be useful if a site or page was particularly graphic intensive, so hero images at the top could load with priority over the sprites.
But then we would rule the world with all that power.
Thanks for the great suggestions @ramatsu! There’s a lot of different options on the table and this was one of them from the beginning. Though It’s technically challenging when considering different pages and images on those pages. There would also have to be many custom options for compression (as these kinds of things are subjective to each designer).
I can only imagine the challenges!
FWIW, from this user’s perspective, just using the TinyPNG api would be an awesome MVP approach and I suspect satisfy 80% of needs of 80% of users for compression. (Frictionless-almost-perfect beats convoluted-workflow-perfect every time in my book.)
Behind the scenes, it seems like page granularity would be ideal for the sprite sheets. I don’t have enough experience with sprites to know whether the performance impact would really justify the development effort on that one, but it felt like there might be some “there” there.
PS- Thanks go out to @bartekkustra for pointing out those resources. I went through a site that was using some larger 24bit pngs (where 8 bit wouldn’t work due to edge jaggies) and slimmed down each image by almost 70%, making them much more production-ready!
I know @thesergie said there are plans for this on Webflows roadmap. Until then however, what is a simple way to achieve what the initial poster @silviamkoch is looking for? That is the performance advantages, not just the visual fluidity.
I was planning on uploading 3 different sizes of the one image and then customising the visibility of the each in their settings so that I show one on desktop only and not the other sizes, one on tablet only and not the other sizes, one on mobile only and not the other sizes. Does this sound like an acceptable solution? Would it effectively achieve the same performance benefits as if webflow did it automatically as was suggested they plan on?
I’ve tried this… it does work as a temporary solution.
However… ( I don’t know for certain )
- all 3 images still seem to load… but are displayed based on your media query.
If this is true… then it’s actually hurting you (somewhat) to use this method.
Does anyone know
- if you define multiple images ( for different media queries)
- are all the images loaded regardless of media query ?
@Revolution Here’s a great summary of different techniques: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
thanks @thesergie . I agree. This was a good read.
I would recommend other reading this as well.
thanks @thesergie. So @Revolution, what did you go for in the end? I tried using the approach suggested in that article of a div with a background image and then hiding the parent element. But with my basic knowledge, I can’t really figure out how to do this elegantly. I don’t know how to set the div height and width in a way that doesn’t crop the photo at different screen sizes. There’s no way for a div’s height and width to be set by the background image i presume?..
Hi, what is new about asset integration?
Sorry I am super confused with dealing with responsive images. I read in other post that if we set the image to percentage and not pixels, the images would be responsive… But it didn’t work for me…
My images are in a slider, even if I have adjusted the slider size, the images are not responsive… So what do you need to do? Do I need to crop every image for tablet and mobile? But would that overwrite the original desktop image?
can someone from the webflow team speak on where we are with truly responsive images? meaning images that are truly optimized for mobile? right now, having to hide images is really not a great solution considering the point of having images that load for various devices is so that we do not eat up the user’s bandwidth. hiding a larger image that still loads on the user’s device is pointless. ideas? thoughts? am i missing something?
We’ll be tackling responsive images with our Asset Manager work that’s planned for the early part of this year.
awesome! thanks for the response!
Agreed, automatic image rendering responsively would be incredible. Squarespace has had this functionality almost from day one. I never realized how much an overlooked feature is so valuable until I didn’t have it.
Webflow continues to amaze me almost every single day and I’m so excited for what the future holds. But please please please make this a priority.