How To Optimize Images For Your Website
Images are one of the attractive elements on the website. Websites without images seem to be less appealing and interesting. In spite of that, using too many images on the same page will inevitably slow down your website.
In this article, I would like to share with you about how to optimize images for your website. This tips will not only make your website load faster but will also help reducing disk space usage considerably on your web hosting.
What Is Image Optimization
Image optimization is a process of reducing the size of an image by removing unnecessary elements while keeping its quality. Depending on the optimization method, you can typically reduce 60% – 80% of the original image size.
How To Optimize Images For Your Website
There are many ways to optimize images for your website. Aside from reducing image size and your disk space usage, some this methods may also help you to improve your SEO.
Compress Your Images
Compression is one of few common ways to decrease your images size. During the compression process, similar colors from the image will be selectively combined. Apart from that, compression may also strip some or all of EXIF data such as ISO/shutter speed, white balance, camera model, date and time, and much more.
There are many websites that offer free compression online. TinyPNG is one of few sites that gives best compression result. Please take a look at the comparison image below. Can you spot the difference?
Resize Large Images
Another common way to decrease image size is by lowering its resolution. Higher image resolution means more details on the image but at the cost of higher image size. For this, you can use Photoshop and Microsoft Paint which is a popular tool that can reduce your image resolution to a smaller size.
Apart from that, there are also free online tools such as Picresize.com and Resizeimage.net that can help you. Not only it can reduce your image resolution, it also can keep the original aspect ratio.
Crop Unnecessary Area
Besides compression and reducing image resolution, you can also optimize your image by cropping. Cropping is a process of removing the unnecessary area from your image to improve framing, accentuate subject matter or change aspect ratio. Below is how your image looks like before and after cropping process.
Another way you can optimize your images is by using CDNs. Content Delivery Networks (CDNs) is a network system that delivers web pages and other web contents such as images, scripts or CSS files. It is based on the geographic locations between the remote server and the user.
CDN works by serving a copy of these assets to a user from its nearest point. This will result in faster load speed globally. Apart from that, this network will also communicate with the remote server if there are new changes that need to be cached. This bouncing process is nearly transparent to the users.
There are many premium CDNs services such as MaxCDN and CloudFlare. Besides that, you can also use free CDN for your images by installing Jetpack plugin. And if you are looking for web hosting, read our SiteGround review which offers 5 datacenters and free Cloudflare CDN on every hosting plan.
Choose The Right File Type
Using the right file type is also another best way to optimize images for your website. There are many file extension exists for the image but here is the list of most commonly used:
JPG or JPEG is an acronym of Joint Photographic Experts Group which supports lossy compression. This file extension supports a maximum image size of 65,535 × 65,535 pixels. It is suitable for photos or images with many gradients where no transparency or animation is needed.
PNG which stands for Portable Network Graphics is a raster graphics file format that supports lossless data compression. It was created as an improved replacement for GIF. This file using a small color palette with solid colors and stark contrasts with full transparency support.
GIF or better known as Graphics Interchange Format is a bitmap image format that also supports lossless data compression. It allows a separate palette of up to 256 colors for each frame. This file typically used for animation image with transparency support.
WebP, on the other hand, is an image extension developed by Google after acquiring the technology from On2 Technologies. This file supports both lossy and lossless compression while producing smaller size with comparable image quality to JPEG. Beside that, this file can also support animation with full transparency.
Use Alt Attribute
Alt image tag is also one of the most important factors for image optimization. Although it doesn't decrease your image size or faster your pages load speed yet it help improve your SEO ranking.
Alt which stands for an alternate is displayed when your images can't be shown, missing or taking too long to load. Since most of the search engines are text-based, it can not read the images and videos.
Therefore by using alt attribute, you can help search engines to understand what these contents are about. However, make sure that your alt is relevant to your topic for SEO purpose.
Use Image Sitemaps
Beside alt attribute, using image sitemap is another way to optimize your image and improve your SEO. A sitemap is an XML file that lists the URLs of a website including various information about it.
This information allows search engines to crawl the site more intelligently while telling crawlers about other images in the XML list. You can submit your image sitemap using Google Search Console or include the path in your robots.txt.
Optimize With A Plugin
If you are WordPress user, you may have several same images with different size in your uploads folder. This is due to WordPress itself create few new image size for example for a thumbnail and featured image. Apart from that, some themes or plugins may also create new image scale for the responsive purpose.
In this case, you have to optimize every single image with different size. And you can do this automatically with a WordPress plugin.
Wp Smush It by Wpmudev is one of free image optimizing plugins with the highest active installations as well as the highest rating in the WordPress directory. This plugin allows you to automatically optimize all of your images on upload. In addition, there are also other option to resize any large image and preserve EXIF data.
Apart from that, they also offer subscription-based premium plugin. In which, will give you more feature such as the ability to optimize your Amazon S3 cloud-based media library. The only limitation in their free plugin is the compression rate offered is much lower compared to their premium.
EWWW Image Optimizer
EWWW Image Optimizer created by Shane Bishop is another best image optimizing plugin. It comes with more advanced features such as the ability to choose image quality level and resize option. Moreover, you can also choose to automatically convert to another image extension including WebP.
The best thing about this plugin compared to other plugins is their optimization is processed on your own server instead of using the third party. This will result in faster optimization especially when processing large size images.
Nevertheless, you may also want to use their premium service which comes with ExactDN feature. ExactDN is a CDN service similar to Jetpack's Photon but with an ability to purge! Besides that, there are also other great features such as original image backup, compressing PDF and much more.
Compress JPEG & PNG Images
Third on our list is Compress JPEG & PNG Images from TinyPNG which come with a minimal setting. Although this plugin offers the highest compression among other plugins, yet it only works on JPG and PNG file type.
The biggest limitation of this plugin is it only offers 500 free conversions monthly. If your WordPress generate 10 different sizes of the same image, it means you can only compress 50 images monthly. While it is perfect for a small site, any increment in usage will become a little bit pricey.
Imsanity is another free plugin from Shane Bishop, the creator of EWWW Image Optimizer. This plugin also comes with minimal settings and receive a lot of positive ratings from the users.
Some of the features that available in this plugin is setting up JPG image quality and the max resolution of an image uploaded to your site. Besides that, you can also auto converting PNG/BMP to JPG and bulk resize all of your existing images.
Besides previously mentioned, there are also other similar plugins which can help optimize images for your website. You might want to try out ShortPixel Image Optimizer, Kraken Image Optimizer or Optimus plugin.
In any event, optimize images for your website is utterly beneficial. Whether to improve page load, reducing disk space usage or to improve SEO. It would still give you benefits if it practiced. If you have any other tips you would like to share, please let us know in the comment section.
He is a web developer, a programmer, and a computer technician. He obsessed with coding and enjoy learning new things. In his spare time, he likes to play online games, musical instruments or watching anime and movies.