How to fix Specify image dimensions in RWD

[Govada Venkata Sandeep]

In PageSpeed. At Minimize delay in page load section it asks to specify width and height for image tags.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

If website is developed in Responsive Web Design (RWD) then?

If we strictly write width and height in <img> tag RWD CSS styles will not work. I mean image will not auto stretch as per screen dimension.

So how to take care of this issue?

[Rick Steinwand]

Try this:

Add width= and height= to your images.

Add this to your css: img{max-width:100%;height:auto}

Check out srcset using <img> tags: http://responsiveimages.org/

It's supported by some modern browsers and fails-over nicely. http://caniuse.com/#search=srcset

[Dave Mankoff]

Howdy Govada.

We appreciate you bringing this to our attention. It seems that these documents are out of date. I am going to file a bug to spend some time to update them.

Here's what we would generally recommend:

- Try not to use images more than twice your minimum size. That is to say, don't put a 1000x1000 image in a 10x10 element. Ideally, images should exactly match their container.

- Keep an eye out for the <picture> element. Support for this tag is very close: http://caniuse.com/#feat=picture

- Try to at least specify a ratio of width/height on your images. This way, the browser knows how to reserve space for the image before it downloads it. There are various techniques to do this that you can search for.

-dave mankoff

man...@google.com

[Miguel García Sánchez - Colomer]

Dave,

when is it going to be activated the new detection width and height image rules?, if i use an image with a little % more than his native resolution i get the "optimization needed" message.