How to See Which Srcset Image a Browser Is Using with Browser Developer Tools

Is it possible to see which srcset image a browser is using with browser developer tools

The image has a property currentSrc, you can log it or inspect it with several tools:

• In chrome developer tools inspect the element, then click the properties tab.
• In Firefox developer tools inspect the element, right click and select DOM from the context menu.

You will see an entry for currentSrc: with the actual image source.

How does the browser determine which srcset image to load when no sizes attribute is present?

Seems that the browser does not respect any CSS to decide which image to load. After all, it is not clear which CSS files have already been loaded when the image starts loading.

Instead, it treats each image as if it was stretched to the full page width. If the screen is non-retina and 600px wide, it would load the next-higher image size (840px in the above example), regardless of the actual size that the image would occupy on the screen.

For retina screens, it would just multiply the required image width by the device-pixel ratio.

Is there a way to display an image in the browser without having a preview of the image in the developer tools?

I guess you can somehow encode your image and than pragmatically draw it on a canvas. For example, using server-size script split the image into a few pieces and encode it using base64 (you may, also, encode these base64 string, but I don't think it would help). Than using JavaScript decode every image and draw it on a canvas. At least, it won't be that easy to just look an original image in the network tab, because user would see a bunch of small images instead of a big one.

However, I think you should use Flash or Java for this task.

P.S.
I have an even better idea. Instead of small images, you images with different transparent and color. So you would get an original image only when you draw all of them in the same position.

Can anyone see where I'm going wrong with this srcset?

Note that this srcset strategy on the <img> element depends on the fact that the browser has not cached the image yet. This strategy is meant to save the bandwidth for the browser. So, if you start off with a wide viewport, the browser simply fetches the larger of the two images and will no longer fallback to the smaller one even if you resize.

If you want to force the browser to load images at various viewport breakpoints, use <picture> instead:

 <picture alt="Sample Image" class="lazyload">  <source srcset="https://via.placeholder.com/360x190" media="(min-width: 480px)" />  <img src="https://via.placeholder.com/140x140" /> </picture>

---

Related Topics