seo Question posted in
Some basic information to get you started with this can be found here.

Specifying image dimensions to improve the site speed – SEO

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 ?

Tags:

3

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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;
}

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search