Public share link below. Go to a “Projects Template” to see what I mean.
Images that are much more crisp on my computer are becoming visibly lossy after upload.
Here’s a screenshot that shows the comparison.
Can anyone help me here? Being a portfolio site I really need these images to be sharp. Thanks.
Here is my public share link: LINK
(how to access public share link)
I’ll add, it seems to only be happening to images uploaded to a collection.
Can anyone help me look into this? The compression is awful. I’m hoping there’s something I can do on my end to fix.
Hi @helmsmith, Webflow creates responsive image variants, but not yet for images added in a collection, meaning that the image uploaded to a collection, is not modified after upload.
Take a peek here to learn more about responsive images in Webflow: Responsive images in Webflow | Webflow University
I am taking a look at the images on the site, I will get back to you. Thanks in advance!
Thanks for getting back to me Dave.
I understand what you’re saying about collection images not getting responsive variants yet, but something is definitely modifying them after upload.
All the images I was uploading to collections were at 2x resolution, each with @2x appended to the end of the filename. When inspecting the image on the site, the resolution had been cut in half… So they’re at least being resized to 1x resolution, and I’m betting that’s where the nasty compression is coming from.
I just did a test by uploading a 1x resolution image and sure enough there’s no compression. The image does look better, but unfortunately it’s not 2x so it’s not sharp on retina screens.
—and WOAH I just fixed it! I just reuploaded the 2x image, but after removing the @2x from the filename, and voila, NO COMPRESSION, and it retains it’s original retina resolution!
So, there it is. @2x on the filename makes for some really lossy compression on Webflow’s end. Sorry if this is a known thing, but it’s news to me. Guess I’m renaming all my images and reuploading.
LMK if you discover anything else on your end Dave, and thanks again for checking it out on the holiday. 
Ok, scratch that… that definitely did not fix it.
“@2x” in the filename apparently wasn’t the issue. Now I am uploading the rest of my images without that in the filename and the resulting image quality is almost completely random.
This is HUGELY frustrating. My images are being butchered after upload. They look perfectly sharp with no compression artifacts on my machine.
Here is an example of what I’m seeing:
On the left is the image exactly as it is on my computer before upload, and as you can see it’s about 487 KB in size. After uploading, the file is renamed, resized to much smaller, and compressed to 28 KB in size. And no surprise, that amount of compression is very noticeable.
Hi there @helmsmith, I continuing to check on this and will get back to you asap. Thanks in advance!
Hey Dave, just checking in to see if you’ve discovered anything. Thanks!
Hi @helmsmith, thanks sorry I had just updated my reply, I should have added a new reply, I am still checking on this, thanks for your patience. I am running some tests. I will get back to as soon as I have info to report on this.
Hey Dave, sorry to press, but I’m getting nervous as the site is supposed to launch this week. This is the last hurdle we have before going live, and we won’t be able to launch as long as images are looking compressed. Is there any info or an ETA you can give me for a fix?
When I inspect any of the images uploaded in a collection, I’m seeing code that definitely indicates responsive variants are being created:
<img class="project-thumb" sizes="(max-width: 479px) 81vw, (max-width: 767px) 44vw, 42vw" src="https://daks2k3a4ib2z.cloudfront.net/5825f89e8ad305816466d37f/583ccb0d2499b5116bfa400c_origin-thumbnail.jpg" srcset="https://daks2k3a4ib2z.cloudfront.net/5825f89e8ad305816466d37f/583ccb0d2499b5116bfa400c_origin-thumbnail-p-500x643.jpeg 500w, https://daks2k3a4ib2z.cloudfront.net/5825f89e8ad305816466d37f/583ccb0d2499b5116bfa400c_origin-thumbnail-p-800x1028.jpeg 800w, https://daks2k3a4ib2z.cloudfront.net/5825f89e8ad305816466d37f/583ccb0d2499b5116bfa400c_origin-thumbnail-p-1080x1388.jpeg 1080w, https://daks2k3a4ib2z.cloudfront.net/5825f89e8ad305816466d37f/583ccb0d2499b5116bfa400c_origin-thumbnail.jpg 1454w" style="transform-style: preserve-3d; transition: transform 200ms; transform: translateX(0px) translateY(0px) translateZ(0px);">
The problem seems to be that the correct variant isn’t always the one that is displayed. Without any changes to my website, I can refresh at different times and completely different image resolutions are displayed.
Is there an update at all on your side? If this isn’t resolved by tomorrow I’m going to have to delay the launch of the site. This is really screwing things up for me, and I don’t feel like I’m getting much information or support from Webflow.
@helmsmith can you please try disabling responsive images for each image that you’re seeing that behavior with?
You can disable this feature for a specific image by hitting CMD+SHIFT+O (CTRL+SHIFT+O on Windows), then clicking the checkbox that’s revealed in the image settings panel.
More information regarding disabling responsive images available here: Responsive images in Webflow | Webflow University
Thank you!!! This will work for launch.
Ideally though, Webflow should definitely look at its image compression algorithms. I understand saving space and load time, but the amount of lossiness I was experiencing was brutal.
I’d love to use the responsive image feature in the future, but until it’s improved I’m going to have to implement it manually I’m afraid.
Regardless thank you for the response.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
