Streaming live at 10am (PST)

Image Resize Problem - Attempting to Fix for 3 hours

I can’t get my images to re-size properly.

I have done everything this page says to do https://university.webflow.com/article/responsive-images

On mobile, the full size image is loading. How do I make smaller images load for smaller (mobile) pages.

Would anybody be able to point me in the right direction? Really appreciate any help.

https://www.projecthatch.co

https://preview.webflow.com/preview/project-hatch?utm_medium=preview_link&utm_source=dashboard&utm_content=project-hatch&preview=bb9e089ec4ba09ed6406573151996557&mode=preview

Actually the site is loading the 500px width images on mobile up on your home page. What are you expecting?

The images only need to be around 100px on mobile.

PageSpeed and GTmetrix are saying they are not being scaled at all.

How do you set webflow to resize them?

@nathan1 - Take a look at the test I created for some guidance.

http://responsive-tester-58a152.webflow.io/

Webflow is not going to create a 100px width image for you just for mobile. The system is working off of parameters. Which you can see in my demo. For more control you can use embeds and a cloud based image service (what I do).

Ahh I see, thank you for the additional info.

Frustrating how the sizes are mostly square - would make sense to have standard social dimensions. e.g. twitter card size

Will look into an image service, which do you recommend?

I have a couple of my own clusters of servers running now, but still use imgix.com and cloudinary.com. Both those two have different price models. Working with images on Webflow means HTML embeds and you handle the responsive logic. Both the two I mentioned do support using client side API’s which makes it somewhat easier.

I think you need to think about this a little more. A full width image on mobile (Webflow) would be up to 479px without HIDPR. So a 500px image works fine. If the screen was scaled down 320px then you might consider another image size (smaller than 500px) as a benefit. Except when I am on my retina or other HIDPR display which would appreciate a 2x or 3x size for quality. So then my browser would want to load a 1000px or 1500px image.

The tools you are using to evaluate performance are general use. They don’t take into account all the real world factors. I have worked on sites with millions of page loads a day. Since those clients are paying for bandwidth, I would strongly consider using and do create MANY breakpoint versions of images (every 10 pix for example, to reduce the bandwidth and server loads. That is a perfect fit for a cloud image service / CDN. Since you are not probably hitting those volumes and paying for the bandwidth I would not even bother with further optimization due to man hour expense creating /maintaining images and negligible ROI. Besides it throws using the designer for working with images out the window. Got a serious project that needs optimization and a budget, feel free to hit me up via a PM.

2 Likes