Streaming live at 10am (PST)

Image squashed/compressed

Does anyone know why these images in a blog post on my site are all looking so squashed/compressed?
Screenshot 2020-02-05 20.04.41

Some I took on an iPhone. The iPhone ones I made sure weren’t too big a file size (something I read on here). But I don’t think it has anything to do with that as the compression/squashed effect is also on images I sourced online.

I’ve tried altering the image to Auto to Original size and nothing seems to help.

Thanks in advance :slight_smile:

Here is my site Read-Only: https://preview.webflow.com/preview/just-julia-blog?utm_medium=preview_link&utm_source=designer&utm_content=just-julia-blog&preview=fa3a74d5452e09ac3abb826b3d152020&pageId=5ce2ffdc26847018372c49bc&itemId=5e3442e274c8e8bcdb462e73&mode=preview

Hi @jmarygraham,

Check your image setting with the Blog Post CMS item.

Other images are set to ‘Auto’, whereas the affected images are set to ‘Original Size’
See Image: 1

As a side note, I notice that the images you are using could still benefit from resizing and compression.
See Image 2:
2

I resized your image to 576x768 and compressed it. The image file size reduced from 280kb to 33kb (Original picture dimensions 3024x4023)

Hope that helps
Keiran

Hi Keiran,
Thanks so much for taking the time to help.

I’m not sure what’s going wrong because most of the images were Auto. I’ve made sure they’re all Auto now but they’re still stretched.

Would love to know how to compress an image. Do you just mean making it as small a KB size as possible before uploading? No need to use other software?

Thanks

Hey Julia,

Ok. Upon further investigation it appears that image resizing in RTF (Rich Text Format) blocks has some limitations.

Good News - You can achieve the desired look you want
Bad News - It involves a little bit of work with manual tweaking.

Here are a couple of previous forum posts that tackle it:

Regarding optimising (compressing) images, yes, we try to make the image as small as possible in Kb before we upload to Webflow (once uploaded WF will do it’s thing to further optimise if needed)

They way we optimise images is to address image dimensions, then compression.

First, look at the dimensions of the image we need as to how it will look on the screen - no real benefit having an image 2400px wide if it will only ever need to be a maximum 800px wide on our site - so we resize the image to 800px wide (keeping aspect ratio). This will immediately reduce the Kb size of the image file.

This free online tool is an example:

Second, reduce image file size further by compression, removing unneeded extra info within the file (info like, date picture taken, GPS co-ordinates etc)

This free online tool very common:

Let us know how you get on,
Keiran

1 Like

In addition, I was playing around with that piece in the blog. Because I couldn’t save the adjustments I made in the Just Julia blog, I copied that whole area with the squashed images and text and pasted into a new blog on my site. I then did the usual simple setup to display the contents and everything came out perfect. No squashing. The only difference was the text styling.

2 Likes

Hmm… how strange @TheCat. What do you think the difference is? Thanks so much for the help

Thanks so much for all the links and info :heart_eyes_cat:Really appreciate it. I followed the video in the post you linked to “Unable to resize images properly in rich text areas” and I used Custom - 40% for the horizontal images and that worked well.

For the portrait mode images, they’re still squashed. I can’t understand why this would be such an issue in a blog. I thought it would be straightforward to upload an image and go. :sob:

1 Like

Yes, very strange.
Earlier I wanted to suggest that you try to resolve the issue, but it would require rebuilding that template and that’s not always desirable. I’m thinking a possibility might be that there is a setting inside a Div or Section that is causing the squashing. Because of the sharing restraints (as it should be) I can’t really try from my side, only you can.

A different approach would be to take those images out of the post and put into their own area. Doing this will allow you to control everything individually, but it’s a lot of extra work.

1 Like

Thanks so much @TheCat. I’ll give that a go :slight_smile: