Optimize Website Design (): Do not scale images on the page

Preface

The optimization of website design is a big topic. There are some general principles and some suggestions for different development platforms. This research has never been stopped, and I have shared this topic on different occasions.

As a general principle, Yahoo's team of engineers once provided 35 best practices. For this list, see Best practices for speeding up your web site (http://developer.yahoo.com/performance/rules.html), they also released a corresponding test tool yslow http://developer.yahoo.com/yslow/

I strongly recommend that all website developers learn these best practices and apply them based on their actual projects. In the next period of time, I will combine the ASP. NET development platform and use a seriesArticleTo help you better understand and use these principles.

Preparations

Prepare the following development environment and tools to follow me for subsequent learning.

1. Google Chrome or Firefox, and install the yslow extension component. Please note that this component is provided by Yahoo, but there is no version for IE currently.
   1. Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. Https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. You should have some knowledge about the developer tools of these browsers. You can call up this tool by pressing F12.
2. VISAUL studio 2010 SP1 or later, Visual Studio 2012 is recommended
   1. Http://www.microsoft.com/visualstudio/eng/downloads
3. You need to have a good understanding of the basic development process and core technologies of ASP. NET. This series of articles is difficult to popularize basic knowledge.

Topics to be discussed in this article

I will discuss the 31st principle in this article: Do not scale images in HTML (do not scale the image on the page ).

To be honest, this wrong design was often used when I was designing web pages in the Early Years (because we often had a lazy mind and a convenient figure ).

Sometimes, the size of the image I can get is not that suitable (I have said that I usually do not make the image myself), but in order to display the desired size on the webpage, I would naturally think of scaling the image as follows:

 <  IMG   Width  = "100"  Height  = "100"   SRC  = "Mycat.jpg"   ALT  = "My cat"   />  

Scaling actually means:

Mycat.jpg: the original size of the image. By explicitly setting the image width and height, the final size displayed is 100px * 100px.

Obviously, after the browser downloads the original image, if the original size does not match the target size, the image needs to be scaled (stretched or reduced) to achieve the purpose just mentioned.

 

Therefore, remember and follow this principle: If you need to display images of any size on the webpage, ask the image designer to provide images of any size, instead of scaling the webpage.