Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the methods of Web picture optimization". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the methods of Web picture optimization".

Images are one of the most basic content types available on web. They say one picture is worth a thousand words. But if you are not careful, the size of the picture can sometimes be as high as tens of megabytes.

Therefore, although network images need to be clear and lively, they can be reduced in size and kept at an acceptable level of loading time.

On my website, I noticed that the page size of my home page was larger than that of 1.1MB, with images accounting for about 88%. I also noticed that the images I provided were larger than they needed (in terms of resolution). Obviously, there was a lot of room for improvement.

I started reading Addy Osmani's excellent Essential Image Optimization e-books and began to optimize some pictures on my website according to their suggestions. And then do some research on the responsive image and apply it.

This reduces the page size to 445kb, about 62%!

What is image compression?

To compress an image is to reduce the file size while keeping the image within acceptable clarity. I use imagemin to compress the image on the site.

To use imagemin, make sure you have Node.js installed, then open a terminal window, cd to enter the project, and run the following command:

Npm install imagemin

Then create a new file called imagemin.js and write the following:

Const imagemin = require ('imagemin'); const PNGImages =' assets/images/*.png'; const JPEGImages = 'assets/images/*.jpg'; const output =' build/images'

You can change the values of PNGImages, JPEGImages, and output according to your needs to match your project structure.

In addition, to perform image compression, you also need to install the corresponding plug-in according to the type of image you want to compress.

JPEG/JPG

Advantages of JPG

JPG is characterized by lossy compression. This efficient compression algorithm makes it a very lightweight picture format. On the other hand, even if it is called "lossy" compression, JPG compression is still a high-quality compression: when we compress the image volume to less than 50% of the original volume, JPG can still maintain 60% quality. In addition, the JPG format stores a single image in 24 bits and can display up to 16 million colors, which is sufficient to meet the color requirements of most scenes, which determines that its quality loss before and after compression is not easily perceived by our human eyes-- provided you use the right business scenarios.

JPG usage scenario

JPG is suitable for rendering colorful pictures. In our daily development, JPG pictures often appear as large background pictures, broadcast pictures, or Banner pictures.

Defects of JPG

Lossy compression is indeed difficult to reveal on the broadcast graph shown above, but when it deals with images with strong linear sense and strong color contrast, such as vector graphics and Logo, the image blur caused by artificial compression will be quite obvious.

In addition, JPEG images do not support transparency processing, transparent images need to summon PNG to render.

Use MozJPEG to compress jpeg

Mozilla's MozJPEG tool is used here, which can be used as an Imagemin plug-in through imagemin-mozjpeg. You can install it by running the following command:

Npm install imagemin-mozjpeg

Then add the following to the imagemin.js of:

Const imageminMozjpeg = require ('imagemin-mozjpeg'); const optimiseJPEGImages = () = > imagemin ([JPEGImages], output, {plugins: [imageminMozjpeg ({quality: 70,}),]}); optimiseJPEGImages () .catch (error = > console.log (catch))

You can run the script by running node imagemin.js in the terminal. This processes all JPEG images and places the optimized version in the build/images folder.

I have found that setting quality to 70 will produce a clear enough image in most cases, but your project requirements may be different, so you can set the appropriate value yourself.

By default, MozJPEG generates progressive jpeg, which causes the image to load gradually from low resolution to high resolution until the picture is fully loaded. Because of the way they are encoded, they are also slightly smaller than the original jpeg.

You can use the command line tool provided by Sindre Sorhus to check whether the JPEG image is progressive.

Addy Osmani has well summarized the advantages and disadvantages of using progressive jpeg. For me, I think the advantages outweigh the disadvantages, so I insist on using the default settings.

If you prefer to use the original jpeg, you can set progressive to false in the options object. In addition, please make sure that the version of imagemin-mozjpeg changes, please review the corresponding document.

PNG (PNG-8 and PNG-24)

Advantages and disadvantages of PNG

PNG (Portable Network Graphics format) is a lossless, high-fidelity picture format. 8 and 24, here are the digits of binary numbers. According to the correspondence mentioned in our previous knowledge, 8-bit PNG supports up to 256 colors, while 24-bit ones can present about 16 million colors.

PNG pictures have stronger color expression than JPG, more delicate processing of lines, and good support for transparency. It makes up for the limitations of JPG mentioned above, the only drawback is that the size is too large.

PNG application scenario

As we mentioned earlier, complex, color-rich pictures will be more expensive to deal with with PNG, and we will generally give them to JPG for storage.

Considering the advantages of PNG in dealing with line and color contrast, we mainly use it to render small Logo, simple color and highly contrasting pictures or backgrounds.

Optimize PNG images using pngquant

Pngquant is my tool for optimizing PNG images, and you can use it through imagemin-pngquant:

Npm install imagemin-pngquant

Then add the following to the imagemin.js file:

Const imageminPngquant = require ('imagemin-pngquant'); const optimisePNGImages = () = > imagemin ([PNGImages], output, {plugins: [imageminPngquant ({quality:' 65-80'})],}); optimiseJPEGImages () .then (() = > optimisePNGImages ()) .catch (error = > console.log (error))

I found that setting quality to 65-80 is a good compromise between file size and image quality.

With these settings, I can get a screenshot of my website from 913kb to 187kb without any obvious visual loss, an astonishing 79% drop!

These are two files. Take a look and judge for yourself:

Original image (913kb)

Optimized image (187kb)

WebP

Advantages of WebP

WebP is as easy as JPEG to detail-rich images, transparent like PNG, and capable of displaying dynamic images like GIF-it combines the advantages of multiple image file formats.

The official introduction of WebP makes this point more authoritative:

Compared with PNG, the size of WebP lossless image is reduced by 26%. Under the equivalent SSIM quality index, WebP lossy images are 25-34% smaller than similar JPEG images. Lossless WebP supports transparency (also known as alpha channel), requiring only 22% extra bytes. For cases where lossy RGB compression is acceptable, lossy WebP also supports transparency and usually provides three times the file size compared to PNG.

Provide WebP images to browsers that support them

WebP, a relatively new format introduced by Google, aims to provide a smaller file size by encoding images in lossless and lossy formats, making it a good alternative to JPEG and PNG.

The sharpness of WebP images is usually comparable to that of JPEG and PNG, and the file size is much smaller. For example, when I converted the screenshot from above to WebP, I got a 88kb file with the same quality as the original 913kb image, reduced by 90%!

Look at these three pictures. Can you tell the difference?

Original PNG (913kb)

Optimize PNG Image (187kb)

WebP images (88kb, browsable in Chrome or Opera browsers)

Personally, I think the visual effects can be compared, and the size of the savings can not be ignored.

Now that we've realized the value of using the WebP format where possible, it's important that it doesn't completely replace JPEG and PNG, because browser support for WebP is not common.

At the time of this writing, Firefox, Safari, and Edge are all browsers that do not support WebP.

However, according to caniuse.com, more than 70 per cent of global users use browsers that support WebP. This means that by using WebP images, you can provide a faster web page and a better experience for about 70% of your customers.

Install it and run the following command:

Npm install imagemin-webp

Then add the following to your imagemin.js file:

Const imageminWebp = require ('imagemin-webp'); const convertPNGToWebp = () = > imagemin ([PNGImages], output, {use: [imageminWebp ({quality: 85,}),]}); const convertJPGToWebp = () = > imagemin ([JPGImages], output, {use: [imageminWebp ({quality: 75,}),]}) OptimiseJPEGImages () .then () = > optimisePNGImages (). Then () = > convertPNGToWebp (). Then () = > convertJPGToWebp () .catch (error = > console.log (error))

I found that setting quality to 85 produces WebP images of the same quality as PNG but much smaller. For jpeg, I found that setting quality to 75 strikes a good balance between visual and file size.

Provide WebP images in HTML format

Once you have WebP images, you can use the following tags to provide them to browsers that can use them, and use png or jpeg to browsers that are not compatible with WebP.

Using this tag, browsers that understand the image/webp media type will download the Webp picture and display it, while other browsers will download the JPEG picture.

Any browser that is not supported will skip all source tags and load the bottom img tag. As a result, we gradually enhanced our page by providing support for all browser classes.

Note that in all cases, the img tag is what is actually presented to the page, so it is indeed a necessary part of the syntax. If you omit the img tag, no images are rendered.

The tag and all the source defined in it are there so that the browser can select the path of the image to use. After you select the source image, its URL is passed to the img tag, which is what is displayed.

This means that you don't need to style or source tags, because browsers don't render them. Therefore, you can continue to use the img tag for styling as before.

Thank you for your reading, these are the contents of "what are the methods of Web picture optimization?" after the study of this article, I believe you have a deeper understanding of what the methods of Web picture optimization have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.