Open gmetais opened 3 years ago
@gmetais, thanks for this improvements / new metrics ideas!
What I could do:
Please, do go ahead :slightly_smiling_face:
Maybe this kind of image analysis could even be split into a separate Node module, just like what you did with analyze-css. It would allow to deeper analyze the image: Is it correctly compressed? Would it be lighter in a different format such as JPEG or PNG. What size would it be with WebP, JPEG-XR or AVIF new generation formats?
I second this idea.
Hi, I'm thinking of adding some metrics and changing some others, to better address responsive images and the reality of screen sizes and resolutions.
Issues with the current implementation:
imagesScaledDown
is bugged on images with srcset/w and sizes attributes.imagesScaledDown
reports data url SVG images such assrc="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 177'%3E%3C/svg%3E"
TODO: move to a separate module
What I could do:
imageScaling
metrics group for the following metrics.imagesWithoutDimensions
.imagesScaledDown
works:<img src="">
images to avoid the bug.<source>
tags inside<picture>
, I have to test it.imageScaledUp
metric to help detecting issues with visual quality:incorrectSizesParameter
metric:sizes
attribute matches the image display size on the page (with a 10% error margin)sizes
attribute on a srcset/w syntaxsizes
attribute on a srcset/x syntaxrespImageSyntaxError
metric:sizes
attribute and report syntax errorssrcset
attribute and report syntax errors<source>
tags and report syntax errors<img>
tag in<picture>
, for old browsersDo you or anyone have more ideas? Are metric names correct?
Maybe this kind of image analysis could even be split into a separate Node module, just like what you did with analyze-css. It would allow to deeper analyze the image: Is it correctly compressed? Would it be lighter in a different format such as JPEG or PNG. What size would it be with WebP, JPEG-XR or AVIF new generation formats?
Analyzing CSS background images would be great too, but not that easy.