Pictures are an important part of the page. In the process of page loading, pictures and text should be displayed as soon as possible to improve the loading speed of the page

Image selection

  • JPG format

    Lossy compression volume small load fast does not support transparency

    The JPG format stores a single image in 24 bits and can display up to 16 million colors, enough to handle the color requirements of most scenarios, which means that the mass loss before and after compression is not easily detected by our human eyes

    JPG is good for rendering colorful images, and in our daily development, JPG images are often used as large background, rotation, or Banner images

  • Png-8 and PNG-24 formats

    Lossless compression, high quality, large size and transparent support

    Png-8 supports up to 256 colors, while PNG-24 can display about 16 million colors. PNG images have stronger color expression than JPG images, more delicate processing of lines, and good support for transparency

    PNG is suitable for displaying small logos, simple and contrasting images or backgrounds

  • SVG format

    SVG compared to PNG and JPG: Text files are smaller and more compressible

    SVG is a vector graphics format that can be infinitely large without distortion

    SVG can be written directly in HTML as part of the DOM, or as a separate file with the.svg suffix (used just like a normal image)

    Online vector gallery

  • Base64

    Text files depend on encoding

    Base64 is an encoding method that exists as a small icon solution to improve web performance by reducing the number of requests to the server when loading web images

  • The WebP

    WebP is an image file format that provides lossy compression and lossless compression, supports transparency, supports gifs, and smaller file sizes

    Compatibility issues exist and cannot be displayed properly in Safari

Manually compressing images

tinypng.com/

Use picture CDN

  • An overview of

    Image CDN is optimized for images, usually including zooming, format conversion, etc. You can think of it as an API that gets the corresponding image content by passing in parameters such as size, quality, format, and so on

  • Usage scenarios

    The images with low update frequency can be directly put on the server, which can reduce the access delay and be suitable for a variety of different scenes

Determine browser support for the Webp format

  • Implementation approach

    Load a WebP image first. If you can get the width and height of the image, it shows that WebP is supported, and vice versa

  • Methods encapsulate

    export const isSupportWebp = (nature = 'lossy') = > {
  const hash = new Map([['lossy'.'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA']./ / damage
    ['lossless'.'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==']./ / condition
    ['alpha'.'UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==']./ / transparent
    ['animation'.'UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gc A']  / / animation
  ])
  return new Promise((resolve, reject) = > {
    const img = new Image()
    img.onload = function() {
      (img.width > 0 && img.height > 0) && resolve(true)
    }
    img.onerror = function()  {
      reject(false)
    }
    img.src = `data:image/webp; base64,${hash.get(nature)}`})}Copy the code

  • The method call

    isSupportWebp()
  .then(result= > {
    console.log('support WebP', result)
  })
  .catch(error= > {
    console.log('WebP not supported', error)
  })
Copy the code