LQIP

Image placeholders are certainly familiar. Now mainstream websites, such as blog Medium and Zhihu, support image loading effects from blur to clear, bringing great product browsing experience.

LQIP stands for Low Quality Image Placeholder. It is the underlying technology that works behind it. This technology automatically generates super-small thumbnails from the original image.

zouhir/lqip: Low Quality Image Placeholders (LQIP) Module for Node

Related to this is SQIP, which I won’t go into. Related information:

  • SQIP: SVG-based LQIP technique.

  • Image loading using SVG as image placehold – simple book

Maintaining images using LQIP directly is a pain, so automate it using a front-end engineering approach. Lqip-loader is used to import the loader integrated into Webpack, and then we do not need to manually deal with the relevant file content, just import and use from the source code.

zouhir/lqip-loader: Low Quality Image Placeholders (LQIP) for Webpack

Configuration scheme

Integration into Webpack using LQIP-loader directly:

Configuration Scheme 1

Using the file – loader

{/ * * * a * using the file - loader configuration scheme * * / test: / \. (PNG |, jpe." g)$/, loaders: [ { loader: 'lqip-loader', options: { path: '/media', // your image going to be in media folder in the output dir name: '[name].[ext]', // you can use [hash].[ext] too if you wish, base64: true, // default: true, gives the base64 encoded image palette: true // default: false, gives the dominant colours palette } } ] }Copy the code

Configuration Scheme 2

Combined with other loaders

{/ * * * in combination with other loader configuration scheme 2 * * * / test: / \. (PNG |, jpe." g)$/, loaders: [ { loader: 'lqip-loader', options: { base64: true, palette: false } }, { loader: 'url-loader', options: { limit: 8000 } } ] }Copy the code

Integrated into the Umi

The scaffolding I use is Umi, so I need to import the LqIP-Loader with its supplied ChainWebPack.

By reading its source code (umi/ getconfig. ts at master · umijs/umi), we can know that the rule set related to image processing is images and then need to import LqIP-loader before URL-loader.

The configuration is as follows:

 chainWebpack: (config: Config) => {
    config.module
      .rule('images')
      .use('lqip-loader')
      .loader('lqip-loader')
      .before('url-loader');
    return config;
  },
Copy the code

Method of use

When importing an image directly, there are three parameters SRC, preSrc, and Palette (optional)

Interface signature

interface LqipImage { src: string; preSrc: string; palette? : string[]; }Copy the code

Simple test:

import banner from './images/banner.jpg'; console.log(banner.preSrc); // Output: "data:image/jpeg; base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhY.... // The banner will have the palette property (enable Palette: true in the configuration item), and the array will be sorted from the most important color to the least console.log(palette.) // output: [' # 628792 ', '# bed4d5', '# 5 d4340', '# ba454d', '# c5dce4', '# 551 f24] the console. The log (banner. SRC) url / / the original imagesCopy the code

case

Since the image structure has been changed since import, I recommend that you package an image component that integrates the LQIP output on top of the existing image component.

The idea is simple: make a judgment on the SRC passed in. If it’s a string, return the image component you used before, and if it’s an object, handle the SRC and preSrc logic yourself.

React-simple -img features lazy loading, Image placeholders, responsive loading of images, and responsive sizing.

My own LazyImage is as follows:

import { SimpleImg } from 'react-simple-img'; import React, { FC } from 'react'; interface LazyImageProps { src: AdaptiveImage; height? : number | string; width? : number | string; placeholder? : string | boolean; className? : string; alt? : string; sizes? : string; } const LazyImage: FC<LazyImageProps> = ({ src, height, width, placeholder, className, alt, sizes, }) => { if (typeof src === 'string') { return ( <SimpleImg placeholder={placeholder} src={src} sizes={sizes} alt={alt} height={height} width={width} className={className} /> ); } return ( <SimpleImg placeholder={src.preSrc} src={src.src} alt={alt} height={height ? height : undefined} width={width} className={className} /> ); }; export default LazyImage;Copy the code

The original code for SimgleImg is as follows:

<SimpleImg SRC ={img} width={width} placeholder={false} imageHeight : height} />Copy the code

After using LQIP, switch directly to the encapsulated LazyImage painlessly

<LazyImage
  src={img}
  width={width}
  height={imageHeight ? imageHeight : height}
  />
Copy the code

This enables very low development cost fuzzy loading capability.