naturalWidth and naturalHeight of images

Feature Suggestions
1

My experience shows, that:
a. most performance impact make non-optimized / non-compressed images
b. original size of the most images is oversized in relation to their natiralWidth and naturalHeight (place on the page, allowed through HTML, CSS)

Without getting to know naturalWidth and naturalHeight of images, their compression remains not efficient: i.e.

  • you have a non-compressed image.
  • You know its physical size, 800x600, but you don’t know its naturalWidth and naturalHeight (you can only guess, that they are smaller then physical size).
  • In reality, naturalWidth and naturalHeight are 150x100.
  • What do you do?
  • You compress a 800x600 image without to cut it to 150x100 first.

But imagine, how huge would be the optimization win, if you firstly cut the image to its naturalWidth and naturalHeight, and then compress it?

It would be enough to test just a few pages - each page type, and, knowing naturalWidth and naturalHeight of images on all page types we would be able to cut all website images to their real sizes. And then compress.

Would it not be magic?

2

Your syntax may be a bit backwards. naturalWidth and naturalHeight are the dimensions of the image file not as-displayed. The as-displayed resolutions are available in the DOM as simply width and height (though watch out for css pixels vs display pixels).

You also have no way of knowing what the application is going to actually do with the images. i.e. if there are product images that are zoomed when clicked then a larger than display size may actually make sense for the application.

FWIW, the “Image Analysis” link from a given test that goes to Cloudinary does exactly that and checks for resized images (as does Page Speed Insights).