Webflow changing the colour of my images

I am getting a very weird issue where the colour of similar images is shifting from image to image in the live site.

These images are all using the same mock-up file and are processed, uploaded and implemented in exactly the same way. But when I check the live site: Blend Creative — some of the images shift colour.

Here are screenshots of the final files before uploading, in the designer then with the colour shifts in the live site:

Turning HiDPI on and off does nothing… Does anyone have any ideas?

Thanks,
Mark


Here is my site Read-Only: LINK

Ok, I think I’ve fixed this.

I initially exported all my landscape images at 2800px wide and had HiDPI ticked as the maximum width they would be displayed in the container is 1400px… but when I have two-up in the grid, the 1400px wide image gets compressed by Webflow where I was getting the colour shift made obvious by the neutral grey tones of these mockups when side-by-side.

I have now exported a 144dpi version of the half width (1386px @ 144dpi) and the colours appear to be as they are on file and in the designer.

This is certainly a bit of a mess around with my workflow though, especially if we decide to change from a grid to full width; requiring a 2800px image saved and uploaded.

Does anyone have any information on how Webflow compresses images uploaded that aren’t being displayed at 100% of their pixel size?

See this page (link takes you to the section that applies).

Great, thank you!

I think there’s just no way around exporting my own variants for the intended width if I use jpegs.

Do you think it would be better to use png for a more simple workflow as they have lossless compression?

When trying to display images with text a PNG is usually the preferred way to deliver the image. Issues arise when you have large images being loaded by the client. When images matter to me I use Cloudinary and take advantage of auto on format, thus serving optimized images based on what the browse supports, I also leverage their auto-dpi features. Image optimization is a deep well and generalization is not beneficial. I am available for consultation.

1 Like