Question about Images

I understand the responsive image concept. My question is about optimizing images - specifically, what is done via Bootstrap vs Bootstrap Studio, and the person that preps them regarding actual pixel width sizes.

Say that I upload a 1,600px wide image but place that in a 4-column section. Is Bootstrap or Bootstrap Studio reducing the actual pixel width to fit or should we create specific pixel width image sizes depending on the targeted container? I have done the later in the past as a way to better control image quality and improve SEO.

When in the medium screen, should a 12-column image be at 720px, 768px, 960px or 991px wide? In the case where the container padding is “0” I suspect that the upper limit breaking should be used.

Consider scaling images to twice the size of the largest targeted container for mid-range displays, and choosing one size for XL or XXL containers. This approach compensates for differences in monitor DPIs. The impact of modern internet speeds on image delivery times is significant, though not as critical, it remains a consideration, especially in financial contexts.

Use the <picture> element instead of the <img> element to provide images in both portrait and landscape orientations for mobile and desktop devices.

For sites targeting a large audience and driven by revenue, offer images in both WebP format and a fallback version (PNG or JPG). This can be achieved using the <picture> element or the srcset attribute.

Modern browsers support lazy loading options such as lazy, eager, or auto, a feature setting available in Bootstrap Studio.

The necessity for image size and optimization depends on the number of images per page, the image’s significance (whether it’s a key visual or just a background filler), and other factors. Cloud services and CMS options that pre-render images before delivery based on the request are available for industries with heavy online presence.

Bootstrap Studio offers an excellent image optimizer. Additionally, you can configure your own editor to open and edit a image right from inside Bootstrap Studio.

I’ve spent a lot of time trying to find the SEO sweet spot on images that would satisfy Google while not loosing too much quality. I did learn that there are times when the WebP file was actually much larger than the jpg. It was rare, but it did happen. Usually it was on a darker image as I recall. If you have spent much time exploring Acadia on Acadia Magic, you may have an idea about how many images there are and how long it would take creating different sizes and then adding the needed code. It would be a real time saver if there was an AI that could do it. Thanks again.

On my old Iphone 6 I dont see any WebP images. On sites that provide a fallback I get PNG or JPG and it looks fine then.

On Deskop no problem.

I worried about that. Whenever I checked with Google they were pushing hard on changing to WebP. I changed hundreds of images then noticed it actually harmed my SEO because of the loss of backlinks.

You might want to get in touch with your hosting provider (or look in your control panel) to see if they give any web/image optimisation tools. My hosting gives me the options to convert to webp, resize images etc.

This is all done on the server, so you continue to upload jpgs in BSS and the server takes care of converting the images to webp, falling back to the original jpg when the browser doesn’t support the newer image formats.

If your hosting doesn’t cover this then you could take a look at going down the same route but via cloudflare. (Activate Polish · Cloudflare Image Optimization docs)

Thank you for this information. I was not aware that this was available. It certainly would have saved me a lot of time. At this stage, I am considering whether it would be smart to upload the jpg’s that I removed when I replaced them with WebP versions in case it would preserve some of the previous backlinks.