Image Optimization and Why You Should Use It
If a web page takes more than 3 seconds to load, almost 50% of visitors tend to leave that site. According to Khatkar, image optimization is the only solution to this problem. From attracting visitors to reducing site load time, image optimization is an important part of building a successful website.
If a web page takes more than 3 seconds to load, almost 50% of visitors tend to leave that site.
shopify.com
What is Image Optimization?
Image optimization is used to reduce the file sizes of images without sacrificing quality. Web images need to be in the right format, dimension, size, and resolution while keeping the smallest possible file size. Optimizing web images can be done by resizing or compressing.
Why Reduce File Size?
Page load speed depends on many factors from your web host to design. Websites that have less than 2 seconds load speed are the most loved by its users. According to HTTP Archive, on average, around 64% of a website's weight is images. If you are able to reduce the size of those images without compromising the quality, it will have a direct impact on load speed and user experience. If your images take too long to load, your prospective customer or web visitor will leave.
File Types
The three most common file types for web images are JPEG, GIF, PNG, and SVG. Before we get into how to optimize images, let's first go over file types and how they affect the same image when compressed. This image of boats on a beach is the original photo, it is a JPEG and is 443 KB in size.
443 KB JPEG
JPEG
JPEG (.jpg) images are the oldest and the standard for image file types. JPEG images can be compressed quite a big, which results in quality images with a small file sizes. The JPEG format allows for decent quality at a lower file size. You can see there is not much quality loss here.
Optimized JPEG vs. Original JPEG
GIF
GIF (.gif) images are used for simple images such as icons and decorative images. GIFS are mostly used to support animation files and are very trendy. GIF images are lower quality than JPEGs. They are great for plain images on a webpage, but for complex photos, GIFS are not the best option. The biggest issue is the loss of color range in this example.
Optimized GIF vs. Orignal JPEG
PNG
PNG (.png) images are becoming more popular. They support more colors than GIFS and don't degrade over time with re-saves. Be careful with PNG images because the PNG-24 can be over 3x larger than the PNG-8. Like the GIF, the PNG-8 degrades in quality in order to remain a low file size.
Optimized PNG vs. Original JPEG
To sum it up, in most cases, JPEGs will be your best bet. They provide the best quality for the smallest file size. Don't use GIFS for large images, the file size will be very large and it's hard to compress. Use GIFS for thumbnails and decorative images. PNGs can be a good alternative, but try using PNG-8 over PNG-24. They are good for simple images because of their small file size.
How to Optimize Your Images
Adobe Photoshop
You can reduce image file size using the "Save for Web" option in Adobe Photoshop. When using this command, you want to adjust the image to the lowest file size possible while keeping an eye out for quality.
File Path for 'Save for Web'
4-UP in Photoshop
In this example, you can see the difference between 4 different compression options. The top left is the original 1.54 MB JPEG image, the top right is a High Quality 109.1 KB JPEG image, the bottom left is a Medium Quality 55.3 KB JPEG image, and the bottom right is a Low Quality 33.59 KB JPEG image. Since JPEGs compress well, there is not a lot of compromise in detail.
Other Tools
If you don't have access to Photoshop, you can use several other tools:
Photoshop Express is a free app by Adobe.
PicMonkey is a great photo editing tool.
PIXLR is user-friendly and has a free app.
Canva is a more advanced image editor.
Squoosh has an easy interface and reduces file sizes.
In this digital world, every factor related to website performance matters. A good rule of thumb is to try to keep your images below 70 KB for web. This can be difficult at times, but it'll be worth it. Easily optimize images for your website and keep up the traffic flow.