Image optimization is the most cost-effective job

Image loading optimization, front-end performance optimization, the most cost-effective work, often the workload and difficulty are not much, but can bring a great improvement in page performance.

The same page, before and after optimization, can obviously experience a dramatic change, performance data improvement is also very good.

Analyze how to optimize

But there are so many ways to optimize images, where should we start?

To solve a big problem, we can start with several small problems. Each small problem can be further subdivided. When the problem is small enough, we can find a specific solution.

Drawing on the thinking method of fishbone diagram, we can draw a mind map of image optimization. Of course, only a small part of the functions of image loading optimization are listed here, and more optimization means are also requested to supplement by ourselves.

Next, we will not follow the mind map, all the means of optimization are described, so that the article will be a bit long, ha ha our title is also the title party, but carefully look down, I believe you will still have a harvest.

We will extend the vue-LazyLoad third-party library to see what other optimizations it can be used for, besides lazy loading.

Image volume optimization

Here’s a quick note: Optimizing the size of an image is the easiest, but often the most effective, step outside of the front page.

If we get a cut of the design, we can use Tinypng or Smartmap to resize and compress the image.

If a management terminal uploads images to the outside world, you can compress the image before uploading the image. The library for compress the image can be selected as compresse.js.

Lazy loading of images

Vue-lazyload is currently used more of a library, simple use of lazy loading function, the code is very simple, only need to be introduced and used in the entry file, it also provides more configuration items can be selected as required.

// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3.attempt: 1
Copy the code

Vue-lazyload also provides some hooks for processing images before they are displayed. Here we use vue-LazyLoad filter to see what optimization we can make.

Here’s an example from the official website:

Vue.use(vueLazy, {
    filter: {
      progressive (listener, options) { // When loading, use a small image for progressive loading
          const isCDN = /
          if (isCDN.test(listener.src)) {
              listener.loading = listener.src + '? imageView2/1/w/10/h/10'
      webp (listener, options) { // Change the webP image link for those that support WebP
          if(! options.supportWebp)return
          const isCDN = /
          if (isCDN.test(listener.src)) {
              listener.src += '? imageView2/2/format/webp'}}}})Copy the code

In addition to the examples on the official website, we can extend other optimization points.

CDN links

We can directly change the image domain name that supports CDN to CDN domain name, so there is no need to check whether CDN link is used one by one.

filter: {
    // Convert to CDN
    cdn(listener) {
    	if(isSupportCDN(listener.src)) { listener.src = getCdnUrl(listener.src); }}},Copy the code

Similarly, some interfaces may return HTTP image links. On android, HTTPS pages may not load images, so you can modify the link in this way.

Tencent Cloud image processing optimization volume

Tencent cloud image processing interface is used here to optimize the image volume.

The first is the image format conversion and quality transformation, because the quality transformation interface supports JPG but does not support PNG, we generally convert the image to JPG, and then reduce the quality appropriately.

In addition to quality transformation, we can also request images of appropriate size according to the dom size, which uses Tencent Cloud’s picture scaling interface.

 filter: {
    // Zoom compression
    compress(listener) {
        	// Get the height of the img frame and set the load to double image
          const imageWidth = listener.el.width * 2;
        	const imageHeight = listener.el.height * 2;
        	const url = listener.src;
        	// Compress only for larger images
          if (width > 150 || height > 150) { 
            url = `${url}? imageMogr2/format/yjpeg/quality/80/thumbnail/!${width||' '}x${height||' '}r`;
          } else if (width > 0 || height > 0) {
            url = `${url}? imageMogr2/thumbnail/!${width||' '}x${height||' '}r`; } listener.src = url; }}},Copy the code

Use WebP images

Tencent cloud also provides an interface for converting pictures to WebP pictures, but its conversion speed is relatively slow, but it will increase the time of downloading pictures, which is not integrated here.

Use lazy loading points

Lazy loading, that is, images that are not displayed in the viewport are not loaded first. So we need to pay attention to the image that does not need to be loaded, do not let it appear in the window.

A common mistake is that the img style does not have a fixed height. When you enter the page, all the IMGs have already appeared in the viewport. Vue-lazyload will assume that the IMG needs to load the image.

Although the img at the top of the heap then pushes out the img at the bottom, all images are still loaded at the same time, thus losing the lazy loading effect. See the example below.

The previous page has a fixed height, only the first eight images appear in the viewport, and only the first eight images load.

On the latter page, all images appear in the viewport first. Although only 8 images are displayed in the viewport, dozens of images that do not appear in the viewport are loaded first.

The previous viewport also has a more stable interface.


There are still many points to optimize the picture. The points listed in today’s mind map are not all introduced. I feel that each point can be specially written for in-depth study. Today, from lazy loading divergence, introduce some easier to achieve optimization points, I hope to help you.