Easy Tutorial
Android Tutorial Drawable Tool Android Tutorial Broadcastreceiver Shell Summary Brackets Android Tutorial Xfermode Porterduff4 Awk Work Principle Csharp Init Variable Programmer Joke 14 Sql Join Image Explain Android Tutorial Webview Error Code Es6 Reflect Proxy The Last Line Effect Programmer Joke 25 Game Programmer Awk Arrays Java Polymorphism Const Char Java Annotation C Assert C Language Pointer From Five Dimensions Verilog Compile Instruction Java Sorting Algorithm Analysis And Implementation Programming Range Awk Built In Functions Linux Tar Gz State Vs Strategy Android Tutorial Service 1 Bucket Sort Code God Annotation Appreciation Css Position Static Relative Absolute Fixed Android Tutorial Button Imagebutton Javascript Console Object Android Tutorial View Viewgroup Intro Programmer Joke 21 Nodejs Callback Func Eclipse Shortcuts Java Inner Class Intro Android Tutorial Edittext Java Protected Keyword Detailed Explanation Programmer Facial Package Summary Android Tutorial Sensor2 Android Tutorial Touchlistener Ontouchevent Php Namespace Intro Redis Intro Data Structure C Get Keycode Python Openssl Vulnerability Scanning Verilog2 Udp Logic Android Tutorial Exercise 2 Zookeeper Setup Python Docstrings Es6 Concise Tutorial Insertion Sort Best Python Ide For Developers Python Append Deepcopy Php Rounding Js Random Python Spider Intro Verilog2 Rtl Low Power Design 2 Verilog Fir Verilog Install Perl Output Chinese Warning This Program Uses Gets Which Is Unsafe Android Tutorial Handler Message Android Tutorial Sqlite 2 Zookeeper Bs Command Android Tutorial Canvas Api2 React Click Event Bind Localstorage Spec Css Nowrap Break Word Verilog2 Specify Prints Diamonds Triangles Rectangles Moible Web Front Source Android Tutorial Alarmmanager Funny Programmer Pictures Android Tutorial Json Decimal Decimals Are Converted To Binary Fractions Android Tutorial Project Src Analysis Es6 String Hdfs Cluster Html5 Canvas Zrender Cpp Header Cpp Vector Container Analysis Awk If Loop Android Tutorial Webview Cache Android Tutorial Popupwindow Verilog2 Gate Rsa Basic Idea Android Tutorial Httpurlconnection Sql Different On And Where Google Python Styleguide Verilog2 Tf Android Tutorial Intent Base Hadoop Tutorial C Volatile Keyword Npm Slow Use Cnpm Verilog Function Openresty Intro Javascript Qrcodejs Library Python Complex Intro Android Tutorial Valueanimator Verilog Process Structure Centos Mail Command Sendmail Verilog Numerical Conversion Structure Variables And Structure Types All Vim Cheatsheat Android Tutorial Baseadapter Python Variable References And Copies Android Tutorial Typeface Js Filter Lists Strlen And Sizeof Git Guide Javascript Basic Types And Reference Types Programming En Cn Javascript Number Capitalization Lua Table Length Analysis Android Tutorial Gridlayout Js Get Current Page Url Android Tutorial Fragment Demo4 Android Tutorial Listener Edittext Change Bit Operation Linux Common Command 2 Csharp Foreach Javascript Find Min Max Android Tutorial Socket1 Android Tutorial Contentprovider 2 Programmer 520 Cpp Difference Between Pointers And References Nginx Setup Intro Ssh Slow Verilog2 Real2Int Python Unboundlocalerror Android Tutorial Activity Js Timer Css Calendar Style Javascript Remove Array Item 2021 Frontend Learnpath Express 4 X Api Android Tutorial Shader Cloud Atlas Engineer Skills Es6 Setup Android Tutorial Drawable2 Find The Best Language Rogramming Languages Used In Most Popular Websites Http Vs Https Linux Shutdown Reboot Python Locals Globals Android Tutorial Radiobutton Checkbox Remainder And The Modulo Javascript Table Search Filter Programmer Joke 18 Javascript Var And Without Var Java Swing Demo Intro Android Tutorial Git Repo Create Es6 Tutorial Android Tutorial Webview Attention Verilog2 Codeguide Android Tutorial Togglebutton Switch Cpp Inline Usage Js Jquery Refresh Iframe Verilog2 Lower Power Design Android Tutorial Sqlite Intro Search Websites Recommand Javascript Image Modal Index Android Tutorial Upload File Android Tutorial Fragment Demo1 Zookeeper Node Feature Cpp Two Colon Usage Verilog2 Timing Check What Is A Virtual Method Intelligent Dev Ops Android Service Tutorial Docker Use Container Create Image Delegate Mode Android Tutorial Git Repo Operate Set Ssh Login Key Verilog Defparam Verilog2 Clock Linux Mysql Import Export Data Programmer Without Network Deconstruction Assignment Python Yield Used Analysis Android Tutorial Relativelayout Javascript Check Null Undefined Android Tutorial Activity Start Android Tutorial Notification Java String And Int Convert Php Develop Tools Python Redis Intro Android Tutorial Smsmanager Android Tutorial Fragment Demo5 Fastjson Intro Coreos Setup Pc Zookeeper Leader Quick Sort Android Tutorial Alertdialog Javascript Autocomplete Detect Empty Javascript Object C Array As Parameter Vue2 Start Coding Verilog Design Method Android Tutorial Interface Design Verilog2 Reset Php Delete An Element From An Array Android Tutorial Fragment Base The Different Of Jre And Jdk Android Tutorial Gridview Verilog Time Delay Database Implementation Svn Co Github Dir Android Tutorial Drawable3 Html Online Editor Zookeeper Tutorial Linux Shell Brackets Features Android Tutorial Ratingbar Es6 Array Programmer Joke 19 Python 5 Underline Android Tutorial Date Time 2 Shell Quick Start Ten Sorting Algorithm Es6 Class Java The Different Float Double Android Tutorial Textview Android Tutorial Socket Intro Android Tutorial Colorfilter1 Verilog2 Integrated Design Website Reward Button While Explain Programmer Alive Radix Sort Verilog2 Sdf Android Tutorial Download1 Cpp Func Setw Android Tutorial Listview Programmer Joke 15 Lets Encrypt Https Android Tutorial Xfermode Porterduff5 Google Chrome Shortcuts 10 Best Program Html Import Css Method Android Tutorial System Architecture Analysis Http X Forwarded For Programmer Joke 24 Android Tutorial Intent Pass Data Java Init Object Process Js Debugging Skills Redis External Network Android Tutorial Alphaanimation Android Tutorial Gestures Android Tutorial Vibrator Android Tutorial Tablelayout Octotree Github Repo C Void Intro Python Subprocess Basic Knowledge Summary Of Spring Cpp Virtual Functions Docker Clear Command Px Em Rem Different Runoob Tool Update Desc Zabbix Monitor Snmptrap Verilog2 Acc Python String Index Viewport Deep Understanding Android Tutorial Ansynctask Programmer Joke 20 Verilog Dds Linux Command Full Fight Es6 Module Javascript Or And And Android Tutorial Mediaplayer Css Search Bar Js Sort List Android Tutorial Sensor3 Npm Switch Repo Android Tutorial Exercise 3 Nvm Manager Node Versions Zookeeper Watcher Android Tutorial Broadcastreceiver 2 Verilog Number Android Tutorial Xml Android Tutorial Animation Php Session Login Android Tutorial Listview Update Php Different Include And Require Working Process Of The Compiler Builder Pattern Android Tutorial Bitmap1 Hadoop Skills Android Tutorial Adapter Android Tutorial Wallpapermanager Scrapy Detail Python Single Thread Multi Thread And Multi Process Verilog Loop How To Make Your Code Self Documenting Cpp Keyword Intro Mysql Different Nnodb Myisam Java Varargs Parameter 9Patch 9 Remove Black Line Window Getcomputedstyle Method Android Tutorial Shadowlayer Verilog2 Clock Switch Android Tutorial Canvas Api3 Cpp Multithread Demo Hex Dec Oct Bin Android Tutorial Scrollview Es6 Promise Android Animationdrawable Meta Verilog2 Gate Delay Java Transient Keywords Android Tutorial Camera Linux Check Port Usage Verilog2 Codestyle Jquery Check Id Is Exists Android Tutorial Telephonymanager 8 Awesome Awk Built In Variables Java Fail Ast Fail Safe Most Popular Javascript Code Specifications Zookeeper Sc 4Lw Scala Different Function Method Verilog2 Acc Sub Java Interface And Polymorphism Android Tutorial Fragment Demo3 Ios Dev Skills Android Tutorial Contentprovider Es6 Number Front End Developer Questions And Answers Ascii Quick Sort 2 Counting Sort Node Multi Version Verilog2 Slow2Fast Android Tutorial Sharedpreferences Es6 Async Tencent Open Source Android Tutorial Windowmanager 15 Php Mind Mapping Android Tutorial Toast Verilog Dividend Verilog Serial Fir Android Tutorial Http Verilog2 Udp Verilog Fsm Android Tutorial Gps Javascript Lightbox Big Data Require Skills Pycharm Import Python Package Cpp Return Array Safety Engineer Skills Hadoop Setup Pip Cn Mirror 2018 Web Developer Shortcut Key C The Structure Of The Parameter Android Tutorial Colorfilterl2 Verilog Competition Hazard Html5 Canvas Eccharts Composer Install And Usage Android Tutorial Spinner Android Tutorial Configuration Csharp Enum Verilog Case Verilog2 Delay Type Verilog Latch Verilog Timing Control Programming Language As A Pepole Verilog Testbench Verilog Statements Block Android Tutorial Socket2 Git Gui Window Mobile Testing Skills Android Tutorial Maskfilter Git Graphical Php Phpmailer 2014 Need To Learn Zookeeper Session Cpp Func Pointer Java Print The Triangle Onreadystatechange Attribute Learn Verilog Basic Syntax Android Tutorial Drawable1 Verilog Data Type Android Tutorial Sign Package Javascript Slideshow Viewport Template C Callback Function Download Js Facade Pattern 3 Chrome Skip Git Five Minutes Tutorial Android Tutorial Progressbar Cpp Static Usage Android Tutorial Soundpool Programmer Mobile Wallpaper Do Not Ignore Web Small Details C Swap Data Android Tutorial End Android Tutorial Bitmap Demo Programmer Joke 17 Cpp Std Thread Factory Pattern C Templates Detail Verilog Module Port Chrome Password Android Tutorial Colorfilter3 Verilog Tutorial Javascript Css Accordion Css Nav Bar Android Tutorial Webview Android Tutorial Exercise 5 All Vim Cheatsheat 3 Verilog2 Other Task Zookeeper Data Sync C Int2Str Verilog Fft Windows10 Java Setup Yaml Intro Programmer Joke 26 Java Composite Pattern 2 Android Tutorial Audiomanager Python Tower Verilog2 Random Filter Filterchain Filterconfig Intro Android Tutorial Decompile Apk Get Code Resources Javascript Toolbox C Static Effect Php Learning Recommend Github Tools Android Oom Android Tutorial Customer Baseadapter Js Call Apply Bind Android Tutorial Service 2 Android Tutorial Sensor1 Python Pip Install Usage Python Round Func Note Heap Sort C Constant Pointer Runoob Architecture Programmer Joke 22 Zookeeper Acl Android Tutorial Menu Android Tutorial Activity Intro Cpp Static Const Android Tutorial Xfermode Porterduff3 Verilog Process Assign Lua Table Length Hdfs Setup Android Tutorial Exercise 1 Android Tutorial Dialog Es6 Let Const Verilog2 Rtl Low Power Design 1 Java Knowledge Structure Diagram Android Tutorial Httpclient Js Get Url Param Verilog2 Setup Hold Time Python Ten Minute Introductory Tutorial Javascript Basic Reference Object Types Cpp Construct Function Initial List Weui For Weixin Web Android Tutorial Xfermode Porterduff Verilog Cic C Structures Intro Front End Standards Android Tutorial Canvas Api1 Verilog Intro Android Tutorial Autocompletetextview Inner Lambda Final Android Tutorial Webservice Bubble Sort Restful Architecture Js Filter Table Verilog2 Pli Intro Android Tutorial Download2 Android Tutorial Callback Event Handle Programmer Joke 16 Internet Organization Github Gcc Parameter Detail Verilog Pipeline Design Python Print Func B Android Tutorial Exercise 4 Closure Intro Verilog2 File These Pain Only Programmers Know C General Function C Dynamic Array Three Tier Architecture C Pointer Detail Hadoop Intro Android Tutorial Genymotion Install Cpp Enums Intro And Strongly Typed Es6 Function Verilog2 Fast2Slow Sql Join The Different Of On And Where Android Tutorial Sensor4 Android Tutorial Layoutinflater Implementation Of Merge Sort Css Percentage Calculation Vscode Tutorial Bridge Pattern2 Programmer Joke 27 Verilog Generate Android Tutorial Imageview Front End Engineers Required Skills Verilog Task Es6 Map Set Runoob Chm 15 Sorting Algorithms Visually Displayed Verilog Sync Verilog2 Udp Timing Intellij Idea Usage Android Tutorial Listview Item Scala Option Some None Android Tutorial 9 Image Python Func Decorators Verilog2 Tutorial Javascript Copy Clipboard Mysql8 Error 1410 42000 You Are Not Allowed To Create A User With Grant Programming Error Zookeeper Linux Cluster Css En Cn Break Line Android Develop Mvp Pycharm Windows Install Code Editor Mysql Stored Procedure Shell Process Substitution Android Tutorial Service 3 Verilog2 Clock Division Python Core Knowledge System Of Programming Px Pt Em Convert Table Csharp Polymorphism2 Web Image Optimization Android Tutorial Valueanimator2 Ubuntu Modify Dns Android Tutorial Listview Checkbox Chrome Extensions Recommended C Single Quotes And Double Quotes Verilog2 Logic Sumarry Bash Shortcut Javascript Check Arrayisobject Summary Of Network Html Meta Intro Verilog Condition Statement Nginx Proxy Balancing Matplotlib Tutorial View Ssh Public Key Mac Scala Chinese Show Python One And Two Star Php Get Url Suffix Programmer Joke 23 Css Search Box Android Tutorial Powermanager Mqtt Intro Android Tutorial Patheffect Python Partial Developer Love Php Web Development Android Tutorial Xfermode Porterduff2 Zookeeper Java Setup Python Understanding Dict Copy Shallow Or Deep Python Basic Datatype Free Html5 Css3 Loaders Preloaders Cpp String Array Pointer Es6 Generator Android Tutorial Listen Event Handle Scala Method Functio Different Java Abstract Interface Different Android Tutorial Android Studio Vmware Install Centos7 The Different This Super Php Remove Firsrt Array Element Embedded Engineer Require Skills Mapreduce Usage Front End Interview A Few Important Points Of Knowledge Js Filter Dropdown Android Tutorial Webview Download File Android Tutorial Bitmap2 Mapreduce Coding Android Tutorial Sdk Problem Solve Shell Read Line Db Solutions Android Tutorial File Jquery Check Element Is Hidden Android Tutorial Intro Clean Code Versus Great Code Cpp Enum Intro Java Compile With Package Html5 Canvas Clock Java Json Instro Android Tutorial Absolutelayout Cpp Const Keyword Android Tutorial Framelayout Linux Autologin Shell Verilog2 Display Open Source License Js Precision Problem And Solution Programming Intro Android Tutorial Mediarecord Reg Lookahead Lookbehind Webpack Tutorial Zookeeper Locks 25 Best Game Engine Libraries For Developers Awk User Defined Functions Js Delete Json Arr Merge Sort Android Tutorial Linearlayout Android Tutorial Fragment Demo2 Android Tutorial Listview Focus Java Math Floor Ceil Rint Round Verilog Deassign Cpp Virtual Function Android Tutorial Development Environment Build Verilog2 Level Modeling Float And Double Different A Beginners Guide To Web Development Struct Size Java Class Forname Python Print Without Newline Verilog2 Fifo C Bool True False Https Ssl Intro Javascript Window Onload Java Stringtokenizer Intro Js Sort Table Es6 Symbol Shell Sort Docker Tricks Js Redirect To Another Webpage Zepto Js Source Analysis C Matrix Exchange Android Tutorial Seekbar Javascript Get The Value Of Text Input Field Wx Xcx Repo Android Tutorial Viewflipper Cglibcode Generation Library Intro Htmlcss Make A Website Mac Os Ssh Pem Builder Pattern 2 Java Capture Group Linux Useful Command Css Style Priority Hbuilder Intro Android Tutorial Exercise 6 Html Windows10 Mysql Installer Macro Definition Verilog2 Tf Sub Android Tutorial Udp Socket Php Ajax Cross Border Javascript Promise Object Android Tutorial Viewpager Python Extends Init Js Timestamp2Date Javascript Search Auto Tip Zookeeper Znode Data Model Verilog Assign Windows Finds Port Usage Android Tutorial Contents Android Tutorial Eclipse Adt Sdk App Java Different Of String Stringbuffer Stringbuilder Getting Started With Typescript Div Scroll Javascript Modals Android App Develop Learning Python Dynamic Var Selection Sort Java Inner Class Summary Python2 Python Raw_Input And Input Java Printf Formate Demo Go Channel Intro Html5 Canvas Intro Android Tutorial Date Time 1 Android Tutorial Expandablelistview Cpp Reference Type Es6 Object Android Tutorial Http Response Header Verilog2 Low Power Facade Pattern 2 Android Tutorial Drawerlayout Verilog Expression Android Tutorial Webview Javascrip Java Transformation Problem Trinocular Operators In Lua
❮ Csharp Polymorphism2 Android Tutorial Valueanimator2 ❯

Web Performance Optimization: Image Optimization

Category Programming Techniques

The HTTP Archive has a statistic that image content accounts for 62% of the total volume of internet content, which means that more than half of the traffic and time are spent downloading images. From the perspective of performance optimization, images are definitely one of the hot spots and key points of optimization. Google PageSpeed or Yahoo's 14 performance optimization rules all regard image optimization as an important means of optimization. This article covers all aspects of web image optimization, from the selection of basic image formats to the responsive images that are not yet widely supported.

I like the statement from Google Web Fundamentals:

Image optimization is both an art and a science. It is an art because there is no best specific solution for compressing a single image, and it is a science because many well-developed methods and algorithms can significantly reduce the size of images. To find the optimal settings for images, it is necessary to analyze carefully according to many dimensions: format capabilities, encoding data content, pixel size, etc.

Do We Really Need Images?

Do we really need images to achieve the desired effect? This is the first question we need to ask ourselves. The development of browsers and web standards is extremely fast. I remember a few years ago when I was writing a video player with Microsoft Silverlight 1.0, Chinese characters could not use custom fonts, so I wrote a lot of bad code at that time to generate the required text as images on the server and cache it. Users download slowly, and search engines cannot retrieve these texts at all.

But now it's different. Many effects (gradients, shadows, rounded corners, etc.) can be implemented with pure HTML, CSS, SVG, etc. These effects require only a few lines of code, or load additional libraries (a normal photo is much larger than a very powerful effect library). These effects not only require very little space but also work well on multiple devices and resolutions, and can achieve better functional degradation on low-level browsers. Therefore, when there are alternative technologies, we should first choose these technologies and only add real images when it is necessary.

Alternative Technologies

Front-end engineers should maintain communication with designers and product managers to help them understand what kind of effects are "concise, efficient, and maintainable". After all, for CSS, changing the radius of a rounded rectangle can see the effect in real-time, but with images, at least you need to regenerate the images, cut and replace the resources. Retina, high-resolution screens, multi-size devices, these have all accelerated the development of non-image effects. Think about the unbearable appearance of Windows 7 on high-resolution screens, and you will know that native image resources are definitely not the more, the better.

Selection of Image Formats

If the effect really needs to be expressed with images, then choosing the image format is the first step in optimization. We often hear terms such as vector graphics, raster graphics, SVG, lossy compression, lossless compression, etc. We first explain the characteristics of various image formats.

Image Format Compression Method Transparency Animation Browser Compatibility Suitable Scenarios
JPEG Lossy Compression Not Supported Not Supported All Complex colors and shapes, especially photos
GIF Lossless Compression Supported Supported All Simple colors, animations
PNG Lossless Compression Supported Not Supported All When transparency is needed
APNG Lossless Compression Supported Supported Firefox, Safari, iOS Safari Animations requiring semi-transparent effects
WebP Lossy Compression Supported Supported Chrome, Opera, Android Chrome, Android Browser Complex colors and shapes, predictable browser platform
SVG Lossless Compression Supported Supported All (IE8 and above) Simple graphics, need a good scaling experience, need to dynamically control image effects

Among them, APNG and WebP formats appeared later and have not yet been adopted by web standards. They can only be adopted in specific platforms or browser environments that can be predicted, although both can be functionally degraded well in environments that do not support them, but this section does not discuss these two formats. The process of selecting image formats is as follows:

For color-rich photos, JPG is the universal choice

Since SVG is an XML-based format and is essentially pure text, GZIP compression can also be used to reduce the size for transmission. Of course, this requires some server configuration, such as setting in an Apache server:

AddType image/svg+xml .svg
AddOutputFilterByType DEFLATE image/svg+xml

This enables GZip compression for SVG files (you will also need to load the deflate module and configure it appropriately; the configuration of GZip is beyond the scope of this article, please search online for more information).

Optimizing GIF and APNG

GIF has many advantages, as it can significantly reduce the file size when the number of colors is low, and it is also the only image format that can display animations in a more universal way. I am not familiar with the principles of optimizing the GIF format, and only use established compression tools in the project. In the later section on automatic optimization, I will introduce the method of automatic optimization through Grunt Task.

Regarding APNG, the current browser support is not very good, but in scenarios that support HTML5, there is a mature open-source tool apng-canvas that can be used to support APNG.

Tencent ISUX team has an article introducing the iSparta tool: http://isux.tencent.com/introduction-of-apng.html. This is currently almost the only tool that can batch process APNG files, and interested students can learn more in that article.

Automatic Optimization

I have said too much about how to optimize various image formats and tools. Optimizing images requires a lot of repetitive work, and as engineers, we obviously will not tolerate this, so many tools have emerged to automatically optimize images. Here, I mainly introduce three methods: CDN, Grunt/Gulp, and Google PageSpeed.

Automatic Optimization: CDN

Using CDN to automatically optimize images, I rarely see such services from foreign CDN providers, but the two major new stars of domestic CDN, Qiniu and Upyun, have done a lot of work in this area. The way they work is that the URL parameters requested from the CDN include parameters for image processing (format, width, height, etc.), and the CDN server generates the required images according to the request and sends them to the user's browser.

The image processing interface of Qiniu Cloud Storage is extremely rich, covering most basic operations of images, such as:

The image processing interface of Qiniu Cloud Storage is not complicated to use, for example, the original image below:

We can request the following URL to crop the central part and generate a 200x200 thumbnail by proportionally reducing:

http://qiniuphotos.qiniudn.com/gogopher.jpg?imageView2/1/w/200/h/200

Automatic Optimization: Grunt/Gulp

Here, I introduce the Grunt component for image optimization: grunt-image. Repetitive work for front-end engineers, such as merging static resources, compressing JS and CSS files, compiling SASS, etc., can all be completed in batches using automated tools like Grunt, and image optimization is no exception.

grunt-image is very powerful, according to the author's introduction, the internal image optimization tools it loads include pngquant, optipng, advpng, zopflipng, pngcrush, pngout, mozjpeg, jpegRecompress, jpegoptim, gifsicle, and svgo. It supports batch automatic optimization of PNG, JPG, SVG, and GIF, and the speed is also good, and the configuration method supports single image optimization and full directory optimization:

``` module.exports = function (grunt) { grunt.initConfig({ image: {

❮ Csharp Polymorphism2 Android Tutorial Valueanimator2 ❯