Seemingly ordinary things often contain great wisdom. It may be normal to do seemingly ordinary things simply and well. If you can do ordinary things fine, do fine, this is unusual.
1. Introduction
Every developer in the development project, it is inevitable to deal with the image, optimizing the image seems to have become a required course. Image optimization is not only about performance optimization, but also about experience optimization. As for how to optimize the picture, there is no fixed way, only a specific scene, specific analysis, choose the appropriate scheme. Not much to say, the following is also a brief introduction to their own processing, some of the ways to understand. If you have a supplement, suggestions. Feel free to leave a comment in the comments section.
2. Conceptual usage
“Conceptual usage” is a word of its own confusion, may not be very accurate, because the word is poor, do not know how to describe. So in general, the way that this section is going to do it, it’s going to tell you how to do it, it’s not going to put code, it’s not going to put diagrams, it’s not going to do it. Just a general introduction, some of the ways that everyone will understand.
2-1. Image compression
This has no hidden meaning, it’s just to compress the size of the image. At present, I use more than two compression website is TinyPng and wisdom map. More convenient to use, the quality is basically consistent.
2-2. Base64 instead of small ICONS
For smaller ICONS, using base64 encoding instead can reduce HTTP requests. One drawback is that when converted to Base64, the encoding is larger than the original image, and the larger the image, the greater the difference. For ICONS around 1K, the base64 is about 1.1k-2k. If it is an 8K image, the base64 generated by transcoding may exceed 10K. As far as my own project development is concerned, only ICONS smaller than 4K will be transcoded.
2-3. Icon-font instead of icon
Since icon-font looks like a picture, it is actually a font.
Advantages: it is that the vector can be scaled, the size of the icon can be used, can also change the color, the use of no trouble.
Cons: A lot of files to import (.svg,.ttf,.woff,.eot). The file size is also large. It is recommended to use icon-font only when there is a certain amount of ICONS for a project. If there are several ICONS, use pictures instead. If you need to import more ICONS, icon-font is recommended.
Multicolor ICONS are not supported by icon-font. Multicolor ICONS are now supported by icon-font. It’s just not compatible.
2-4. Sprite figure
Sprite diagram is a lot of small pictures together, making a larger picture, and then used as the background image of the elements, positioning to the corresponding picture.
Advantages: Reduced HTTP requests.
Cons: Background positioning and resizing on mobile are a bit cumbersome.
In addition, there are two things to look for when using a Sprite chart
1. Do not merge all the images on the page. For example, integrating the logo will break the semantic structure of HTML. Do not merge banners with complex images
2. Try to combine only ICONS with similar colors in one image. If the colors are too different, the resulting image may be too large.
2-5. Responsive pictures
For example, a page has a size of 100*100, but the actual size of the image is 1000*1000. In this case, it is recommended to prepare an extra 100*100 picture. Otherwise, resources may be wasted.
2-6. Blend mode instead of color changing ICONS
For example, let’s say the page has this icon
In certain cases it’s going to be this color.
The same icon is different colors at different times. Icon-font can be implemented by changing the color. Or take two pictures. In addition to these two methods, using CSS3 mixed mode, the same can be achieved. Two lines of code.
<! DOCTYPE html> <html> <head> <meta charset="UTF-8">< span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;"#09f;display: inline-block; } img{ width: 100px; vertical-align: top; } img:hover{/* set mix mode */ mike-blast-mode: lighten; } </style> </head> <body> <div><img src="images/icon-good.jpg" class="u-icon"/></div>
<div><img src="images/icon-good.png" class="u-icon"/></div>
</body>
</html>
Copy the codeRunning effect
I’m going to show you mix-blend-mode, and I’m going to mention background-blend-mode. The usage is basically the same, except mix-blend-mode applies to HTML elements and background-blend-mode applies to elements’ background.
<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ display: inline-block; width: 100px; height: 100px; /* Set background */ background: url(images/icon-good.jpg) no-repeat center,#09f;background-size:100%; /* lighten; */ lighten; } </style> </head> <body> <div></div> </body> </html>Copy the codeMatters needing attention
1. The picture must be a solid color icon on a white background
2. Modern browsers that support this property
If the image is a transparent solid color background, the result will look like this
Due to limited space, this is all for hybrid mode for now, and I will write later when I find it interesting. See the resources below for more information.
Two lines of CSS code to achieve arbitrary image color technology
Incredible color blending mode mix-blend-mode
Incredible background-blend-mode
2-7. Use CSS to draw simple ICONS
There are some simple ICONS that you can use CSS instead. Like these
On my own, most of the drawings on the project are arrows
<! DOCTYPE html> <html> <head> <meta charset="UTF-8">
<title></title>
<style>
.icon-arrow-bottom {
width: 0;
height: 0;
border: 100px solid # 000;
border-color: #000 transparent transparent transparent;
}
.icon-arrow-top {
width: 0;
height: 0;
border: 100px solid # 000;
border-color: transparent transparent #000 transparent;
}
</style>
</head>
<body>
<div class="icon-arrow-bottom"></div>
<div class="icon-arrow-top"</div>
</body>
</html>
Copy the codeAdvantages: Vector scale, variable color, no need to send a request
Cons: Only good for simple graphics, 1-5 lines of CSS code is recommended, beyond that not recommended. Think painful, write also trouble, spend more time, the effect is not necessarily better than other schemes. The recommendation is base64, or icon-font.
Here is a simple example, need to know cSS3 can also draw what graphics. See Resources.
Pure CSS graphical effects
CSS Shapes
【CSS】 Draw ICONS with CSS
3. Implicit preloading
1. Start here. The following demo, some will use ecDo this library (write a common function library, welcome star). It was introduced in the previous article, so I won’t repeat it here. If you don’t know, click on the corresponding API, run it, debug it.
2. For the convenience of demonstration, in the following demo, except lazy loading, the network speed is adjusted to the slow 3G in the network.
Some project pictures are more, if a one-time load, the user wait time will be too long, may cause the experience effect is very poor, even lead to user loss, many websites use an experience optimization method is implicit preloading.
Wait for the first screen to load, and while the user is looking at the first screen (the first large image), quietly load the other images (the other small images on the project should not be on the first screen for display purposes here).
<body>
<p><img src="lawyerOtherImg.jpg"/></p> <p> This is the preloaded image </p> <div> <img data-src="https://materialdb.zhaoyl.com/201809/106796.jpg" class="load-img" width="100" height="100"/><img
data-src="https://materialdb.zhaoyl.com/201809/105567.jpg" class="load-img" width="100" height="100"/><img
data-src="https://materialdb.zhaoyl.com/201809/103097.jpg" class="load-img" width="100" height="100"/><img
data-src="https://materialdb.zhaoyl.com/201809/10205.jpg" class="load-img" width="100" height="100"/><img
data-src="https://materialdb.zhaoyl.com/201809/001.jpg" class="load-img" width="100" height="100"/>
</div>
</body>
Copy the code// To test, clear the cache first window.onload =function () {
ecDo.loadImg('load-img'.function () {
console.log('Loading complete')}); }Copy the codeNotes:
1. Presumably, when the user looks at the first screen, there is a high probability that they will look down.
2. In this mode, the waiting time is shorter. But the images are huge, so be careful. Because this method cannot ensure that the user can load the pictures of the next screen (for example, when browsing the first screen, to load the second screen) while browsing, so that the user is unaware. It can also affect the experience if the next screen to switch to is not fully loaded.
Demo:github.com/chenhuiYj/e…
4. Explicit preloading
Tell the user it’s loading, wait until it’s loaded and then render it on the page once.
<style>
div{
display: none;
}
</style>
<body>
<p id="p"<div id="div">
<img data-src="https://materialdb.zhaoyl.com/201809/106796.jpg" class="load-img" width="100" height="100"/><img
data-src="https://materialdb.zhaoyl.com/201809/105567.jpg" class="load-img" width="100" height="100"/><img
data-src="https://materialdb.zhaoyl.com/201809/103097.jpg" class="load-img" width="100" height="100"/><img
data-src="https://materialdb.zhaoyl.com/201809/10205.jpg" class="load-img" width="100" height="100"/><img
data-src="https://materialdb.zhaoyl.com/201809/001.jpg" class="load-img" width="100" height="100"/>
</div>
</body>
Copy the codelet oP1=document.getElementById('p');
let oDiv=document.getElementById('div'); // To test, clear the cache first window.onload =function () {
ecDo.loadImg('load-img'.function () {
oDiv.style.display='block';
oP1.style.display='none';
});
}
Copy the codeNotes:
1. Presumably, when the user looks at the first screen, there is a high probability that they will look down.
2. The advantage of this method is that after loading, all the pictures are loaded, and the experience is better. If all the images are too large, the loading time and loading time will be long, affecting the experience.
Demo address: github.com/chenhuiYj/e…
5. A lazy loading
This you should be familiar with, simply said that the image is not loaded at the beginning, when the user browse to what position, the corresponding position of the image will be loaded out.
<body>
<p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304'/></p>
<p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304'/></p>
<p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304'/></p>
<p><img data-src="https://materialdb.zhaoyl.com/201809/105567.jpg" class="load-img" width='528' height='304'/></p>
<p><img data-src="https://materialdb.zhaoyl.com/201809/106796.jpg" class="load-img" width='528' height='304'/></p>
<p><img data-src="https://materialdb.zhaoyl.com/201809/103097.jpg" class="load-img" width='528' height='304'/></p>
<p><img data-src="https://materialdb.zhaoyl.com/201809/10205.jpg" class="load-img" width='528' height='304'/></p>
<p><img data-src="https://materialdb.zhaoyl.com/201809/001.jpg" class="load-img" width='528' height='304'/></p>
</body>
Copy the codewindow.onload = functionEcdo.delayfn (ecdo.lazyLoadimg (ecdo.lazyloadimg (ecdo.lazyloadimg (ecdo.lazyloadimg (ecdo.lazyloadimg (ecdo.lazyloadimg (ecdo.lazyloadimg (ecdo.lazyloadimg)) {'load-img', 100, 'error.jpg'),100,200);
window.onscroll = function () {
ecDo.delayFn(ecDo.lazyLoadImg('load-img', 100, 'error.jpg'), 100200); }}Copy the codeDemo:github.com/chenhuiYj/e…
6. The default image is not loaded
In this example, when the Internet speed is relatively slow, the image that you want to load does not appear immediately. Or the picture path is wrong, at this time, the page may appear a part of the blank space, or the page layout will be confused, more common practice is to display a loading diagram or logo diagram. Tell the user that this is an image and it’s loading, and the experience will be much better, as in the following example.
Here is a simple implementation.
For example, there are pictures like this on the website
<p><img src="error.jpg" data-src="https://materialdb.zhaoyl.com/201809/105567.jpg" width="264"/></p>
<p><img src="error.jpg" data-src="https://materialdb.zhaoyl.com/201809/106796.jpg" width='264'/></p>
<p><img src="error.jpg" data-src="https://materialdb.zhaoyl.com/201809/1067961.jpg" width='264'/></p>
Copy the codeAt Network, the network speed is adjusted to the slow 3G to facilitate debugging.
// Please clear the cache before testing window.onload =function () {
let oImg=document.getElementsByTagName('img');
for(leti=0; i<oImg.length; i++){ ecDo.aftLoadImg({ dom:oImg[i], url:oImg[i].dataset.src, errorUrl:oImg[i].src }) } }Copy the code
As you can see, you start with a default image, wait for the image to load, and then load the image that needs to be loaded. (In the last picture, the path was written wrong on purpose, so the picture is the previous picture)
Demo:github.com/chenhuiYj/e…
7. Summary
On the project, the optimization of the picture of a variety of ways, their use, heard, probably here. The implementation scheme is not the best. If you have any better ideas or suggestions, please leave them in the comments.
— — — — — — — — — — — — — — — — — — — — — — — — — gorgeous line — — — — — — — — — — — — — — — — — — — —
If you want to know more, communicate with me, and promote the position, please add my wechat. Or follow my wechat official account: Waiting book Pavilion
