Camera and photography technology are growing, making the capacity of the photos increasing. Beautiful and sharp images will be more appealing and impressive to web users. However, if left without trying to reduce the image size, it will negatively affect the website and user experience.
The effect is achieved when reducing the image size for the website
Large photos may not be a problem if you are a professional photographer or you are looking for big pictures as a wallpaper. But this is a serious problem for website designers.
We all know: more images will be more engaging and attractive, easier to pull and convey the message. And when visiting the website, users mostly prefer to view quality images, but are also afraid to wait for the images to finish loading.
Having to wait like this can make the visitors lose their patience. They will exit the page and you will lose all your resources.
Therefore, the solution to reduce the image size was born.
By reducing image size, websites can:
- Reduced waiting time for loading images, it means page load speed will be increased.
- Saving memory for the server (if you save images directly on the server).
The battle of compressed image formats: JPEG vs PNG
As you can see: almost the entire image file we download from the web has a .png or .jpg (.jpeg) extension. JPEG and PNG are both compressed image formats from the original image (RAW).
Compare JPEG and PNG
These two formats correspond to the current two popular image compression methods: lossy and lossless.
Lossy compression will result in a 90% reduction in image size. However, this way will change the quality of the image significantly, if the compression is too strong, it can break the image, blur the image, so that the human eye can also see.
Meanwhile, lossless compression means that the information of the image (color, brightness …) is not lost or only a very small fraction. But thanks to that, the size of the image will not decrease much.
JPEG – reduce the image size
JPEG is a lossy image compression method, it means that it will lose part of the image’s information. But do not worry because it will be hard to recognize this loss.
According to research, the human eye is better at recognizing the difference of brightness than the difference of color. Lossy compression mechanism searches and removes redundant, duplicated color information to reduce image size. The image we see is actually a grid of tiny pixels, when a few pixels are removed and does not affect the overall image. Even the most keen-eye will find this difference difficult.
JPEG stands for Joint Photographic Experts Group, a group of photographic experts who set the standard for this compression method. The way JPEG works is complicated: (1) separating the color channels of the image, (2) quantizing them based on the DCT (discrete consine transform) formula and (3) performing entropy coding so as to have the finished product.
Doing this helps JPEG reduce 90% of the original image size. This is an extremely impressive figure, helping a website freely use images to illustrate without fear of slow loading or running out of bandwidth.
However, JPEG is not very suitable for web images because the lossy compression algorithm will lose the quality of the images. If you compress too hard, it will blur the image, make the photo and the web worse. Pixels erased by a JPEG image can never be retrieved. Enlarging the image will cause some details to be broken because there are no pixels there. In addition, details that need high sharpness such as writing, textures will be blurred.
PNG
PNG (Portable Network Graphics) uses lossless compression algorithm DEFLAT – a combination of two compression technologies, LZW compression and Huffman coding. Instead of removing extra pixels like JPEG, PNG splits and encodes images into shortcodes (shortcodes) and saves them in a “dictionary” (or codebook) on the file itself. As a result, PNG can preserve the maximum quality for compressed images. If there is loss, it is also a very small part.
True to its name, PNG is suitable for web images. PNG is larger than JPEG, but all image information is preserved. This is essential for drawings or illustrations on the website.
In addition, PNG does not blur text as JPEG. PNG also supports transparency – something JPEG definitely can’t do – as well as animation support (APNG).
In general, using PNG for your website, you get a balance between page load speed and user experience.
Compare between JPEG and PNG
To be able to distinguish and determine the format that is right for you, take a look at the JPEG and PNG features to evaluate.
JPEG:
- Very small file size.
- Widely supported.
- The image quality is reduced, blurring is caused by excessive compression or enlargement of the image.
- Display of poor handwriting and sharp details.
- Ideally used for images with uniform background, large size details.
- No transparency supports.
PNG:
- File size does not change much, even increases when adjusting the quality after compression.
- Quality remains the same as before compression.
- Display well handwriting and details requiring sharpness.
- Great for images with heterogeneous backgrounds, small size details.
- Transparent support.
- Support animation with APNG.
As noted, PNG is more suitable for web images than JPEG. However, the final decision still depends on the purpose, detail and quality of the original image …
Other compressed image formats
GIF
GIF is the abbreviation for Graphics Interchange Format, which is also a lossless compressed image format. GIF can be considered a precursor to PNG when this format also uses the LZW compression algorithm. However, GIF has fewer features and performance is also significantly lower than PNG.
The GIF format supports a lot less color depth: 256 colors compared to 16 million colors of PNG. GIF also supports transparent background but is still simple, while PNG allows custom effects more or less transparent. And GIF compression performance is also lower from 5% to 25%.
Today, GIFs are only used to make many animations for online entertainment purposes. The reason is because GIF images are light, easy to make, easier to use while PNG and APNG are not so popular.
WebP – reduce the image size
WebP is a lossy image compression format developed by Google and is preferred for use in its products. As described by Google, WebP can be a potential replacement for JPEG and a serious competitor for PNG in the future.
WebP is an image format developed by Google
Google is famous for its artificial intelligence and how well WebP works. To reduce image size, WebP predicts color pixels by analyzing adjacent color pixels. When you look at that pixel, you will only see the image displayed after WebP’s algorithm analyzes the algorithm assigned to it. That pixel does not contain actual color values.
Therefore, the WebP format is 25% lower than the compressed image by other lossy methods, such as JPEG. And the image after compression is also similar in quality to the original image because WebP’s algorithm predicts very accurately.
The only problem with WebP is that it is new, not yet widely supported, and printing devices are not yet compatible. But with Google’s influence in the Internet world, we can see the bright future of lossy compressed WebP image format.
How to reduce the image size for the website?
You can manually edit the original image to reduce capacity by the following:
- Use plain and simple backgrounds for photos. You should avoid the use of cumbersome textures because the more complex it is, the more difficult it is for you to compress. It can make the size not small as expected.
- Eliminate redundant background space around the theme object (if you want). Sometimes when we use an image that is larger than we actually need, the background does not have much effect but makes the image heavier.
- Use Photoshop’s Resize tool or similar image editors to resize the original image.
- Choose “Save for Web” to save the image in Photoshop, so it is optimized for display on the web. You can do this after the Resize process above (if you want).
- Uncheck “Transparency” (for PNG) when saving an image if no transparency is needed.
- Use Photoshop’s Posterize tool if it does not change your image too much. This function collects similar colored pixels together, which is also a good way to reduce the size of your photos.
Finally, to maximize the amount of space you can reduce, you should still use image compression tools after fixing the original image.
You can use software for computers like FileOptimizer (Windows), ImageOptim (Mac), Trimage (Linux) … or online tools like CompressPNG, TinyPNG (recommended).
See also: The online image compression tools that do not reduce much quality
Conclusion
Thus, the article has pointed out the differences between the common image formats as well as how to reduce the image size for the web. It can be seen that, besides “the work” of compressing images to increase page loading speed, choosing the appropriate image type also plays an important role. In a nutshell, when designing websites, make sure the quality and image size are optimal for your users to have the best experience.