The Limit optimization strategy of Web front-end picture

With the development of the web, the traffic of website resources becomes bigger and larger. According to statistics, 60% of the website traffic are from the site pictures, visible to the picture reasonable optimization can greatly affect website traffic, reduce bandwidth consumption and server Pressure.

one, the existing Web image format

Let's take a look at the format of the web images that are commonly used today:

picture format	support transparent	animation support	Compression mode	Browser support	< Span style= "font-size:18px" > relative to original size	fit scene
baseline-jpeg	not supported			All	Determined by the image quality	All common scenes
progressive-jpeg				All	Determined by the image quality	All common scenarios, progressive loading
gif	support	support	Lossless	All	Determined by the number of frames and the picture size per frame	Simple color, animation
png	support	not supported	Lossless	All	The number of PNG color values determines the	When transparency is required
webp	support	not supported	lossy	Chrome, Opera	determined by compression ratio	< Span style= "font-size:18px" > complex colors and shapes, browser platform predictable
apng	support	support	Lossless	Firefox, safari, IOS Safari		Animation that requires a translucent effect
svg	support	support	Lossless	All (IE8 or More)		Simple graphics, need a good scaling experience, need to dynamically control image effects
Bpg	Support	Support	Lossy	Not supported, JS decoding required	determined by picture quality	Scenarios where extreme optimization is required on JPEG

Overview of the features of several file formats

• Baseline-jpeg
  This type of JPEG file is stored as a top-to-bottom scan, keeping each row sequentially in a JPEG file. When you open this file to display its contents, the data is displayed in the order in which it was stored, from top to bottom, until all the data has been read, and the entire picture is Displayed. If the file is large or the network download speed is slow, then you will see the image is loaded by a row of the effect, this format of JPEG has no merit, therefore, it is generally recommended to use progressive JPEG
• Preogressive-jpeg
  Unlike baseline scans, Progressive JPEG files contain multiple scans, which are stored in a JPEG file. In the process of opening a file, the blurred outline of the entire picture is displayed first, and as the number of scans increases, the picture becomes clearer. The main advantage of this format is that when the network is slow, you can see the outline of the picture knowing what the picture is about to be loaded.
  The effects of the two JPEG format files are as Follows:
  
• 
  JPEG advantages:
  Very versatile, JPEG can achieve its best results in color and colour-changing photographs or realistic painting (painting).
  JPEG disadvantage:
  It is not suitable for line drawing (drawing) and other text or diagram (iconic) graphics, because its compression method used in the shape of these shapes, will get inappropriate results;
• Gif
  The original meaning of GIF (graphics interchange Format) is "image interchange formats", GIF file data, is a lossless compression format based on the LZW algorithm (string table compression Algorithm) continuous TONE. is one of the most commonly used animation file formats in Web pages today.
  Advantage:
  1. Excellent compression algorithm to ensure that the image quality to a certain extent, while the volume becomes very small
  2. Multiple frames can be inserted for animation effects
  3. You can set a transparent color to produce an effect that objects appear on top of the background
• Disadvantage:
  Due to the use of 8-bit compression, up to 256 colors can be processed (2 of 8), it should not be applied to the true color Image.
• Png
  PNG files are divided into Png8 (8-bit transparent png), png24 (256-color png), png32 (multi-order transparent png), and PNG is a bit of using bitmaps to implement a transparent picture on the web for a better experience.
  
• 
  Advantages:
  1. Supports 256 color palette technology to produce small volume files
  2. Up to 48-bit true color images and 16-bit grayscale images are Supported.
  3. Supports the translucent nature of the alpha Channel.
  4. Gamma correction information that supports image brightness. -supports storing additional text information to preserve image names, authors, copyrights, authoring time, annotations, and More.
  5. Use lossless Compression.
  6. Asymptotic display and streaming read and write, suitable for quick display of preview in network transmission and then display the whole picture.
  7. Use CRC cyclic redundancy encoding to prevent file Errors.
  8. The latest PNG standard allows multiple images to be stored within a single file.
• Disadvantage:
  -but There are some software that cannot use the appropriate predictions, the resulting file is larger (IE6 only supports PNG8)
• Webp
  At present mobile end Android4.0 above, pc side Chorme (14 ~ 16 have render bug), opera 11+, Safri all support WEBP format Picture.
  WEBP and JPG compared, encoding speed is 10 times times slower, decoding speed is 1.5 times times slower, and most of the network applications, pictures are static files, so for users only need to care about decoding Speed. In fact, Although the WEBP will add additional decoding time, but because of the reduced file size, shorten the loading time, in fact, The file rendering speed has become faster.
  Picture loading test Sample
  Currently available applications on the Webp:
  1. 1. The client software, embedded in the chromium-based webview, the Web pages used in such browsers can be fully used in WEBP format, improve loading rendering speed, regardless of Compatibility.
  2. 2. The program developed with node-webkit, with WEBP can reduce the volume of the Package.
  3. 3. Mobile app or Web game, the interface needs a lot of pictures, can embed WEBP decoding package, can save user traffic, improve access speed
• Advantage:
  -for png images, WEBP is 45% smaller than png, but the downside is that you need to compress it longer;
  Disadvantage:
  -compatibility is not very good, only opera, and Chrome support;
• Apng
  In short, the apng format picture uses multiple, single-png animated picture formats to support Full-transparent channel Animations. Compared to GIF animations, there is no burr and higher quality, but the currently supported browsers are not Complete. You can go to can I use to see its compatibility. The current availability is relatively low and is suitable for situations where the quality of the animation is highly demanding.
• Svg
  is a vector image, support for transparent, zoom, animation, in addition to Android 2.3 mobile phone, Other scenes are supported, is a good picture substitution scheme.
  Advantage:
  1. Vector graphics, unaffected by pixels--svg This feature makes it perform well on different platforms or media, regardless of screen resolution
  2. SVG has better support for animations, and its DOM structure can be controlled by its specific syntax or javascript, making it easy to animate
  3. JavaScript can take full control of SVG Dom elements
  4. Svg's structure is XML, its accessibility (braille, sound reading, etc.), operability, programmability, CSS style can be the triumph of the Canvas. In addition, it supports ARIA attributes to make it more Powerful.
• Disadvantage:
  -dom is slower than normal graphics, and it's even slower if its nodes are more Complex.
  -not suitable for web games etc; of course, we can combine Canvas + SVG to achieve
• bpg
  HTTP://BELLARD.ORG/BPG /
  picture quality comparison
  performance test comparison
  BPG (Better Portable Graphics) is a new picture format. A scheme to replace JPEG and WEBP. This format mainly has the following characteristics
  advantages:
  1. high compression ratio. Much smaller than JPEG in the same picture quality
  2. Using a very small JS decoder can be supported by the browser
  3. Development of a subset based on HD video compression standard (HEVC)
  4. Supports the same color values as jpeg, and supports transparency in notifications of lossy compression,
  5. Single channel supports 8 to 14-bit color value area
  6. support lossy compression
  7. can add more metadata encoding
  8. support animation
  9. Less than WEBP on the premise of similar quality
• Performance:
  -according to Mozilla's research, the HEVC encoding used by BPG is better than the native HEVC performance because the BPG head is smaller than the HEVC head
  -support for 4:2:2 and 4:2:0 color value settings
  -BPG can be used to support HEVC codecs on hardware
  This image format is not currently supported by the browser and requires JS decoding, but its advantages are very obvious.
  In addition there are mozjpg, SHARPP picture format, as is still in the initial stage, here temporarily not introduced, interested can go to follow-up understanding.

second, The front-end picture optimization scheme

2. Use base64 encoding instead of picture
   Scenario: applies to pictures with less than 2KB size and a small number of pictures on the page
   Principle: convert a picture to a base64 encoded string inline into a page or CSS
   Advantage: reduce the number of HTTP requests, and can be placed in the background database, only transfer strings, there are more building tools can be directly implemented
   Disadvantage: This method is limited to the total number of pictures, and the picture size is less than 2KB case. Otherwise the picture string will become very long
4. Merge picture Sprite (sprite chart)
   Scene: any scene that uses a page picture
   Principle: combine the background images used on multiple pages into a large picture to refer to in the page
   Advantage: fewer requests can be effective, and without compromising the development experience, using build plugins can be transparent to developers. Suitable for many and rich scenes of page Pictures.
   Disadvantage: The resulting picture volume is large, reduce the number of requests and also increase the size of the picture, unreasonable split will not be conducive to parallel loading
6. Use css, svg, canvas, or iconfont instead of pictures
   CSS instead of pictures
   Scenario: applies to mobile or higher-level browsers, and draws a simpler pattern.
   Principle: CSS can be used to draw relatively simple groups instead of pictures, generally using before or after pseudo elements to enrich the complexity of the PATTERN.
   Advantages: simple implementation, Small picture size, can achieve a simple dynamic effect
   Disadvantage: also limited by CSS compatibility features, difficult to draw complex patterns
   The description and application scenarios for SVG are described Above.
   Canvas instead of picture
   Scenarios: images or animations that require high performance
   Principle: canvas elements for HTML5 create a picture
   Advantage: the whole is to draw 2D graphics, page rendering performance is relatively high, page rendering performance is affected by the complexity of graphics, the performance is only affected by the resolution of the graphics, the drawing can be directly saved as. PNG or. jpg graphics, suitable for drawing raster images or irregular graphics
   Disadvantage: no DOM operation, must rely on timers, text rendering performance is poor, can not add description (title property, etc.), compatibility limit
   Iconfont is a solution to a web font instead of a picture:
   Scene: instead of a single color picture on the page
   Advantages: good compatibility, wide application, and it is widely used at Present.
   Disadvantage: but because the color of the font set single, can only be used to replace the color of a single picture, for the color complex picture, iconfont processing is more difficult
8. Responsive picture
   Scene: different terminal for the same picture needs, you can load different pictures according to the terminal to save unnecessary traffic
   Principle: output different images for different terminal platforms through picture element, Picturefill or platform judgment
   Advantages: reduce unnecessary picture loading, flexible control, Slow user load small pictures do not load failure, mobile side no need to load large-size pictures, etc., can be compatible with all browsers in different ways
   Disadvantage: unable to avoid the picture loading process, The picture itself is not optimized
10. Image compression
    Scenario: if you have to load the picture, to further improve the optimization effect, only by lossy or lossless compression to reduce the size of the Picture.
    Principle: the image is lossless, lossy compression, converted to compressed image to achieve
    Advantage: reduce the image load flow, The effect is more obvious
    Disadvantage: Server and browser pressure increases, and the server requires additional service support
12. A better picture format
    Scenario: before talking about webp, bpg, SHARPP and other new picture formats have better compression ratios, you can use this kind of new picture to replace the original picture
    Principle: the image format conversion, in the case of picture quality can be acceptable to achieve a better compression ratio effect
    Advantage: reduce the image load flow, The effect is more obvious
    Disadvantage: Server and browser pressure increases, and the server needs additional service support, format conversion to consider browser compatibility

third, image Compression

There are many ways to compress pictures, such as some of the tools platforms Below:

Kraken (Web)

Home: https://kraken.io/

Smart Map

Home: http://zhitu.tencent.com/

Support the original PNG to JPEG and WEBP (currently does not support bpg), and provide a variety of compression ratio compression, is currently widely used within the TX.

Currently BPG format Pictures also have some companies in the Trial. This aspect can also be tried.

Iv. Summary

?? The above provides some formatting features of web pictures and picture optimization of the feasible solution, the specific scenario needs to consider the choice of different ways to Optimize. of course, the common optimization idea is: the page static resource picture using Css,canvas,svg,iconfont,sprite,base64 to optimize, the back of the background data resources picture is through the response, image compression to optimize, At the same time, consider using the new picture of higher compression ratio to do the image conversion as much as Possible. such as webp, BPG

Google Image Rearch Links

Tags: Front-End optimization , picture optimization

The Limit optimization strategy of Web front-end picture