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

Lazyload images without hurting SEO

We have a product details page on our website and it has a preview of a large image of the product. The problem is because of it being too large and hi-res, it takes time to load and render on our page. Now I’ve read about something called image upscaling or from what I’ve understood it works a bit more like lazyloading the images. So the concept is they generate a very small, in terms of file size and image dimension, version of the large image and set it as the initial preview of the image. Then size it up to same as the large image’s original dimension. So it is stretched and they blur it out. They wait for the larger image to load then replace the smaller one with it once it is done loading. I’ve seen this in multiple blogs and news website and it seems like a very good solution. But my concern is, does this affect our page’s SEO? If so, is there a way to implement this kind of behavior without hurting our page’s SEO?

Tags:

2

Answers


  1. 0

    For SEO I’m going to assume you want to go by googles standards for my answer.

    lazy loading will help your bandwidth, not your SEO google will judge your website by full page load time.

    I recommend you compress your images and that will be all the difference.

    if you have any pictures you can load 20 pics and the have a button saying load more, then lazy load from there.
    this would be a big SEO boost as your now loading half your website.

    Login or Signup to reply.
  2. 0

    I understand that you have a problem with optimizing your images. To solve this, I recommend that you apply the following techniques:

    • Add the srcset attribute to the img element. The srcset attribute extends the functionality of the img element. If the browser does not support the srcset attribute, by default the image file is imported using the src attribute. If the browser supports the srcset attribute, you can specify a list of image sources and conditions (comma-separated) before the request is received. As a result, only those images that match the parameters of the device are downloaded and displayed.
    • Art direction in the responsive images with the element picture. If you want the images to vary depending on the characteristics of the device (art direction effect), use the element picture. The picture element specifies a declarative solution to provide multiple versions of the same image, depending on the various characteristics of the device: size, resolution, destination, and so on. 
    <picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

    In the above example, if the width of the browser is not less than 800 pixels, the head.jpg or head-2x.jpg format will be used (depending on the screen resolution of the device).If the width of the browser is from 450 to 800 pixels, the formats head-small.jpg or head-small-2x.jpg (also depending on the screen resolution of the device) are applied. If we are talking about a screen width of less than 450 pixels and a device with downward compatibility, the picture element will not be supported. In this case, the browser uses the img element to display the image on the screen (it must be enabled).

    • Images with relative dimensions. If the final image size is unknown, it is difficult to select the pixel density descriptor for image sources. This, in particular, refers to images that are stretched proportionally to the width of the browser and change their size depending on it. In this case does not indicate the fixed image size and pixel density. Instead, you can determine the size of the image being processed by adding a handle to width. This will allow the browser to automatically calculate the optimal pixel density and select the correct image to load. 
    <img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

    This example shows an image that takes half the width of the viewport (sizes = “50vw” when applying the viewport) and depends on the width of the browser and its ratio of logical and physical pixels. As a result, the browser can select an image that will be displayed correctly in a window of any size.

    Please note that images of the JPG-JPEG format have approximately 50% less volume than PNG. Therefore, they are easier and faster to load. To change the image format and resize images, you can use this tool Photo Editor Online. To compress images, you can use this tool – JPEG and PNG compressors.

    The best solution is the use of Accelerated Mobile Pages AMP. Please note that in their implementation of the image element is also used the srcset attribute.

    Original source ++ Use Cases and Requirements for Standardizing Responsive Images ++ Responsive images of MDN.

    You can use for preloading images of the current web page with meta preload, eg: <link rel="preload" href="//examples.com/images/img1.jpg" as="image">
    Read more Preload of W3C ++ Preloading content with rel=”preload” of Moz.

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

Back To Top
Search