WebPagetest Forums
Adding image dimensions to image tags not wise for Responsive Web Design? - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Optimization Discussions (/forumdisplay.php?fid=5)
+--- Thread: Adding image dimensions to image tags not wise for Responsive Web Design? (/showthread.php?tid=12436)



Adding image dimensions to image tags not wise for Responsive Web Design? - Geebee - 07-30-2013 06:51 AM

Hi all,

one of the recommendations for webperformance is adding the image dimensions height and width to the <img> 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?


RE: Adding image dimensions to image tags not wise for Responsive Web Design? - pmeenan - 07-31-2013 05:13 AM

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.


RE: Adding image dimensions to image tags not wise for Responsive Web Design? - Geebee - 08-01-2013 04:55 AM

Patrick, thanks!