Streaming live at 10am (PST)

Dont responsive image size

Hi guys:v:
I have a problem with a responsive image. I am read in this post about resizing images, but on my test site does not work with responsive images.
In the developer panel, write about one intristic size on any device.

Please help me so that the size of my image will respons to any display size.

my test site

image 1 ↓


image 2↓
image 3↓

Hi @lsalex_root,

Using Assets Manager:

  1. When adding images from here you don’t need any CSS on the image directly, it’s not necessary because you should control the responsiveness with a parent Div.

  2. Also, there’s no need to add any width to a Section because it’s automatically 100% width. So use a Section, then add the Div. Now add width to the Div to control the inner image. The responsiveness will take hold. Then if you want, you can replicate that Div’s class for all the other images you plan to add. Try to keep classes off of the image itself when using the Asset Manager, it’s not really necessary unless you want to.

CMS Assets:

  1. Now this is a little different because you’re not able to style the image at all from the CMS once it’s added. All adjustments need to be completed in the photo editing program before uploading to the CMS. Not really stated anywhere, it’s just from experience :slight_smile:

  2. In the CMS, once binded in the Designer, you will want to add CSS to the image directly because it’s dynamic being managed by the database compression and it will refresh. I’ve had this happen many times.

  3. Using the same structure as above, except on the Div you need to lock the values. If you add 60% width, then also add the Min & Max to the width as well. This will lock the Block and the image now has limitations for responsiveness.

  4. Then on the image add the EXACT width of the image size. If it’s 2500x2500. Then put 2500 pixels on the width. The Div can shrink it if needed. But if you wan the image to scale down, convert the pixel size to % in the CSS value for width.

  5. But using CMS it’s best to keep the image’s as static as possible or you’ll get unexpected blurriness for some images and crispness for others - Because the CMS Template page using 1 block for all the images of an item. You CANNOT style each image individually like you can when using the Assets Manager.

  6. Also, if using CMS Asset, I’d recommend PNG instead of JPG.

Here’s a quick video:

I hope that makes sense. Let me know if you need any assistance :slight_smile:
See ya.

I fixed the site, but did not get the desired result.

Perhaps I wrote the messages incorrectly, but I wanted to say that the images on different devices (that is, with different screen resolutions) have one original size (large). This affects the loading of the site, it takes too much time.

The code says that for a different screen size, should be loaded a picture of a different size
Why doesn’t this happen?

Html code:
srcset=“https://uploads-ssl.webflow.com/5db85669e2e034826c9b1591/5db858bcea964993a39e1bfb_mark-neal-e9exFvkz20w-unsplash-p-500.jpeg 500w, https://uploads-ssl.webflow.com/5db85669e2e034826c9b1591/5db858bcea964993a39e1bfb_mark-neal-e9exFvkz20w-unsplash-p-800.jpeg 800w, https://uploads-ssl.webflow.com/5db85669e2e034826c9b1591/5db858bcea964993a39e1bfb_mark-neal-e9exFvkz20w-unsplash-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/5db85669e2e034826c9b1591/5db858bcea964993a39e1bfb_mark-neal-e9exFvkz20w-unsplash-p-1600.jpeg 1600w, https://uploads-ssl.webflow.com/5db85669e2e034826c9b1591/5db858bcea964993a39e1bfb_mark-neal-e9exFvkz20w-unsplash-p-2000.jpeg **
**, https://uploads-ssl.webflow.com/5db85669e2e034826c9b1591/5db858bcea964993a39e1bfb_mark-neal-e9exFvkz20w-unsplash.jpg 2268w”

FYI: PNG’s are great for graphics but should not be used for photographic images unless you want to slow down your visitor’s experience for no reason.

No doubt, but that’s assuming you can control the image that gets loaded, then control it’s sizing and placement. If using the CMS, you cannot determine which size gets loaded on the page because you aren’t actually placing the image on the page. You’re using a block, that all items will use. All images must be the exact same, or you’ll get different results.

You’re setting a placeholder, not the actual image. Also, if you lock the image size with a Div, that will work, but now you’re not using responsiveness. It’s stuck in a pixel block, in a set location on the page.

Okay, let’s use percentages, or any other size… this is exactly what I’m talking about. Now you cannot predict the “actual” size or placement of the image. One visitor has 3840 monitor, the next user has 1280. “How can the image delivered be the same without losing resolution - if it’s a JPG?” No way that’s happening.

Not to mention, in the CMS, I may have an image with 1980 width. And I’m using a full 100vh header. If that user has a 3840 monitor and loads my page, how will the JPG not lose resolution?? It’s guaranteed to blur because it’s being scaled up.

Okay, let’s say we NEED to use JPG, we must add a very large photo and compress it. But it’s still not a guarantee the size of the image will fit the exact Div size, exactly in the spot we want, the way we want. You’ll get varying effects because it’s a JPG, when using the CMS – because we can’t control anything regarding the image after uploading it.

In Assets, there are a number of option to use - individually. I can use background image for one block, drop an image element just below it in another block, add percentages on another block, then use VW for another - all on the same page! You can’t do this using the CMS. They all need the same properties together.

Yet, the CMS is still fabulous and the best tool inside a web designer app on the planet, for the price and what you get. No doubt. But this is a little wrinkle, a small workaround for those special cases when each photo must be absolutely spot on.

Believe me I tried everything, going to different monitors, etc, etc. The best practice if you need, and I mean if you need to ensure the quality, location, everything, it’s best to use PNG in the CMS for important images. Not all, just the main ones.

It’s a long topic that takes a while to explain, but it’s something you can test to see … :slight_smile:

See ya.