8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Images and pagespeed

by Darow
7 replies
  • SEO
    • |
I haven't been able to find a post related or a more specific section.

I have several websites, and Im worrying about technical stuff now since it's a fact pagespeed has importance into google's eyes.

What is better/faster for the page, in your opinion?

a) 2 images on a page. 1 is 500x500 and the 2nd is the same exact image/file but resized it to 20x20.

b) 2 images on a page. 1 is 500x500 and the 2nd is the same but 20x20 and uploaded as a different file.

Which one does is faster?
#images #pagespeed
  • Profile picture of the author yukon
    Banned
    When you have an image where the original size is large (ex: 500x500px) & then scale the image down with HTML, your still loading a 500x500 size image, so it's still going to take however long it takes to load the 20x20 image that was scaled down with HTML.

    Scale your image down offline then upload as a new image (new filename).
    {{ DiscussionBoard.errors[9690811].message }}
    • Profile picture of the author Darow
      Originally Posted by yukon View Post

      When you have an image where the original size is large (ex: 500x500px) & then scale the image down with HTML, your still loading a 500x500 size image, so it's still going to take however long it takes to load the 20x20 image that was scaled down with HTML.

      Scale your image down offline then upload as a new image (new filename).
      Oh I see. But if the 500x500 has to load anyways... Does the 2nd image loads as a second image even though its the same? Or because the 1st has been loaded it take less?

      Thanks
      {{ DiscussionBoard.errors[9690824].message }}
      • Profile picture of the author yukon
        Banned
        Originally Posted by Darow View Post

        Oh I see. But if the 500x500 has to load anyways... Does the 2nd image loads as a second image even though its the same? Or because the 1st has been loaded it take less?

        Thanks
        That's still loading the 500x500 image twice on the same page. The HTML is still setup as an individual image, it's just calling the same image twice. So it's using the same 500x500 bandwidth even If the 2nd image is scaled down to 20x20 with HTML.

        You still have some room to play with, example say your image is 500x500 but your webpage needs the image to be shown as 480x480, I wouldn't waste my time resizing something so minimal in that case. In that case I would just scale the image down with HTML, it's only 20x20px, which isn't going to slow down a browser anymore than scaling the image down to the exact size (ex: 480x480). If you had dozens of images that 20x20px could add up, but for one or two images per page it's no big deal.

        Your OP example is an extreme case, the image size is drastically reduced (500x500 vs 20x20), that image needs resized offline.
        {{ DiscussionBoard.errors[9690878].message }}
  • Profile picture of the author MikeFriedman
    The second one is faster.

    Browsers load full size images and then resize them according to the CSS/HTML instructions.

    Better to use the exact image size you need than to resize it.
    {{ DiscussionBoard.errors[9690836].message }}
    • Profile picture of the author Darow
      Thanks guys. That makes it clearer.

      So even though the second load is faster, is always better to make exactsized images. I thought they would load as one.. Ok, thanks!
      {{ DiscussionBoard.errors[9690841].message }}
  • Profile picture of the author Afiqfikri Daud
    Yes, I'm agree with Yukon,

    it is better to upload the right image size at the first place than resize using html
    {{ DiscussionBoard.errors[9692098].message }}
  • Profile picture of the author vdsthor
    the disadvantages of hotlinking worth bearing in mind are that the webpage normally loads slower as soon as you link to images stored on a separated web hosting server than the website is hosted on, and the owner of the image has overall control to put out of action a image hotlinking. Image Hotlinking Creates massive Bandwidth loads.

    Every search engine required providing users a most excellent user experience, just like Google, in addition to a speedy site improves generally site excellence and increases user fulfillment. Everyone deserves a high-speed online experience.
    Signature
    Vector Graphics Design | Print Graphics
    {{ DiscussionBoard.errors[9692213].message }}

Trending Topics