Hi, we’re moving our blog from Hubspot to Webflow. It’s been set up so that most of the content, including images, is loaded from the CMS via a rich text element. Hero images and thumbnails for aggregator pages are loaded via custom CMS fields.
We’re now at the stage of testing SEO functions including page speed, and the performance is really bad. Like, we are kinda shocked bad, because the Webflow promise and the reality are looking very different.
Two of the issues PageSpeed Insights is flagging are related to image size:
Images are not responsive
Image elements do not have explicit width and height
One of the big reasons we decided to switch to Webflow in the first place was the promise of responsive images, but now I’m reading in forum posts (like this one) that responsive images don’t work on images in rich text elements, or other collection fields.
I’m also getting really stuck trying to set image width and height inside the rich text element. I’ve followed the webflow university advice as far as I can but it doesn’t seem to have any effect.
So my questions are:
Is it really true that Webflow doesn’t support responsive images inside the CMS?
Is there a workaround for this, or do we need to cut our losses and ditch Webflow? This is kind of a dealbreaker.
How do I set image size parameters inside a rich text element?
I’m a content producer not a designer so please explain it like I’m five!
I would make a CMS collection with The 7 best free route planners in 2022 as the Collection and each of the 7 is an item inside the collection. Check out the tutorial about the Taco bell locations and reference fields: Nested Collection lists in Webflow — full CMS tutorial - YouTube
Yup, that’s what we currently have. Each blog post is a separate collection item. The body of each post is contained in a rich text field that includes images, and it’s these images that are giving problems.
Ok i would put the images into webflow image-fields. In the Base.Prototype you can embed empty images and connect them with the collection list image-field.
With the collection items being themselves their own blogs, putting the images into an image field wouldn’t match up across all of the blogs, as well, there would still be the manual labour of removing the images from the rich text blocks.
With separated collections for each style of blog (list, how to, ect) you will have more control over the design on each style of blog, it will also make editing them easier in the future.
Try using the export/import options and play around with the CSV file in a spread sheet to see if it will make separating them out into there own collections quicker.
Images inside rich text fields or images added to a collection template don’t get a responsive image process performed on them. Might change someday in the future.
You could use a service like Cloudinary to generate responsive images inside a code block within a rich text field. Would require using Cloudinary’s media library to browse and find images then select them for us in code. I don’t bother using Webflow when this is a requirement since it is easier for me to use other solutions.
If you need assistance leveraging an alternate product that can do this, feel free to reach out. I have vast experience managing and integrating media on various platforms without these limitations.
