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:
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?
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.