How to Optimize Images for the Web
Images are a huge part of the online world. They can be used to present statistics, teach new information, or cause hysterical laughter. With all that said, the majority of bloggers who are just starting out ignore one simple rule – you have to optimize images before you upload them.
You can’t just download a 15 megabyte picture and upload it to directly to WordPress. I know you mean well. Everyone wants to make their website look outstanding, but the truth is it’s a bad idea when it comes to long term success.
Why optimize images
One of the reasons to optimize images before uploading is to improve page load times. There’s a lot of data available on the negative effects of slow pages, but I am not going to go deep into that here. I suggest you read this and this for more information.
You might think that this does not apply to you, because you’re not a million dollar business, but even a small difference can have a huge impact on your site. And hey, you’re not a million dollar business yet!
Reason number two is to save bandwidth. In developed countries fast internet is taken for granted.
Nowadays, you can access any page with a fast 4G connection on a modern smartphone. You don’t really care how much bandwidth it takes, because you’re not paying for the traffic (or it’s extremely cheap).
However, you’re forgetting about 90% of the rest of the population who don’t have access to a reliable internet connection, yet alone a fast one. Since the ultimate goal is to give access to the Internet to everyone in the world there’s no reason for you to alienate users from developing countries.
The third reason is SEO. Fast websites are ranked higher in mobile search results. In other words, a fast website is a must if you want to attract organic traffic from mobile users. And since mobile users surpassed desktop users in 2014 this factor cannot be ignored.
Images can be confusing at times because there are dozens of different formats each used for a different purpose. Fortunately, there are only three types of images you should know about. PNG, JPEG and GIF – these are the most popular image formats on the internet.
PNG is one of the most popular lossless image compression formats on the internet. This format is great for images with details, particularity good for images with text. That’s why PNGs are mostly used for screenshots, statistics, and other content where little details are important. The majority of images used in my WordPress tutorials are in PNG format.
PNG natively supports transparency, which is especially great for web development. Most logos, icons, and other small images which require transparency are in PNG (sometimes in GIF).
JPEG is another popular image format on the internet. Unlike PNG, JPEG is a lossy compression format, which means as the image gets compressed it loses some of the details.
The main advantage of this format is you can achieve a good looking picture at a very small size. That’s why all of the photos you see online are in JPEG.
JPEG are not really useful for screenshots, because images with small details like text will look pixelated and jagged. On the other hand, photos look amazing in JPEG.
GIFs were quite popular a long time ago, where everyone wanted to make their website feel alive and animated. Today, they are not as useful, because of their limitation to only 256 colors. Unlike PNG and JPEG, GIFs have a native support for animation.
It’s the only image format which can be used for creating fun memes. Keep in mind, animated GIFs can be quite large in size, sometimes larger than the video file used for creating the GIF. Here’s an animated GIF.
How to optimize images
There are a few ways you can optimize your images for the web. The majority of articles online will give you twenty different options of how to do it, but not actually show you.
One way of optimization is doing it yourself by using image manipulating software. The other way is using plugins, which do it automatically for content management systems like WordPress. The third way is using online image compression services which are effective, but quite time consuming.
My preferred method of image optimization is using software, because I like to be in control of every step. As you may know, there are dozens of different programs available, some of which are expensive such as Photoshop.
However, I prefer using a free open source program called nomacs. It’s easy to use, lightweight and available for most operating systems. Here’s how to use this software.
First we need to open the desired image in the image viewer. You can do so by going File > Open, or using the hotkey CTRL+O.
Tip: to enable the status bar at the bottom press CTRL+I. It shows additional image information.
As you can see in the status bar the image is quite large both in file size (2.28 megabytes), and image size (5330 x 4750 pixels). This type of quality is required for printing movie posters, but is unacceptable for web use.
There are two ways we can solve this problem.
The first one is by going to File > Save for Web. The program will automatically resize and pick the appropriate quality for the image.
You don’t really have any control over the settings using the Save for Web feature. Sometimes, the program will do a poor job and you’ll have to do this process manually. Here’s the same picture optimized for the web.
Notice how the image is now only 39.55 kilobytes in file size and 637 x 600 pixels in image size without any noticeable difference in quality. You’ll notice the difference once you start zooming in and hunting for pixels.
The other way is doing the same process manually.
The first step is to resize the image into something more suitable for the web. To do so go to Adjustments > Resize Image, or press CTRL+R.
In the new dialogue you can enter the preferred parameters for the image. I prefer going by height and generally make all my images 900 pixels in height.
900 pixels is more than enough for all high pixel density displays, so the picture should look great across all devices.
Make sure you choose the Area (best for downscaling) option, as I found it to give the best results.
The next step is to save the image and pick the desired quality. Go to File > Save As, and in this window you’ll be able to play with the quality. Keep in mind, this window only appears for the JPEG image format.
You can drag left image by holding left mouse button to get a preview of how the image will look in a particular area. The approximate file size shown is only for the section in the preview window.
The total file size will be different. This process requires some practice so you may not get a perfect image on your first try.
A good rule of a thumb is to keep all your images below 100 kilobytes. Sometimes this will not be possible, because of too many artifacts then you can bump up the quality until you find a good balance between size and quality.
Now you’re ready to upload the image to your blog.
Remember, the point of web image optimization is to scale down large images to an appropriate size without loosing much of the quality.
If all of the above seemed to you like a lot of hard work, fear not. You can make WordPress do the same process using plugins.
Most of these plugins are free and don’t require fiddling with the settings, unless you’re looking for something specific. Just install and you’re good to go.
EWWW Image Optimizer
EWWW Image Optimizer was my plugin of choice. It does a fairly decent job, does not require too many resources, and does not require you to sign up. However, signing up is free and unlocks additional features, which might come in handy.
WP Smush is probably the most popular image compression plugin for WordPress. I’ve personally haven’t used it, but the plugin has over 1 million installations and 3,000 five star reviews.
This suggests it’s a great plugin for the job. The free version will be more than enough for an average user, but if you need more features like keeping the original images then there’s a premium version available.
ShortPixel is another popular solution for image optimization. It also performs well, but you’re limited to a hundred images per month in a free version. If you require more than that, you can purchase additional credits for as little as $4,99 per 5,000 credits.
It’s up to you which plugin you choose. They all do the same thing and don’t require much knowledge on your part. Just install and see your page load times get reduced by a very significant amount.
Using online services
If you’re for some reason not happy about doing this process manually, or don’t want to install any additional plugins, you can optimize images by using the following online services:
These services are generally free and are sponsored via ads. In addition, there may be a huge demand so you’ll most likely be placed into a queue. But that’s the price you pay for using a free service.
Images are the largest contributor to slow websites because of their large size, which is not required for use on the web. Optimizing images is extremely important for many reasons.
By optimizing your images for the web you improve user experience, may increase conversions, and may even rank higher in search results compared to those, who don’t optimize their images.
There’s absolutely no reason to ignore image optimizations.
Are you optimizing images for your website? Did I miss something? Tell me in the comments below!
Enjoyed this article? Share it:
This site uses Akismet to reduce spam. Learn how your comment data is processed.
- How to Exclude Yourself from Google Analytics
- 8 SEO Myths That Seriously Need to Die
- Gutenberg Tutorial: How to Not Hate the New Editor
- Keyword Research: How to Find Keywords That Matter
- 8 Ways to Make Money Blogging
- The Single Biggest Blogging Mistake You Can Make
- How to Start a Blog with WordPress
- SEO Guide: Everything a Beginner Needs to Know
- Things to Do After Installing WordPress
- How to Optimize Images for the Web
- How to Add Google Analytics to Your WordPress Blog
- How to Brand Your Blog and Why You Should
- How to Write Great Content for Your Blog
- How to Choose a Great Domain Name
- Search Intent: Understanding Your Audience
- How to Use WordPress (Tutorial for Beginners)