Optimizing images for web is still a little-known practice. When it comes to websites and images, things can get a little complicated. You see, while images are something which all websites simply must have, for many reasons, they increase the overall size of a web page and thus slow down the loading speed of that web page. Above all, this is very problematic because of the user experience that this conveys.
Table of Contents
Below are some of the reasons as to why images play an important part for a website and why you should properly optimize images before using any on your website:
- A picture is worth a thousand words! You can`t deny it!
- Images are perfect for call-to-action. Call-to-action includes the purchase of a product.
- Rather than having huge chunks of boring text, images make your content easier to read and less plain.
- Images make a strong connection between both the writer and the reader.
Even though they are beneficial, if your images are too big then they will cause your web pages to load slowly. Not only does this cause a frustrating user experience, but this will impact your search rankings. Furthermore, the more content that needs to be loaded, the more bandwidth that is used. More bandwidth, higher hosting costs. With that in mind, a fast loading website is in everyone’s best interests.
The Web is DOOMed
Ronan Cremin, a software engineer, rightly predicted that the average size of a webpage today will be about the same size as the original classic computer game, Doom. A zipped copy of the installer for the shareware version of Doom is 2.4MB in size while today’s average web page weight, according to HTTP Archive is about 2.3MB.
This comparison is not entirely analogous, but it does illustrate the page size problem found on most websites today. Cremin wrote, “Recall that Doom is a multi-level first person shooter that ships with an advanced 3D rendering engine and multiple levels, each comprised of maps, sprites and sound effects. By comparison, 2016’s web struggles to deliver a page of web content in the same size…”
A bit of data…
It is worth looking at the weight of the top ten websites compared to common sites. In the chart below, we can see that the top ten most popular websites based on Alexa’s ranking are significantly lighter than the average page and they’re getting lighter by the day. Note that these top ten websites include including Google, YouTube, Facebook, and Amazon.
In this graph, you’ll realize that the top ten websites are significantly lighter than the others and keep going down while others are steadily getting heavier. If these popular sites are trendsetters, we should all focus on doing the same.
Developers and publishers must work with efficiency in mind even though internet connections have gotten faster. The increasing number of high-res photographs, animated ads, and scripts, does not only slows down page loading times. They also increase the number of connections required to load a page which in turn has adverse effects on the users. Google’s Accelerated Mobile Pages and Facebook’s Instant Articles are here to remind people of how fast the web can be.
Knowing if images are the problem
Before you jump into optimizing your images and speeding up your website, it’s important that you know images are the problem. There are several tools out there which break down your web page and analyze which elements take the longest to load. One tool which comes to mind is the Pingdom Website Speed Test.
Ideally, you want your website to load at a rate of 1MB per 3 seconds, and on top of that, you should aim to each of your images as small as possible, without degrading the quality of the picture.
Let`s dive into what I call the practical guide to image optimization. These tips or methods can be applied straight away!
#1 – Preparing Your Images + Software to Optimize Images
Many people opt to prepare their images once they’ve been uploaded to their website, being it WordPress or not, and while it’s understandable, it does limit the optimization that you can do on the images. Before you upload the image, optimize it as you would. Whether you crop it, reduce the resolution, or resize it. No matter what it is that you’re looking to do, it’s beneficial to prepare the image before uploading. WordPress does not compress images after you resize them, therefore, resizing them with WordPress is fairly pointless in terms of loading speed.
The obvious choice for graphic design would be Adobe’s Photoshop, although don’t limit yourself to just that as there are plenty other options out there. Some of those options are:
IrfanView. This free piece of software is perfect for making the basic yet necessary adjustments to your images. Unfortunately, it is limited to the Windows platform.
GIMP. GIMP is one of the more popular free options out there as it has some fundamental similarities to Photoshop. Although it has a similar interface as Microsoft Paint, it has a lot more to offer.
RIOT. RIOT (Radical Image Optimization Tool) is a tool which has been developed specifically for optimizing images for website use. After optimizing your image, both the source image and the resulting image are displayed side by side for you to observe the quality of the picture as well as the change in file size.
ImageOptim. This tool is similar to IrfanView as it allows you to compress and convert your images. Unlike IrfanView, this piece of software is only available on the Mac platform.
These are just some of the free tools that are out there which allow you to appropriately optimize images so that they can be used without slowing down your website too much.
Make Sure to Choose The Right File Type
When working with image editing software, you can specify which image type to save as. Often, people choose the wrong file types, which can result in either poor quality and huge file sizes images. Choosing the right format depends on the case scenario. The most popular image file formats used on the web are jpeg, png, and gif.
- JPEG: The JPEG format is perfect for photography in general. However, this format is terrible for screenshots and website use.
- PNG: When it comes to PNG, this format is best put to use with screenshots, drawings, or graphics. Furthermore, this format supports both transparency and lossless compression. The big downside to the PNG format is that the file size tends to be a lot higher compared to the JPEG format.
- GIF: GIFs are typically used for either short clips or short animations, although they can be images too. Although one of a kind, GIFs should only be used for flat images that have no gradients, thus aren’t suitable for website use.
#2 – WordPress Plugins for Image Optimization
If you don’t have the time to take care of optimizing your images on your own, don’t worry about it. There are a few different WordPress plugins out there which can get the job done for you without you having to lift a finger.
WP Smush – Image Compression and Optimization
The first plugin that we’re going to look at is one of the best image optimization plugins out there. This plugin scans all of the images which are stored on your website and optimizes them by all means possible. They are run through the plugin’s API using what is known as “lossy compression”. With the free version, you can compress and optimize either singular or bulk images of 1MB or smaller.
EWWW Image Optimizer.
This one comes with a different compression algorithm. A lot of people are turned away from the first plugin because of how it uses lossy compression, which is entirely understandable. With the EWWW Image Optimizer, lossless compression methods are used so that while the image remains a high-quality one, the general “code” behind the picture is cleaned up to reduce file size.
Imagify
Although the free version of Imagify limits its users, there is a paid version available for those who are willing to go the extra mile. This plugin comes with three compression types: normal, aggressive, and ultra. For the lowest file size possible, I recommend Ultra. If image quality is important to you (e.g. you run a photography website), then I’d suggest sticking with normal. With the free version, you can optimize up to 25MB per month. This increases to 50MB if you sign up to their website. For more image optimizations, you must select a monthly subscription package for the plugin. After all, quality has a cost!
Lazy Load Plugin for Images
The above plugins were dealing with image file optimization exclusively. This one is all about making your web page load faster, by loading only the images that you see at first and then the rest of them on scroll.
By default, WordPress will load all of the pictures onto the page at once. If you have a lot of images, this can be troublesome. With the Lazy Load plugin, all of the images are not loaded at once. Instead, only the images which are visible on the user’s screen/viewport are loaded. As the user scrolls down the page, more images will be loaded. If your website has a lot of images on it and you aren’t able, or willing, to remove them, then Lazy Load is a plugin worth installing.
There are a few things to note when using an image optimization plugin.
- Only have one image optimization plugin installed at a time otherwise some plugin conflictions may occur.
- Although these plugins are available, it’s always in your best interest to optimize images before uploading them to your website.
- If you have a high number of plugins, avoid adding more to that figure as the more plugins that you have, the slower your site will be.
Take each of these points into account, and your website will load a lot smoother.
#3 – Web Tools for Optimizing Images
Considering that when you are working on your website you have it open in a browser, it can be a lot more convenient to use web tools rather than having to move from application to application every few minutes. On top of that, if you aren’t one to install a lot of programs on your computer then a web tool for optimizing your images may be what you’re looking for. Below are some of the best web tools out there which are developed specifically for image optimization.
TinyPNG
You probably already saw that panda bear, right? TinyPNG allows you to significantly reduce the file size of your PNG file although uses lossy compression, therefore the quality of the image may drop significantly.
CompressNow
This tool is slightly different from the others that are out there. With CompressNow, you simply upload the image that you want to have optimized, although with this tool you must select a compression percentage. Once compressed, you can download the optimized image.
JPEG Optimizer
This last tool is a free online tool which allows you to both resize and compress your images. After uploading your image, you will be prompted to select a compression method and a resize level.
In my opinion, each of these tools is incredibly useful, and all have areas of image optimization which they can be helpful in.
#4 – Serving Images via a CDN
CDN – Content Delivery Network
A Content Distribution Network (CDN) is made up of a global collection of services that deliver content such as images, javascript/css/font files and other rich media file types. When a visitor browses a page, the content of that page is served by the closest to the user CDN server. This means users will experience faster webpage load times. The entire process should also reduce your bandwidth cost and server load. You can setup a CDN to serve your entire WordPress website or just the images. I personally recommend MaxCDN and CloudFlare. Here’s a quick comparison between CloudFlare and MaxCDN.
Data Centers
With CloudFlare, all your website traffic goes through its global network of 31 data centers across six continents – with most of these data centers located in North America and Europe. CloudFlare has a system which provides up-to-the-minute notifications on the performance of every data center.
MaxCDN has about 57 data centers with located in Europe, North America, Asia, and Australia. These data centers use high-end SSD servers. MaxCDN has also partnered with different ISPs around the world to establish an even faster connection to users.
Installation
You can set up CloudFlare in minutes by just changing the DNS name servers of your domain. Alternatively, if available, you can use the dedicated application for CloudFlare setup, available in your web hosting control panel/cPanel. Regardless of your website platform, CloudFlare is easy to set up.
You don’t need to change the DNS name server settings to when setting up MaxCDN. This is why it is used in Content Management Systems like WordPress. All you need to do is install for example one of the W3 Total Cache or Wp Rocket or Hummingbird plugin and go through the fairly simple setup process – just link to your website to MaxCDN from the plugin`s interface.
Pricing
Both services come up with different plans, depending on user`s needs and they can scale from basic to enterprise levels. The difference is that CloudFlare charges money per set of features while MaxCDN works with the data need in mind. It’s important to mention that CloudFlare offers a free plan for basic needs and for getting users accustomed to the system.
Pros and Cons
Advantages of CloudFlare over MaxCDN
- CloudFlare offers a free plan, so you can use certain CloudFlare features for free.
- If offers protection against SQL injections and DDoS attacks.
- Setting up CloudFlare is very easy and does not require any research or plugins unlike MaxCDN.
- CloudFlare does not place restrictions or limits on your website’s bandwidth usage.
- It’s extremely difficult for attackers to crack your server directly since all your website’s traffic has to go through CloudFlare’s network.
Advantages of MaxCDN over CloudFlare
- MaxCDN offers 24-hour support and various support options such as phone, email, and chat, unlike CloudFlare which only provides support via their ticketing system.
- It offers a 30-day money back guarantee period, which is enough to test all of the MaxCDN features.
- Unlike CloudFlare, your entire website is cached by MaxCDN and displayed in case of a downtime.
- It does not implement a CAPTCHA feature, which often frustrates CloudFlare users.
- MaxCDNs Restful API enables interaction with applications and 3rd party platforms.
Both CloudFlare and MaxCDN offer high speed and performance for your websites. While CloudFlare is great for its vast range of security features, MaxCDN is suitable for enterprise sites or large traffic sites with performance as the main focus. There are other CDN services available and I would like to mention Amazon CloudFront and CacheFly. The choice is yours to make.
Worth mentioning- JetPack WordPress Plugin
Jetpack is such a popular plugin that I couldn`t ignore it, especially when speaking about optimizing images for web. Because it can also serve as a CDN for your website.
Jetpack is a WordPress plugin that goes much further than simply helping you optimize images. This plugin allows you to gather analytics about your website visitors, increases the customization control that you have over your web site, and above all, helps add an extra layer of security. Now, the location of your website and the location of a website visitor does factor into loading speed. With the Jetpack plugin, your website data is distributed across multiple servers so that when a visitor is on your site, they connect to the closest server and have loaded your website data faster.
To Conclude…
I can’t emphasize enough how important it is for you to optimize the images which you have on your site. There are simply no negative points to doing so. By optimizing your website’s images, you can increase the speed of your site, lessen the stress put on your web server, decrease your bandwidth usage, improve your search rankings, and improve the user-experience.
With that being said, it’s also important to keep the quality of your pictures in mind when focussing in on image optimization. When you are preparing an image, try to find a perfect balance between the quality of the picture and the file size of the image. If quality is paramount to your work, then go back and take a look at the “Lazy Loading” options that I mentioned beforehand. No matter what, make sure that your users have one of a heck experience when browsing your website!
