Basic guide to optimizing images on the web - On modern competitive websites, it is important to optimize the image that your site will show to visitors, whether it's a new logo, case study or just the image you took with phone and just want to share it with your audience.
Most data transfers to display a website are used by images, so by optimizing the image size, a web page will load significantly faster. By reducing the number of bytes required to display a page, you can also reduce the time it takes for visitors to load the page. Optimizing web images is very important in terms of search engines, this will give priority to loading web pages faster especially on mobile devices.
This article aims to serve as a basic guide to optimizing web images for anyone who wants to load their pages faster.
Image file format and usage
There are three main types of image formats that you may encounter on the internet: JPEG, PNG and GIF or GIFV
GIF and GIFV can display animations and they support transparency. You may remember what a hobby site looked like in the '90s, everything was moving with beautiful fire or lighting effects on them. Almost all animations are GIF images.
Today, we can find them mainly on sites like reddit or 9gag and they are used because they load faster than video files and they don't have sound. GIFV is an improvement over the old GIF format and they support longer videos or animated videos.
GIFs are good and really the only option for displaying small videos or animations or when images need transparent parts or backgrounds.
PNG
PNG is an alternative to the GIF file format. It has lossless compression, which means that after compression, no data is lost, so ensure that the quality remains the same with smaller file sizes.
PNG also supports transparency unlike JPEG. PNG supports different color palettes and grayscale, making it an ideal solution for images with a reduced number of colors.
A PNG image is an ideal solution when transparency is needed or when the image contains only a few distinct colors. They are best used when images contain sharp shapes such as screen prints or rasterized vector graphics.
JPEG or JPG
JPEG is a lossy image compression format and is often used by digital cameras to store images. The JPEG format can easily handle natural images with smooth variations of tones and colors, as it is designed for this specific use case. This is the most common and most widely used image format, because most captured images can be very well compressed in JPEG format.
However, it has some disadvantages, namely that every time you edit and save JPEG images, some information will be lost and image quality will decrease with each iteration of the compression algorithm.
Optimize images for WEB
Choose the right format
This section will be easy once you know what are the strengths and weaknesses of the most popular image formats. Just to recap, if the image has sharp edges in it or it uses only a few colors, use the PNG 8 format, because it can handle 256 colors. If your image is more colorful and you don't want to lose any image quality, you can use PNG 24 or in extreme cases (more gradients, rounded edges and transparency) you have. PNG 32 can be used.
If you're not concerned about losing quality and your images have smooth variations like portraits or landscapes, you can use the JPEG format at 80 compression or if you really don't care much. quality, you can even go with JPEG 65 as this will greatly reduce your image file size.
Size photo
With modern digital cameras and mobile phones, 12 - 25 megapixel images can be easily created, translated into images, with really large resolutions, for example 4160 × 3120 or even higher. .
The first step in image optimization is to decide the resolution of the final image, which can vary from website to site, but you can use it normally or even look at it. rivals to see what resolution they are using. Typically, you can find images that are in the width of 1200 - 2000 pixels, they will still look great on a larger screen.
You can usually use 2 image sizes for really high-resolution devices like high-end desktops or 27-inch iMacs with 5K screens and for normal devices like capable monitors HD or FullHD. You can use the srcset attribute of the IMG html tag to indicate to the visitor's browser that there are different resolutions available for an image, so that it can download an appropriate image and display it. Marketing it.
Change the size
Once you have the resolution, you can go ahead and resize your image for that resolution.
It is worth noting that there are different modes in which you can resize images and an image editor like Photoshop can bring you different methods. In most cases, you can use the default, but always check the image obtained.
Optimization and delivery
There have been many improvements over the past few years in terms of image compression, especially for PNG and JPEG images. There are lots of free and paid solutions that will optimize your image, some with loss of quality and some with no.
If you are willing to sacrifice quality, you can have highly optimized images and with a much smaller file size than otherwise.
For PNG images, you can use pngquant, pngoptim or TinyPNG, even the Photoshop plugin. For JPEG files, you can also use TinyPNG or imageoptim.com, both of them provide great, highly optimized images and they also delete EXIF data, which is very useful if you don't want to give it. The exact location where the image was taken or the camera phone model, since these details are usually saved in EXIF data, are attached to the image.
If you are using the CDN that you should definitely look for, look around their interface as most of them have image optimization solutions, which can serve WebP format images instead of JPEG files ( CloudFlare, MaxCDN).
In addition to providing you with suggestions on optimizing your site content, Google Page Speed Insights also provides you with a downloadable ZIP file with images optimized by them.
Conclusion
In addition to making images appealing to your viewers, image optimization is also an important element of website speed optimization and user experience optimization. Hopefully, our guide to optimizing web images has helped you familiarize yourself with the basics of web image optimization.
Post a Comment
Post a Comment