Image format

The difference between different image formats lies in the different algorithm combinations used in lossy compression and lossless compression.

JPEG

JPG or JPEG is the most common image format.

Lossy is a format for lossy compression algorithms. High compression rate can be obtained by removing the correlation redundant images and color data, which can compress the image into a small storage space and cause image data damage. If you want to use high-quality images, you can’t use excessive compression ratios.

The advantages are that it can support extremely high compression rates and file sizes can be very small. The disadvantages are that the image quality is compromised and transparency is not supported.

PNG

Is to replace the GIF file format and produced, adding some features that GIF does not have. Is a format that uses lossless compression algorithms.

Better color presentation than JPEG, sharper edges, transparency and, of course, larger file sizes. This is mainly used when displaying the logo.

GIF

Color effect is the lowest, with a high compression rate, generally around 50%, but also support transparent display. That is, it is suitable for display in less colorful occasions.

Mainly logo icon display, now should have been replaced by PNG format, the other is mainly used in GIF display.

WebP

Released by Google in 2010, it offers both lossy and lossless compression file formats, transparency and animation features, better compression algorithms, smaller image sizes, and near-flawless image quality.

Other than the lack of support in Safari (only available after macOS 11), and the lack of compatibility on IOS, all major browsers currently support the format (with the exception of the near-obsoleted Internet Explorer).

But for now, WebP is still seen as a more efficient and efficient alternative to PNG.

SVG

Is based on XML vector graphics, image processing is not based on pixels, but by shape outline, screen position description.

The biggest advantage is that the graphics can be arbitrarily enlarged without compromising the image quality, in any resolution can be high quality display. It is also smaller and more compressible than JPEG and PNG files.

AVIF

Developed by the open source organization AOMedia and only unveiled by Netflix last year, it is a new open image format based on the AV1 video decoder. Supports lossy and lossless compression, transparency and even animation, which can provide higher color depth.

According to official improved images, AVIF has nearly 59 times more compression performance than lossless PNG. Compared to JPEG, the size is 10 times smaller with the same image quality.

Of course, although AVIF compression performance is excellent, compatibility is not enough now. After all, it is new and has a long way to go.

Image compression

Image compression is a common technique, the image quality in a controllable range of compression is usually not visible, so in the range of maintaining clarity can be appropriately compressed image size, especially in the background of the time.

Lossy compression

Lossy compression refers to the irreversible loss of image quality (i.e. image paste) in the process of compressing the file size. JPG images, for example, use lossy compression.

Lossless compression

Lossless compression refers to the process of compressing an image without any loss of quality. PNG and GIF, for example, use lossless compression.

Engineering can directly use webpack configuration image-webpack-loader for image compression.

Image space

If you have a large image on your page, consider splitting the image. After all, it’s our development that often needs to be compromised.

It is suggested that the size of a single soil picture should not exceed 100K. After segmentation, we splice the picture together through layout. Images can be loaded efficiently.

Note here that each image after segmentation must be given height, otherwise the slow Internet speed will obviously see the page content height from zero to zero.

Pictures to choose

We often think that the higher the quality of the image, the better. Sometimes we will use a high pixel image in a smaller node container, but this will not make people feel clearer, but will greatly reduce the loading speed.

So, don’t zoom in and out in HTML, use whatever size you want, and try to fix the size of the image.

Another situation is that the page is displayed in thumbnail first, and then the full image is displayed after the mouse is moved in. This kind of loading the large image at the beginning will also affect the loading speed. You can consider using two images. Or lazy loading when just using large images.

Image preloading

Simple understanding: is in the use of the image resource, first load to the local, really to use, directly from the local request data on the line.

Image preloading refers to loading images into the local cache in advance on some websites that need to display a large number of images to improve user experience.

Normally, images are preloaded by setting the SRC attribute of the instance object in the javascript Image object.

const image = new Image();
image.src = 'xx.jpg';
Copy the code

Lazy loading of images

Lazy loading, or lazy loading, is a way to optimize web performance, and we use lazy loading for things like waterfall streams. After all, loading too many images at once will cause JS parsing to be slow and the page will take too long to load.

When you visit a page, load only images that are visible on the page, and only load those images when scrolling brings other images into the viewable area of the browser.

There are many ways to implement it:

1. In the code, do not set the image SRC attribute for the moment, first write the path in data-src, only when the image appears in the visible area of the data-src value assigned to SRC.

2. The image can be loaded in the CSS background-image, and the label can use the class name to control whether to use the current style, just like the control of show and hide, to achieve the purpose of lazy loading.

3. Native loading is supported by lazy.

Ps: data-src is a custom attribute and can be named by any other name

Reactive loading

Responsive images are images of different sizes displayed on different devices with different resolutions. The advantage is that the browser can automatically load the appropriate image based on the screen size.

A common implementation is @media via CSS

@media screen and (min-width: 768px) { img { background-image: url(1.jpg); } } @media screen and (max-width: 767px) { img { background-image: url(2.jpg); }}Copy the code

Through picture

<picture>    
    <source srcset="1.jpg" media="(min-width: 768px)">    
    <source srcset="2.jpg" media="(max-width: 767px)">    
    <img src="2.jpg" />
</picture>
Copy the code

“Picture” must be “IMG”. Operations on “picture” end up in “IMG”. In addition, using Source, you can also do some compatibility with the image format.

Avoid SRC being null

The SRC attribute of the IMG tag will still make an HTTP request if it is an empty string, so to avoid this, I think you can leave it out, but don’t make it empty.

Setting the SRC of the Image object to empty in JS is the same as setting the SRC of the Image object to empty in HTML.

Sprite figure

Simply put, this is done by stitching together several small ICONS into a larger image and minimizing HTTP requests.

It is mainly used for the display of small ICONS.

Under HTTP 1.1, the maximum number of concurrent requests from same-origin domain names is 6 in Chrome and 8 in Firefox. If the number of concurrent requests exceeds this value, multiple concurrent requests are required, which affects page loading performance.

If you combine these images into a single large image, it only takes one request. And the total volume of multiple images is smaller than the sum of all the previous images. Reduce server stress, reduce concurrency, and reduce the number of requests.

iconfont

Sprite art is a technique used by many websites, but there are downsides: the hd screen can be blurry and can’t dynamically change colors like inverts. Using icon font can perfectly solve the above problems, at the same time, good compatibility, small file generated advantages.

Font icon is to make the icon into a font, use the same as font, you can set the properties. And the font icon is a vector graph, not distortion. Another advantage is that the generated files are extremely small.

Whether it is a compressed picture, or a Sprite picture, or a picture, as long as it is a picture, it will still occupy a lot of network transmission resources.

Vector graphics can do a lot of the things that images can do, and it’s just inserting characters and CSS styles into HTML. They’re not on the same order of magnitude of network traffic as image requests. If you have a lot of small ICONS in your project, use vector graphics.

Chinese (font chart), now a more popular use. There are several benefits to using font diagrams

  • vector

  • lightweight

  • Easy to modify

  • Does not occupy the image resource request.

favicon.ico

This is the site avatar, which represents the site, just as our photos represent us.

Favicon. ico is set in two ways:

1. The file is stored in the root directory. The browser requests this file regardless of whether the page is set.

2. In the link tag, the location and name can be arbitrary. This approach is also for individual pages.

So if it’s in the root directory, make sure it’s there to avoid 404.

Of course, the format does not have to be ICO, PNG, JPG are also ok.

base64

Images in a web page need to be downloaded, which sends a request to the server. Using Base64 is an encoding method that the browser automatically parses, eliminating the need to send a request to the server and downloading it along with the HTML. Base64 uses the Data URI scheme to embed images in HTML or CSS.

<img src="data:image/jpeg; <img SRC ="data: file type; Encoding method, encoding content ">Copy the code

Generally suitable for small, single color level of the picture, if the picture is complex, it is not suitable to use, so that the amount of code after coding will be particularly large, compared with the number of requests saved, the increase in file size will bring more consumption.

In the engineering can be set up in webpack URL-loader image base64.

CSS drawing

Some simple display content can be achieved with CSS rather than using the UI to provide images, such as triangles, which is better.

There is also a display in different states, such as rounded corners, gradients, shadows, etc., there is no need to prepare multiple pictures, only need CSS to process an image for the required different effects.

The same is true for displaying text on an image, which can be added by code rather than using an image with text.

The downside may be that some of the graphics can be too complex and the development cost will be high, which is a choice that needs to be evaluated by the developer himself.

Progressive images

Progressive image means that the lower image is displayed before the higher image is loaded. Low quality version due to low picture quality, high compression rate, small size, fast loading. In between we can also display different image quality versions as required.

Progressive images give users the impression that images load faster. Instead of staring at a blank area waiting for an image to load, the user can see the image become clearer and clearer, which is also user friendly.

Skeleton screens do the same thing, showing a diagram of the overall page structure (which can also be done in code for optimization purposes) before showing the content.

Image loading failed

Images are also requested from resources, which can fail to load, so developers need to consider how to handle this situation. When it doesn’t load, replace it with another TAB, reload it by clicking on the image again, or just show a failed icon or something.

summary

To understand the pros and cons of different image formats, you can find a suitable file format in the selection of display and image size, which is a key start of image optimization.

Reactive loading, image separation, and selection reduce the size of HTTP request resources for faster page loading.

Avoid SRC empty, Sprite, iconfont, base64 and other methods of choice, is effectively reducing the number of HTTP requests.

Preloading, lazy loading, and incremental is the optimization of the user experience, which effectively allows the user to see the displayed page in a shorter time.

The processing of loading failure is the optimization of interactive experience on the whole basis.

Zhejiang Dahua Technology Co., Ltd.- Soft Research – Smart City Product R&D Department Recruitment senior front-end ！！！！！ Welcome everyone to chat, you can send your resume to [email protected], join us, we can progress together, dinner together, travel together, let us from the world village partners into dahua village partners.