0

When running Chrome Lighthouse I get warning on my images sizes. It says I could adapt image sizes according to the user device. At the moment my images are the largest possible and resized according to any bootstrap grid change ...

It works pretty well but needs the larger file format being downloaded whatever the user device.

I can of course add an image replacement tag in a media query... But my question is: would all the pictures not be loaded instead of a single image ?

I think I have found the solution of adding different CSS files depending of the media size, but this thread Media Queries to load resource? suggests that I would lose responsiveness ...

I am a bit lost in understanding how images or other assets are loaded by the browser in case they belong to the same CSS file ...

Maxence
  • 2,029
  • 4
  • 18
  • 37
  • What happened during your tests, have you conducted any? – enhzflep Oct 10 '18 at 23:21
  • I do test the backend. I am rather back end coder and my website does not have anything front end to really test. Are you thinking of specific tests – Maxence Oct 10 '18 at 23:27
  • 1
    You should open up the browser dev tools and look at the network requests. Are all images loaded or only the ones at a specific breakpoint? – manish Oct 10 '18 at 23:40
  • I think Lighthouse is telling you to check whether the user agent's screen has a pixel-density of more than 72dpi and returning 2x images if so, if not serve your 1x images – Michael Abeln Oct 10 '18 at 23:47
  • @Maxence - Of course I'm thinking of specific tests. You want to know if all or a subset of the images are loaded - so you write a test, or examine the network requests your site generates. Failing that, if you're really much more copmfortable in the back-end, you examine your server logs to see which files were served when your site was accessed. But I'd do what Mannish says - Ctrl-Shift-I opens the browser tools. Seeing which actual files were loaded from there is an entirely trivial task. – enhzflep Oct 11 '18 at 01:16

0 Answers0