The Ultimate Cheat Sheet for Image Optimization
By Victor Gartvich (LinkedIn)
Need a quick and easy way to improve website performance? Consider optimizing your images. We’ve created an ultimate cheat sheet for image optimization that will help you reduce page loading time, decrease the weight of your page, generate more traffic and save money on your CDN bill. Oh, and you don’t need to be a web designer – you can do it all by yourself .
In this post, we will discuss the following aspects of image optimization:
- Sourcing free images
- Picking an image file type
- Compressing and resizing images
- Optimizing images for SEO
Sourcing free images
None of us have the time, and most of us don’t have the talent, to take all the pictures we are going to need on our website. Commissioning original photography is recommended for featured product or company photography but this gets very expensive quickly. Never fear, there are lots of sites that have thousands of cost effective images for your to select from and many of them are royalty free. . Most sites will clearly indicate what rights you have to use the images, but be careful that you do not infringe copyright or use any images without permission. Here are a few sites that allow you to use their images for free without having to ask permission or give credit to the artist or image creator. Here are few of those sites:
Picking an image file type
When choosing an image, it is important to pick the right file type. Picking the wrong file type can distort your image and slow down your site speed. The three most popular file formats for uploading images to the web are JPEG, GIF and PNG – they account for over 96% of the Internet’s image traffic. Let’s look at how these three file types can impact your images.
JPEG (Joint Photographic Experts Group)
JPEG has become the universal standard for displaying images on the Internet. It is a popular format because it offers the best quality and the smallest file size. The jpg format can optimize images with a large range
of colors and gradients. However, it does not support transparency and uses lossy compression, which means your image will lose quality once it’s saved as a JPEG. This can also can make your images degrade over time, but this will happen only if you open a JPEG image in an image editor and try to re-save it.
GIF (Graphics Interchange Format)
GIF is the oldest file type of three common file types, and unlike JPEG, it uses lossless compression and allows for transparency in an image. When compared to JPEG images though, GIFs have lower quality. So, it is best to use GIFs for plain and simple images like logos, icons, or solid color graphics. GIFs should never be used for large, complex images or photos, if so, they will be unattractive.
PNG (Portable Network Graphics)
PNG images are becoming more and more popular and are alternatives to GIFs; however, they support many more colors than GIFs. The PNG format also uses lossless compression, which means images won’t degrade as with JPEG.
The PNG format is great for both solid color graphics and continuous color images; it also supports transparency. One big drawback, however, is that older versions of Internet Explorer do not render PNG files very well, particularly those with transparent backgrounds. Also, PNG formatted images tend to be larger in size when compared to JPEGs and can result in slow processing time or load time.
There is also WebP file format; it is a modern image format developed by Google and employs both lossless and lossy compression for images on the web. It also supports transparency and allows you to create smaller, richer images for a faster website. According to Google’s WebP documentation:
“WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels.”
Check out Wikipedia for more details on different file formats.
Compressing and resizing images
By now, you’ve selected the images you want to use and have chosen an appropriate image file type. Now, on to a more important matter: image compression. By compressing your images, you can make your pages load faster and reduce the overall weight of your page. We recommend you use an image compression app like our nuu:bit Image Optimization solution. Here are a few benefits you can experience if you use our nuu:bit Image Optimization solution:
- Images are resized and optimized automatically without changing your existing website workflow.
- Pages will load faster reducing payloads by more than 60%.
- Experience CDN savings where you only pay for optimized, resized image bandwidth.
- Get proactive device detection with accurate identification and optimization for an expanding world of mobile, desktop, and even wearable devices.
- Integration with leading e-commerce platforms is simple and easy.
- Images are automatically converted to WebP format, if nuu:bit detects that your device or browser supports the format.
Our nuu:bit Image Optimization solution provides a quick and easy way for you to reduce the file size of images without losing any image quality. It’s easy to set up and maintain, and is optimized for both desktop and mobile. The best part is you can try it for free for 30 days. Sign up today.
Optimizing images for SEO
In addition to optimizing the display properties of your images, you should also optimize your images for SEO.
- Image filenames – Image file names should describe your images, and they should include relevant keywords rather than generic names such as 12345.jpg or TFE234.jpg. This will make it easy for search engines to rank your images higher in the SERPs.
- Image Alt text – The alt text, also referred to as alt tags, describe an image and its purpose on a page. Like filenames, the alt text should be descriptive and SEO-friendly. But be careful to avoid keyword stuffing which can lead to your website being penalized on major search engines. Adding the right alt tags to your images can help your website achieve higher rankings in search engines as it’s one of the most important aspects of image optimization.
- Image Sitemap – An image sitemap can help you store all your images in one place. Although it is not necessary, an XML Sitemap can help you increase the chances of your images being found in Google Image Search and in any other search engines.
As we have seen, there are many techniques you can use to optimize your images for web. And since images play such a huge role in attracting and converting visitors to your site, you need to employ the right techniques. Choosing the right file format, using our nuu:bit Image Optimization solution, and optimizing images for SEO are all actions you can take to make a huge difference in your site’s performance. Taking these steps will help you turn visitors into customers.
Once you’ve implemented these techniques, please let us know your results. And, if you need more help with optimizing your website or with image optimization, please feel free to reach out to us.