“This is the first day of my participation in the November Gwen Challenge. Check out the details: The Last Gwen Challenge 2021

1. Lazy image loading

1.1 native lazy loading scheme of pictures

    <img 
        loading="lazy" 
        src="https://p3-passport.byteacctimg.com/img/user-avatar/43a4a02d442924332f918490d38ff173~300x300.image"
    />
Copy the code

limitations

  • Browser support required
  • Poor scalability and compatibility

1.2 Lazy loading scheme of third-party images

1.2.1. verlok/lazyload

1.2.2. yall.js

A fast, flexible, compact SEO friendly lazy loader.

1.2.3. Blazy

BLazy is a lightweight, scrolling lazy image-loading JavaScript library written in pure JavaScript and does not rely on any third-party JavaScript libraries (such as jQuery). BLazy supports all major browsers, including IE7 and above.

1.react-lazy-load-image-component

  • Example site (Demo) www.albertjuhe.com/react-lazy-…

2. Use progressive graphics

  • BaseLine JPEG (top-down)
  • Progressive JPEG (low to high pixels)

2.1 Advantages and disadvantages of progressive images

2.2 Progressive picture solution

  • progerss-image
  • ImageMagick
  • libjpeg
  • jpegtran
  • jpeg-recompress
  • imagemin

3. Use responsive images

<img 
    srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
    sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" 
    src="elva-fairy-800w.jpg"
    alt="Elva dressed as a fairy" 
/>
Copy the code

Note the format: Each line has a different attribute value, separated by a comma

3.1 Using the Srcset attribute

Defines the set of images we allow the browser to select, as well as the size of each image

3.2 Use of Sizes attribute

Defines a set of media conditions (the width of the screen). For example, at the top edge, when the width of the screen is less than 480px, the width of the slot the image will fill is 440px.

So, with these attributes, the browser will:
  • Viewing device Width
  • Check sizes list which media condition is the first true
  • View the slot size given the media query
  • Loads the image referenced in the SRCset list that is closest to the selected slot size

3.3 The use of picture

Display different images depending on the size of the screen. If no picture is matched or the browser does not support the picture attribute, use the img element:

<picture>
    <source media="(min-width: 650px)" srcset="demo1.jpg">
    <source media="(min-width: 465px)" srcset="demo2.jpg">
    <img src="img_girl.jpg">
</picture>
Copy the code