Specifying image dimensions to improve the site speed

Question

I'm trying to optimize my images for SEO.

Page Speed currently only detects image dimensions that are specified via the image attributes.

According to above line i should use width and height attribute in image tag for improving the page speed. But I have to responsive the site also, for example i have an image with following width and height.

Screen Size 960 pixel

<img src="" width="250" height="250" />

Then how i will adjust the image size on small screens?

Screen Size 480 pixel

<img src="" width="250" height="250" />

if i add an id or class for adjusting the size on the small screen the it will be correct way or not?

.reduceSize{
   width:150px;
   height:150px;
}

Please guide me i'm wrong or any other suggestion. Also in image tag width and height attribute are necessary for site speed ?

@GauravRai I'm already using the media queries, i need suggestion for image optimizations — Ayaz Ali Shah, Feb 10 '16 at 06:34

Ali Sheikhpour · Accepted Answer · 2016-02-10T06:54:43.090

2

Changing Image dimension through html code wont reduce the image size and wont improve the speed of loading. If you want to load different image size for different screen resolution, you have to use ajax load different images(based on screen size) or other 3rd party image handlers as well as aspJpeg (for windows server) or WideImage (for linux) or find more by searching php image manipulation to resize images dynamically.

You probably will need extra coding to determine the screen size before loading proper images.

edited Feb 10 '16 at 06:54

answered Feb 10 '16 at 06:41

Ali Sheikhpour

10,475
5
41
82

This is what i wanted to asked exactly, but i'm i'm using `php` not `asp`. So is there any other solution for that instead of using any specific API ? – Ayaz Ali Shah Feb 10 '16 at 06:46
please check the answer again. – Ali Sheikhpour Feb 10 '16 at 06:56
Correct, changing the image dimensions wont reduce the image size, but It can improve browser rendering speed, which comes into page load times. [Source](http://stackoverflow.com/a/32218280/1141264) – DickieBoy Jun 29 '16 at 14:42
@DickieBoy I prefer the word "specifying" not "changing" .specifying image size through HTML or CSS (any size, smaller or larger than real image file) will help browser for faster rendering because the page layout is final. – Ali Sheikhpour Jun 29 '16 at 18:49

Sooraj · Answer 2 · 2016-02-10T06:42:26.513

1

May be you can add two different <img> tags. One for mobile device and one for larger screen.

<img class="hide-in-mobile" src="" width="250" height="250" />

In css media queries for mobile devices add

.hide-in-mobile
{
 display:none;
}

and

<img class="show-in-mobile" src="" width="150" height="150" />

in media queries for large screen

.show-in-mobile
{
 display:none;
}

edited Feb 10 '16 at 06:42

answered Feb 10 '16 at 06:39

Sooraj

9,717
9
64
99

Natrually, [using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) would be required as well. – Wex Feb 10 '16 at 06:40
1

Won't work. As soon as the browser hits the – Kapitein Witbaard Feb 17 '16 at 08:56

score 0 · Answer 3 · answered Feb 10 '16 at 06:41

Width and Height attributes are important for site speed. You can set natural width/height of image then control you img size with CSS in Media. as you told in your question.

<img class="reduceSize" src="" width="250" height="250" />

@media all and (max-width:960px ) {
.reduceSize{
   width:350px;
   height:350px;
}

}

@media all and (max-width:480px ) {
.reduceSize{
   width:150px;
   height:150px;
}

}

Specifying image dimensions to improve the site speed

3 Answers3