First of all, about the image coding principle, compression algorithm these are very professional fields, as a small front-end, know the general application scenarios and general characteristics.

The basic concept

Vector and raster images

  • Vector graphics: Shapes use lines, points, and polygons to represent images.
  • Raster image: Represents an image by encoding the value of each pixel in a rectangular grid.

Vector diagrams: The most common vector diagram for the front end is SVG. SVG is suitable for images that contain simple geometric shapes, and because SVG scales without distortion, SVG is best used for high-resolution screens and images that need to be displayed in different sizes.

Raster image:

  • Consists of a pixel grid;
  • Each pixel is encoded with color and transparency information;
  • Use different compression algorithms (different image formats) to reduce the file size of the image.

Because the source data is too large, generally used in the web page is compressed file, the following is a JPG file compression and decompression process:

There are two processes involved:

  • Encoding: source data encoding to obtain JPG files; This JPG file is used for storage and transfer.
  • Decode: To display this image, decode the contents of the JPG file to get the source data.

Lossy compression Lossless compression

Continue with the JPG codec example above. The source data is a 2-dimensional “pixel” grid; for example, a 10-by-10 image has 100 pixels. Each pixel in turn stores RGBA values: (R) red channel, (G) green channel, (B) blue channel, and (A) alpha (transparency) channel. Each channel is 8 bits, or 4 bytes per pixel. The browser takes the JPG file and decodes it to produce the same grid sequence of pixels as the original, allocating four bytes of memory to each pixel (no matter what format is used, the restored data will be the same size as the original).

Then, if the browser can decode the raw data, it is lossless compressed. Lossy compression is a form of compression where information is discarded in order to get a smaller file, and the process is irreversible so that the browser decoding cannot retrieve the original data.

For raster images to choose the appropriate format for different usage scenarios, explore some of these common image formats.

Common Image formats

JPG/JPEG

Probably the most widely used image format in the world today, features:

  • Transparency is not supported;
  • Lossy compression.

JPEG works well with rich colors and weak lines, such as large backgrounds, banners, etc. JPEG is lossy compression (there are lossless JPeGs, which are not widely supported). The lower the quality level, the smaller the volume and the more blurred the image. Therefore, when using, you need to choose the appropriate quality level according to your needs.

To optimize the

JPEG has a number of different compression modes, such as the common baseline (sequential) JPEG and progressive JPEG (PJPEG).

Baseline JPeGs (the default setting for most image editing and optimization tools) are encoded and decoded in a relatively simple way: from top to bottom. When a baseline JPEG is loaded with slow or unstable connection speeds, the user sees the top of the image first and then gradually sees the rest of the image as the image loads. Stealing Google Maps:

Baseline JpeGs load from top to bottom, while progressive JpeGs load from blur to clear.

Progressive JPEG divides an image into multiple scans, with the first scan displaying the image in a fuzzy or low-quality setting and subsequent scans progressively improving the image. We can think of this process as “incremental” improvement in image quality. Each “scan” increases the sharpness of the detail before merging into a full-resolution image.

Progressive JPEG allows you to see the rough outline of the final image before downloading it, which improves the user experience to some extent.

Progressive JPEG compared to baseline JPEG:

  • Larger graphs have higher compression rates;
  • Requires more CPU resources to decode.

Using a baseline JPEG versus progressive JPEG requires a tradeoff between file size, network latency, and CPU consumption, depending on the scenario.

For more information on progressive JPEG, see Wikipedia for more information on the scientific name of the scanning algorithm used by progressive JPEG, interlacing.

Interlaced scan results in something like this, which feels professional and graphic:

In addition to JPEG, which supports interlaced scanning, PNG and GIF also support interlaced PNG\GIF.

The advantages and disadvantages

Advantages:

  • Using efficient compression algorithm, image size is small;
  • Rich color, can support 24bit true color;
  • The quality level of compression can be controlled.

Disadvantages: For strong line sense, color contrast of the image, JPG compression is usually more likely to make people feel fuzzy; In addition, there is absolutely no way to use JPG images with transparency requirements, which is where PNG comes in.

PNG

Features:

  • Support transparency;
  • PNG does not use any lossy compression algorithms except for the selection of the size of the palette.

Because PNG is a lossless, high-fidelity image format (palette size issues are discussed below), it can store more detail and at the same time be larger.

To optimize the

Why do some tools claim to compress PNG when PNG is lossless? The best-known is Tinypng (also known as Panda.cn).

Check out tinypng’s website:

How does it work?

Excellent question! When you upload a PNG (Portable Network Graphics) file, Reducing the number of colors By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too. The result better PNG files with 100% support for transparency. Have your cake and eat it too!

Here are three forms of PNG: PNG8, PNG24, and PNG32. The main differences between PNG8 and PNG24 are:

  • The most intuitive is the difference in color bits. For each pixel of data, PNG8 requires 8 bits, i.e. one byte, while PNG24 uses 24 bits, i.e. three bytes: RGB requires one byte for each of the three channels.
  • Because the number of digits is different, the number of colors you can represent is different. PNG8 can only represent 256 colors at most, while PNG24 supports 24-bit true colors.
  • Different compression methods. PNG8 adopts palette + index value mode, PNG24 has no palette and uses dot matrix to store color value.
  • Translucency supports different. The PNG8 palette uses RGBA four channels for each color and supports translucency, while PNG24 only has RGB three channels per pixel, so PNG24 does not support translucency.

PNG24 and PNG32:

  • PNG32 has one more Alpha channel than PNG24 and supports translucency.
  • Most of the time PNG24 and PNG32 are not distinguished. For example, in PS, there is only PNG24 option, if the transparent option is checked, it means PNG32.

Going back to the PNG optimisation, as stated on tinypng’s website, the optimisation they used was to convert PNG24/PNG32 to PNG8. This optimization is also known as lossy compression for PNG.

PNG8 is generally used in general, but if PNG8 is too poor, it is recommended to switch to another format because PNG24 is much larger.

PNG has another optimization strategy mentioned above, interlacing PNG, which has the same effect and principle as progressive JPEG, but I won’t go into details here.

The advantages and disadvantages

  • Advantages: non-destructive, high quality, transparent support.
  • Disadvantages: Large size.

GIF

Summary:

  • Support animation, also support static GIF;
  • Supports a maximum of 256 colors;
  • Lossless compression;
  • Full transparency is supported. Translucency is not supported.

The general rule of thumb for GIFs is not to use giFs except for animations. For static gifs, PNG8 is superior:

  • The same palette has a maximum of 256 colors, and the PNG8 is smaller;
  • The same support for transparency, PNG8 support translucent;
  • PNG8 is also lossless compression (both can change the number of colors in the palette to lossy compression)

However, PNG8 is not always smaller than GIF, when the image is small to a certain scale, GIF will be smaller than other formats, such as: such a TWO-DIMENSIONAL code:

Since the QR code only has black and white, set the number of colors in the palette to 2 and export the 256 × 256 graph (unit: pixel) :

  • PNG8: 2.457KB
  • GIF: 3.402 KB

The graph is derived as 50 × 50:

  • PNG8: 648B
  • GIF: 425B

GIF as follows, can also scan code:

When exporting smaller images, GIF’s advantage becomes more pronounced. When the derived size is 20 × 20, the volume difference is double.

This leads to another use of GIF: simple color and super small size of the picture, you can use GIF, such as:

  • Some small QR codes;
  • Some ICONS or logos;
  • Data reporting, page monitoring using 1 × 1 px GIF.

The advantages and disadvantages

  • Advantages: Supports animation.
  • Cons: Animation is bulky and performance intensive (because GIF frames are not compressed).

WebP

WebP is a young image format developed by Google. At the same time, WebP is excellent:

  • WebP lossy files are 25% to 34% smaller than JPEG files;
  • WebP lossless files are 26% smaller than PNG files.
  • Support animation.

So we can basically say that using WebP when you can is an effective optimization strategy.

For more information, see Google I_O 2013 – WebP here.

The biggest problem with WebP is compatibility:

As you can see from the image, older browsers and Apple products are basically not supported.

To optimize the

The optimization of WebP is basically to solve the compatibility problem.

sniffer

The easiest way to check for browser support is to give the img element a.webp image (typically using a 1×1px Webp base64 string) and see if it loads properly. The basic principles are as follows:

var image = new Image();
image.onload = function() {
    / / support
};

image.error = function() {
    / / does not support
};
image.src = 'data:image/webp; base64,xxxxx';
Copy the code

Taobao, for example, uses similar technology,

<picture>The label

HTML5’s makes it possible to manipulate pictures in a variety of ways. 

<picture>
  <source srcset="xxx.webp" type="image/webp">
  <img src="xxx.jpg" alt="">
</picture>
Copy the code

The back-end to solve

The Accept request header

For the above scenario, you still need the front end to distinguish between JPG and webP. Of course, this judgment task can be done by the back end:

Front end:

<img src="/xxx/avatar_url">
Copy the code

For browsers that support WebP, the HTTP request header contains:

Accept: image/webp,xxxxxxx
Copy the code

The server returns the appropriate resource.

User-Agent

Usually we only request the URL of the image from the business server, and the image resource is placed on CND. This situation may require the business server to return appropriate CDN resources. For example, YouTube uses the User-Agent of AJAX requests to determine and return WebP resource urls for WebP-compatible browsers.

CDN

At present, many CNDS provide WebP format conversion function, and different formats can be specified by parameters. With the above mentioned ways, taste better. For example, Taobao:

To use in Chrome:

https://img.alicdn.com/xxxxxxxxx.jpg_.webp
Copy the code

To use in IE:

https://img.alicdn.com/xxxxxxxxx.jpg
Copy the code

YouTube is similar, except that the URL of the image is returned directly from the back end without the need for the front end rehash parameter.

In addition, some CNDS provide automatic judgment, which will return the appropriate picture according to the situation. In this case, all the format conversion and compatibility judgment issues are completed by THE CDN, front-end and back-end, no additional work is needed.

The advantages and disadvantages

  • Advantages: Support lossy compression, lossless compression and animation, and smaller size.
  • Disadvantages: poor compatibility and poor performance (the data in the video above: 5-10 times slower than JPEG encoding and 1.3 times slower than decoding).

SVG

For SVG basics see SVG Basics.

Features:

  • Vector image, magnification without distortion;
  • Plain text files are smaller and more compressible.
  • Embeddable in HTML;
  • You can modify the image content using CSS.

To optimize the

SVG exported using AI and Sketch contains a lot of metadata, such as layer information, empty attributes, extra empty words, annotations, and XML namespaces, which are not needed in the browser. Therefore, tools such as SVGO can be used to remove unnecessary information.

Also, because SVG is a text file, it can be compressed using GZIP.

I know very little about SVG, and that’s about it.

The advantages and disadvantages

  • Advantages: vector graph.
  • Disadvantages: high rendering cost; Not suitable for complex images.

Responsive picture

Nowadays, the pixel density of mobile phone screens is getting higher and higher, and the screen sizes of various devices are becoming more and more different. We need to:

  • Display different images on different screen sizes;
  • Use sharper (larger) images for screens with higher screen density.

Srcset and sizes

Take a look at the MDN documentation first, and if you’re still a little confused, take a look at this blog post.

Summarize the basic information:

  • Srcset and sizes<img>Attributes of an element;
  • Srcset: defines a collection of images for the browser to select;
  • Sizes: must be used in conjunction with the SRcset attribute; Its value is also a set of values that indicate the most appropriate picture through different media conditions;
  • Sizes are not required when srcset uses the pixel density descriptor;

Take an example;

<img
     width="100px"
     src="./img/1.png"
     srcset="./img/1.png 1x, ./img/2.png 2x, ./img/3.png 3x"
/>
Copy the code

Display 1.png on 1x screen; Display 2.png on a 2x screen; Display 3.png on screen 3X. Nx stands for DPR — Device Pixel Ratio.

Here’s another example:

<img src="./img/1-1.png"
    width="30%"
    sizes="(max-width: 500px) 100px, (max-width: 800px) 200px, (max-width: 1200px) 300px"
    srcset="./img/1-1.png 100w, ./img/1-2.png 200w, ./img/1-3.png 300w, ./img/1-4.png 400w"
/>
Copy the code

< span style = “max-width: 100%; clear: both; 800px) 200px, we expect the image CSS size to be 200px, because DPR == 1, so the browser displays a 200 × 1 = 200W image in the SRCset. Max-width: 100%; DPR=2; 800px) 200px, will also get the desired image CSS size 200px, because DPR = 2, so display a srCset 200 × 2 = 400W image.

<picture>The label

<picture>
    <source srcset="./img/2-3.png" media="(min-width: 800px)" />
    <source srcset="./img/2-2.png" media="(min-width: 500px)" />
    <img width="100px" srcset="./img/2-1.png" />
</picture>
Copy the code

Thetag has the sizes and SRcset attributes, as well as the Media attribute in the routine.

CSS Images

For images referenced in CSS, you can also use responsive images:

<style>
    .img {
        height: 100px;
        width: 100px;
        background-repeat: no-repeat;
        background-size: cover;
        /** ** */
        background-image: image-set(
            url('./img/1.png') 1x,
            url('./img/2.png') 2x,
            url('./img/3.png') 3x
        );
        background-image: -webkit-image-set(
            url('./img/1.png') 1x,
            url('./img/2.png') 2x,
            url('./img/3.png') 3x
        );
    }
</style>
<div class="img"></div>
Copy the code

Major browsers have supported it since 2013 or so, so far compatibility is ok, but prefixes are needed.

other

There are a lot of optimization strategies related to pictures. Here are a few of them.

  1. Base64, for small ICONS base64, can be directly hardcoded into HTML, to reduce HTTP requests; However, base64 strings are larger and consume more performance, not suitable for large images.
  2. Sprite: Classic solution for small ICONS, used to reduce HTTP requests. Not flexible enough; The more ICONS, the harder it is to maintain. Due to the popularity of Iconfont and SVG-related technologies, Sprite images have been used less and less.
  3. Iconfont: Vector icon, no distortion; Easy maintenance; CSS can be styled like text.
  4. SVG Sprite: Multi-color icon solution (see SVG basics for details).
  5. Lazy loading: Reduces data consumption, reduces concurrent requests, and improves user experience. The related implementation has many details that can be explored separately.
  6. preloadUse:<link rel=preload>; Increase image request priority.
  7. Caching images: Use HTTP caching to cache image resources.

The last

There is no universal optimization strategy, just choose the most appropriate optimization according to the application scenario:

  • Don’t use images if you can, use CSS and Iconfont instead.
  • Use vector graphics when appropriate.
  • Try to use small images.
  • Do not use PNG24 / PNG32 for large images.
  • Use PNG8 instead of PNG24 / PNG32.
  • Use WebP whenever you can.
  • Do not use GIFs for non-animated scenes.
  • .