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.
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?
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)
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.
Thanks so much for all the links and info 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.
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.
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.