Hi all,
one of the recommendations for webperformance is adding the image dimensions height and width to the tags: “If the browser knows the height and width of an image before it downloads and renders the image it can continue to render the web page”.
But when I use a Responsive Web Design, and I would choose to let the viewport of the user-agent decide which dimensions the image will be scaled to, this rule is obsolute.
Do you agree?
So, technically the recommendation can be implemented in CSS and doesn’t have to be explicit width/height tags on the image itself. As long as the browser knows the size of the container holding the image when it does layout (either from the HTML itself or from CSS styles).
With responsive image solutions you are still explicitly setting the container size with breakpoints or other methods and not causing the page to get laid out again when the image starts to arrive.
There is a separate recommendation to not resize images in the browser and that they should be served at the native size they will be displayed. That gets a bit fuzzier with responsive sites and high-DPI images.
Patrick, thanks!