Hello! I write this for any future people that encounter this issue (but also for future me, once I forget I wrote this).
Here’s a common issue: your beautiful CMS images look great in Preview, but then you publish your website and witness the horror: some of the images are tiny! Not all of them, just some of them.
This can happen at any time, and it sometimes only affects some or most images, not all of them. Even if they’re the same class and are in the grid/div/container, in the same page and have the same dimensions and have roughly the same file size. It’s a bit infuriating, and I don’t blame you for banging your head on the wall in anger.
Solution #1: In my experience, republishing your website over and over again can make it go away. Or giving it a couple of hours, have some coffee, watch a movie, come back, republish, and then it might go away. Why is this a solution? I don’t know, but I’ve done it before it worked.
Solution #2: Sometimes, it persists. A quick Google search yields several people with the same issue over the years, and the usual solution is to simply set an image width to 100%. In most cases, this is the fix for you. But for some of us, it can break things even more.
In my case, I have an image class that governs all images in a CMS collection. These images vary in dimensions a lot. Some are square, some are very wide, and some are very tall. This class has two size constraints: Max height of 96VH, and a max width of 95%. This ensures that no matter what dimensions the image has, and what size your monitor is, it takes up the most amount of space on screen without it messing up the website layout and most importantly, without stretching any of the images.
Solution #3: This is the nuclear option, but surely there are other more creative solutions out there. This all happens because of a feature Webflow introduced a couple of years ago called responsive images. It’s a great feature, but it has known bugs that aren’t your fault. The two most unfortunately popular bugs being random blurry images, and the dreaded tiny images. So what you can do is cut out the middle-man and go straight to the source. We’re going to kill responsive images. Not all the way, just for the class that’s giving you trouble. Just press CMD + SHIFT + O, or CTRL + SHIFT + O depending on your favorite OS. This turns on the toggle for responsive images. Press on an image that belongs to the class you want to fix, and uncheck the responsive image box. Publish.
Why does this happen? I certainly don’t know, but I have a hunch. This is how Webflow’s responsive images feature works. My hunch is that problems can happen if this system doesn’t clearly know which scaled image to serve.
E.G. your image class doesn’t have a defined width, so the code defaults the smallest possible scale to make loading faster. Or maybe your high DPI display uses a virtual resolution, and your image is the right size, but it’s blurry.
Solution #4 ish: The best thing you can do, regardless if you’re using Webflow, a different builder, or coding on your own, is to simply optimize your images beforehand. In my case, my rule is to never have an image file bigger than 350KB, even if it’s taking up the whole screen on an iMac. In most cases, images don’t take up the whole screen. Is it just some exec’s portrait next to a paragraph? Go ahead and make that sucker less than 100KB.
JPG compression in Photoshop and other software is really good and Webflow already has great resources to learn all about it. Is it more work? Yeah, but you can really save your own butt when you run into issues like these.