Hey I’m here on this thread because I want to disable the Webflow optimisation as I have a client that is not liking the difference with the photo quality when comparing with the old wix site and the new Webflow site, they’re using the same images and wix optimises the images as well, but they look clearer and crisper on wix. This is cause a problem for this project and not sure how to get around it. By the way I have made the images bg images and it didn’t seem to do anything different. Any ideas?
hi @Mark_Joncheff if you search on internet you will find article about Responsive images in Webflow with all informations you requested including how are images processed and what technology is used.
Is hard to give an opinion on images where there is no link to original and Webflow site to compare quality. The best will be to add details what and where the problem is (corresponding to clients complain).
If you are programmer you can use tools like Multer and Jimp to optimise and resize images as middleware but these are more useful when you do site from scratch.
I personally didn’t find any problems in WF images quality but I also didn’t use any other no-code platforms that WF.
Just jumping in for anyone that finds this link.
One potentially surprising thing to keep in mind that if you have a 2000px image in a 6 column grid, displaying them at only ~100px thumbnails, Webflow is still serving them as the full resolution on desktop. It’s only serving smaller ones based on screen resolution, NOT the size you’re showing them on the page. (Which is very, very unfortunate.)
So - image optimization before the images get to Webflow is still essential.
I’ve done extensive testing on a lot of compression apps (using Photoshop ‘difference’ technique to see what they’re really doing and how much they’re changing the images.)
Here are some findings:
Tinypng is insanely great, and a must, for pngs, even with soft transparency. We’re talking 70% to 80% or more size savings. I use it on ALL pngs uploaded to Webflow. (see tinpng4Mac desktop app below)
Tinypng is great for jpgs as well, but really aggressive. It REALLY shrinks jpgs, but does mess with the quality a bit. For most images on most sites it would be fine.
I’m a perfectionist, so I’ve been on the hunt for a more visually lossless compression, without having to slide a quality slider and preview each and every image via photoshop etc…
I think I’ve found it with jpgMini pro - which claims to use AI to analyze the image and deliver the best compression possible without visual loss. I was suspicious, but it does seem to handle anything I throw at it, and results in smaller file sizes than Photoshop exports of the same visual quality. It also does appear to analyze the file because of the varying compression results per files in my tests. What I’ve found is you CAN get roughly the same file size and quality straight out of photoshop, but you have to mess with the sliders for each image, which takes a while. So the benefit of jpgMini is mostly time and convenience.
Tldr: Tinypng results in much smaller jpgs, but quality is lost. jpgMini results in slightly larger files - but they appear almost visually lossless each time.
So my current go-to is: Adobe Bridge for organizing, batch renaming + adding metadata/copyright, Then compression: for all pngs: tinypng. For normal jpg images - tinypng. For all jpg images in a portfolio, or ones you want the highest quality: jpgMini.
Tinypng is free, jpgmini has a free trial.
For tinypng, I use the desktop app tinyPNG4Mac - it has a perfect drag and drop simplicity without having to upload/download etc. You just drag a bunch of files on it, and it simply overwrites the files you drag into it.
jpgMini works the same - just drag a bunch in and it optimizes each jpg individually. I usually get about a 40 to 60% reduction with very little to no visual quality loss (It’s not ‘lossless’, even tho they suggest that it is. But when comparing via the Photoshop ‘difference’ mode, there is some loss, but it is super close to visually lossless.)
This was a long journey of testing to get to a simple, yet fast solution, so I hope this helps others who find this thread.
4 Likes
Also Bumping on this here. Man, This looks great so far. So it would work by dragging my images and putting into their app and it will be compressed and uploaded to webflow directly? Need to test out.
There is an app which I also shared for other an pagespeed optimization that automatically compresses all images and in this app there exists in the highest plan the new webp format (which I need to research more about it if it really saves more image sizes overall) http://stacket.app
Jayse, just to be clear on that, Webflow has not skipped any corners on that bit. With the [possible] exception of mobile delivery, there’s very little that Webflow can do to improve which image the browser requests. Webflow’s job is mostly just to prepare and host the image size variants.
You can imagine too if Webflow got aggressive about image compression, you’d have some very fast sites, but very unhappy designers staring at blurry logos and hero images.
If there were anything Webflow could offer, it would be some tie in with image compression services so that at the point of upload, you could get some intelligent recommendations and tools to manage your assets, with before-and-after compression views. This would be particularly helpful for the client-facing editor.
I’d imagine quite a bit could be done to improve the image sizes delivered to mobile phones, but again, that optimization can’t really be done in a 100% automated way that will make customers happy. It would at least have to be a site-level setting, or CMS-field-level-setting, where the designer could choose the optimization behavior.
I’m really enjoying the tool recommendations- digging through them now.
Mark if they are background images, then Webflow is likely delivering the exact image you’ve uploaded. The resizing then would be done by the web browser- and it would optimize for rendering speed, not image quality.
Your best best is to avoid background images as much as possible so that you can pre-optimize the images.
If you wanted to manually size your images to e.g. desktop, tablet, mobile-landscape, mobile-portrait, you could possibly apply each image at different breakpoints a well, hiding and showing different versions. A bunch of extra work but you’d get more precise control over which is shown on which screen sizes.
This is all good, but there are cases where the images need to look super crisp, so there should be a way to disable the automatic compression. Like in my case, I have images of icons, and they need to avoid any sub-pixel rendering, so whenever I upload those images on my Webflow website, they get blurred. Very sad about this.
hi @Zlate using icons in png format that is pixel based is very old method that no one is using these days as you will need several sizes (1x, 2x 4x …) to keep these crisp and serve proper size based on resolution. That’s is why eg. icons on desktop looks fine but on mobile are blurred (pixelated) It is too much hassle maintain it and it is not future proof method as resolution is getting higher every year. The easiest way and most common use these days is to have icons in SVG format.
That‘s true. But I was asking how to force Webflow not to optimize my preview images from the icons, so the preview images look super-crisp.
As for the very icons, of course, I have them as vector.
But I think I solved it. By not ticking the HDPI option for images, Webflow doesn‘t optimize them. Here is the WIP website.
I read on Optily that native image optimization is coming to Webflow. Not sure when, but hopefully soon as Optily has ended their updates/services in Q1 2023.
Hey Martijin, I have an Airtable extension that works with Webflow CMS exports. It is super simple to remap on import. Take a look here! https://twitter.com/digitalshane_/status/1679896517069488128?s=20