Finding Image Dimensions for Webflow Templates: A Quick Guide | Relume Community

Finding Image Dimensions for Webflow Templates: A Quick Guide

Newbie Alert! Maybe more of a general Webflow question but if anyone is willing to help I'd greatly appreciate it! After moving my Relume project to Webflow, I end up playing this trial and error game with images and dimensions. A hacky thing I've been doing with my clients is creating a Canva template for them so they don't play the same game or put poorly sized images on their site. So... is there an easy way to determine the dimensions of the placeholder image so that I can just copy that in my Canva template? The image below demonstrates an image I'd like to quickly determine the dimensions of. Thank you in advance!

3 comments

Matt J.
·
David B. yeah my guess is that the reason you are having to play that game is because you are trying to get exact dimensions, when its really just about having the right image, and the right aspect ratio. For that spot, I would make sure to have like a 400px by 250px image. I would avoid any text in images like this. If you have to have text in them, then I would be using different fit settings (screenshot) like contain or fill so that the text isn't being cut off. For other images where there's no specific content that you want to ensure is always shown, I would use cover, so that it always looks good no matter what. But yeah, I would stop trying to get exact dimensions of these placeholder images, and get approximates, and even slightly larger - especially for retina. Another reason not to try to get exact is that Webflow generates responsive versions of some images automatically - so if you did a 1200x800 pixel image for that spot, it'll generate 4 other actual sizes of that image, automatically, for the different breakpoints so that you are not loading a 1200 pixel image for a 480 pixel wide phone screen.
Matt J.
·
I actually dont know the science behind when Webflow generates the responsive versions of the images, because it doesn't appear to do it every time. My guess is that it can detect when an image is much larger than the area its confined to. So its not generally good practice to be creating 1200px images for cover thumbnails like that one. Probably the biggest I would go is 600px - well optimized/compressed.
🔥1
🙌1
❤️1
David B.
·
Thank you Matt J. !