How to improve the loading speed of picture display/sharing website?

Although experience is shallow, but good or bad is done a picture-oriented application. Humble opinions are as follows, please correct me.

First, to better answer this question, we may need to make a clearer definition of "increasing the loading speed of pictures." Assuming that the PO owner wants to ask "let the user feel the picture loading faster", there are probably several ways to help:

1. Reduce picture size

A) Compress pictures

For a picture, whether it's a picture or a more regular geometry, you can find a relatively good compression format. For example, JPEG can provide a high compression rate for ordinary photos, and PNG is better suited to geometry with clear edges. The appropriate compression formats and compression rates can be selected based on the main features and clarity requirements of the shared picture. For ordinary photos displayed on the Web page, the size of the following 50k can be reached after compression.

b Use thumbnails/multi-dimension versions

In the display of the picture, often need a different size. At this point, you can reduce unnecessary network overhead if you use thumbnails of the appropriate size for different sizes. For example, a smaller version is used in the list view, and a larger version is displayed after the click. Instagram uses a similar strategy: Http://distilleryimage7.s3.amazonaws.com/f4947c1004ca11e2a0c81231380ff428_7.jpg,url's final "_7" Refers to a size 7th thumbnail. Try to change the number to large or small, you can see the different size version of the same picture.

The disadvantage of using this strategy is that you need to transfer code when uploading pictures, which may increase the time required for uploading. Consider using either cloud transcoding or server-side processing.

2, improve picture transmission speed

A to use more high-performance picture hosting

It's generally not a good idea to store a large number of photos on your own server. When the volume of traffic is large, the own server may be under greater pressure and cannot easily increase server throughput with the amount of traffic. If possible, it is recommended to use a managed cloud store, such as Amazon S3 (AWS | Amazon Simple Storage Service (S3).

b Use CDN

CDN (content IBuySpy receptacle) can help visitors get content from more recent nodes, especially for picture class applications. Today's Cloud CDN many completely according to the number of requests and transmission flow charges, very suitable for the start-up period.

3, improve the degree of picture transmission parallelism

A to access a picture using more than one domain name

In most browsers, the number of concurrent HTTP requests under the same domain name is limited, typically several. When the number of pictures in the page, you can consider the allocation of the domain name to access. For example, the original image hosting domain name for http://image.foo.com, you can consider adding several subdomains, such as http://image-1.foo.com, http://image-2.foo.com, will they cname to http://image.foo.com. Then in your page, when you need to access the picture, randomly assign the domain name used.

4. Advance/delay Loading picture

To be exact, it means to load the picture when it is predicted that the image will be visible to the user. Lazy Load (http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/) is a common strategy Refers to the asynchronous loading of a picture when the viewport is about to arrive when the user scroll the picture.

In addition, if you are using graphics (buttons, icons, etc.) in the page UI, you can also consider using CSS Sprite (http://css-tricks.com/css-sprites/) to merge multiple network requests into one.