You must have seen these two completely different JPEG loading methods!

Nowadays, there are a variety of image formats used by websites, but there is one image format that accounts for 74% of the usage. It is JPEG, the Joint Photographic Experts Group. The suffix of this kind of file is usually .jpg or .jpeg, which is a common picture type in photography.

JPEG and image compression

JPEG is a format for compressing images developed in 1992. It is currently the most commonly used image format on the Internet. It is mainly used for high-color-depth photos and complex graphics display. A JPEG image is an image processed with a lossy compression algorithm. When the image is compressed, detailed information will be lost. This is because the purpose of creating a JPEG image is to minimize the number of storage bits, thereby effectively reducing the file size.

Relying on compression to reduce file size can not only save disk space but also shorten the transmission and loading time. The shorter transmission time allows images to load faster on the website. However, in most cases, reducing the file size will have an impact on the content. In the case of photos and graphics, reducing the file size may result in reduced image quality. Excessive compression will make the file load faster but it will also seriously affect the viewing effect.

With the increasing speed of the Internet, especially in the 5G era, we also have ultra-high requirements for the clarity of pictures and videos. This leads to some websites, in order to ensure the clarity, the size of the picture is very large, we can not see the entire picture at one time when browsing, but need to wait for the picture to gradually load.

There are usually two types of JPEG content display used by websites.

• Baseline or standard JPEG
• Progressive JPEG

Baseline JPEG

This is a standard JPEG format compression, which is supported by some imaging products including digital cameras and image editing software. One of the most common applications of baseline JPEG is images rendered in web browsers. The baseline JPEG algorithm renders the image line by line while downloading and processing data from the network. When data arrives in the computer's buffer from the network, the data is processed in the form of a stream. Although the purpose of compressing data is to reduce the file size to speed up the download speed, it also depends on the speed of the network and the ability of the computer's CPU to process the data. If the application supports it, the GPU can also help to render large files. Large high-resolution RAW image files larger than 30 MP (megapixels) when compressed may take longer to download and decode. This will result in a line-by-line display from top to bottom that is more common when we view large images, that is, the top of the image is displayed first. Then it will load to the bottom line by line until the complete image is displayed.

This loading method often requires us to wait too long to see the complete picture when facing a particularly large picture, which can easily cause the website to lose users. For this reason, websites generally choose a relatively better way, Progressive JPEG (Progressive JPEG).

Progressive JPEG (Progressive JPEG)

Progressive JPEG (Progressive JPEG), or PJPEG, is one of the three popular compression modes of the standard. Progressive JPEG compresses photos and graphics in a specific way. Unlike baseline JPEG, PJPEG will first give the appearance of a blurred image when rendered in a web browser. Then start the image rendering bit by bit until it shows the fully rendered image. The browser actually interprets the image line by line, but provides a fuzzy preview of the complete image in the placeholder. As the rendering engine of the web browser processes the data, the contrast of the image begins to become clearer and more detailed. Until the final rendering is completed, the user will see a complete and clear image.

Of course, we have been emphasizing that nothing is perfect, and PJPEG also has shortcomings. Let’s take a closer look at its advantages and disadvantages:

But in comparison, PJPEG can play a very meaningful psychological effect, allowing users to have something to see without having to sit and wait for a large image to be slowly displayed on the screen.

Currently PJPEG is suitable for most commonly used browsers, including Chrome, Firefox, and Internet Explorer 9 and higher. Old versions of Internet Explorer had some problems when displaying progressive JPEGs, but this is only a small percentage of users. Browsers that do not support the progressive JPEG format will load photos like normal JPEGs.

Create PJPEG

Generally, when we use graphics editing software normally, the software will automatically save photos and graphics as ordinary JPEGs. If you need to create a progressive JPEG, you need to adjust it manually. For example, in Photoshop, after exporting the image as JPEG, check "Continuous" in the format to save it as PJPEG.

You can also use the free program software IrfanView to create progressive JPEGs.

what? What? You said it was too much trouble? Don’t be afraid, I’m going to enlarge it!

The cloud image processing supports direct output of progressive JPEG images, just use the image URL + spacer + /progressive/true parameter, you can use it if you want, don't be afraid of trouble!

If you are a website manager, if you are troubled by the way of loading high-definition large images, you can try progressive JPEG loading! In addition to supporting image output settings, the cloud image processing also supports 40+ functions such as image reduction, enlargement, cropping, image watermarking, text watermarking, sharpening, and Gaussian blurring, allowing you to change image processing in a different way. What are you waiting for, hurry up and give it a try!

Recommended reading

Best practices for storing time in MySQL

Ansible Quick Start