Per the Google Page Speed recommendations, I want to Specify image dimensions to "Optimize browser rendering."
Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.
I am investigating ways to traverse through the image files (PNG, JPEG) in my static content project and output a file with the path and filename of each image file as well as the height and width in pixels. I would then use that to help me construct the tags by using the src attribute data to lookup the values to use for the height and width attributes.
\images\logo.png,100,25
My first ideas was looking for an ANT task, since our static content build uses Ant for other purposes (like using YUI Compressor on JavaScript and CSS files). I am open to other ideas as well, including other methods to solve this problem. I would prefer to not have to manually do this work.
You could try this https://github.com/mattwildig/image-size-report-task, which I've made just for this question.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With