Recommended image sizes for different breakpoints?

Does anyone have any guidelines, suggestions, or best practices for sizing images to accommodate the different breakpoints/device screen sizes? I’d imagine it would be best for layout, performance, and download times etc.


Hi @dmisconish,

Do you mean the dimensions of the image? because the nature in which webflow content cascades from desktop down devises lends itself to keeping the images the same. If you want to change every image on each device and set them to only be visible on that device I would say it depends on the size of the image itself in the site, because for a hero image that has to be larger than an image in a grid for example. For hero images the guide I always use is making the width of the image equal to the width of the greatest possible width for that breakpoint if that makes sense…

Let me know if you need any more help,


I would actually be interested in this also. I am trying to use an image as background, but it keeps cutting the image off when it’s tablet or below.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.