Image Optimization

What is Image Optimization?

Large images slow down your web pages which can cause the visitor to abandon your page, lowering your conversions, and revenue. Optimizing images is the process of decreasing their file size, by using an image editing software, or a desktop application, or a WordPress plugin, which in turn speeds up the load time of the page.

Why is it Important to Optimize Images?

On average, images make up 21% of a pages size or total weight, the second highest behind video. Images make up more of your webpage than Javascript, CSS, HTML and Fonts combined. So when it comes to optimizing your website, images are the first place to start!

It’s more important than scripts and fonts. And ironically, a good image optimization workflow is one of the easiest things to implement, yet most bloggers completely overlook it.

How to Optimize Images for Speed & Quality?
An Image Optimization Workflow for Bloggers

Step 1. Choose the Right File Format

Before you start modifying your images, make sure you’ve chosen the best file type. There are four main file types that all bloggers use, each is better suited for different image needs:

PNG – Social Media graphics, Logos, Favicon

PNG files allow for many more colors in the file than JPG files and they do not lose quality when compressed (lossless compression) as JPG files tend to do. 

The downside, however​, is that they tend to be large from the outset. A PNG file at the same quality as a JPG is often three times as large.

However,  PNGs are great for things like logos and Pinterest or Social media graphics with text in them for sharing and with the right compression can produce a very small image size.

PNGs also have a specific Alpha channel, which adds transparency to the image, something that is very important for certain image types like logos, favicons, where you need to place them on non-white backgrounds.

JPG – All other images, no text inside, no-transparency

JPG is one of the most popular file types on the internet, mainly because they work well with very complex images such as those taken with a camera.

JPGs actually lose their quality when they are compressed (lossy compression) but nonetheless can be compressed to quite a small size before humans can detect the loss of quality. As such, they are one of the best formats for most web graphics. 

JPGs do not however work very well with letters or lines, so are not very well suited to things like Pinterest graphics or logos. They also do not support transparency. About 80% + of your images will be saved in JPG.

SVG – takes skill to make but can do it all!

SVG is a scalable vector format which works great for logos, icons, text, and simple images. WordPress doesn’t automatically support SVG’s, so you’ll have to add the Safe SVG plugin.

SVG’s are worth the extra work. They display crystal clear no matter the screen size. All of the icons & tool/theme/hosting logos I use on BlogJolt are SVGs. You can create your own or download them from sites like SVG Repo.

WebP – Google’s image format! 25% smaller than JPG & PNG!

WebP – a modern image format created by Google, that provides superior lossless and lossy compression for images on the web. According to Google, WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images!

WebP images can’t be uploaded to WordPress. You need a plugin to create them. ShortPixel, the best image compression in my opinion, can create free WebP versions of your images while they compress the JPG and PNG versions and you can set it to show WebP on your website to the browsers that support it, while defaulting to JPG/PNGs to those that don’t. Not all browsers support it yet, but the most popular browser in the world supports it, Chrome.

Offering WebP images satisfies the ‘Serve Next-gen images format’ recommendation in PageSpeed Insights and GTmetrix.

Serve images in next-gen formats recommendation by Google PageSpeed Insights
Recommendation by Google PageSpeed Insights

Step 2. Dimensions & File Size: Size Matters!

Image Width: use/create Featured images that are 1200px wide. This is an ideal width for sharing on Pinterest, Facebook, Twitter, and more.

Retina Images: For all other images, I create the image at 2x the size it will display at, for example, a sidebar ad is typically 300 x 250 pixels. When creating the ad, I’ll actually create it with the dimensions 600 x 500. Why? Retina devices – Laptop computers, smartphones, iPads, and hi-def monitors have changed the web. They need a lot more pixels to display an image crisply. You might see in your theme settings for the logo that it’ll ask you if you have a Logo for Retina devices.

Image File Size: I strive to keep all images under 150 KB in file size. Yes, you can compress a 1200px wide image to less than 150KB. I’ll show you how – no more 1MB + images please, your page load speed will thank you! Page speed math: If you have 6 Large images on a post, would you rather “try” to load a 6MB page or a 900KB page? Images can quickly bloat a page. That’s why image optimization is the first place to start in reducing your page speed.

Step 3. Export / Save the Image Tips

Now that you’ve chosen your image format, have the correct dimensions, then you’ve designed your image either with stock imagery, used your own photo, or used a template, it’s time to apply the first level of compression with our Graphics Editing software.

Remove Exif data. Exif data is metadata about the location and camera settings that is automatically added to photographs. You might not even be aware that this data exists, but it can increase file sizes considerably.

Crop white space as much as possible from the image area and instead use CSS to create padding around the image.

User proper dimensions – Remember in step two we mentioned 1200px width or 2x the size of all other images.

Image Resolution: The standard image resolution for the web is 72 dpi. Photoshop has a ‘Save for Web’ option that automatically sets your resolution to 72.

Save images for web use. Some image editing software enables you to prepare your images specifically for web output. For example, Adobe Photoshop contains an option to “Save for web.” This method usually will set the web resolution of 72dpi for you.

Recommended Graphics Editing Software

Each of the tips above will make your optimization efforts more successful. Just remember to save and backup the original, unedited images separately. Once you have web-ready versions of your images, it’s time to compress them.

Step 4. Compress Images with Image Optimization Tools

When it comes to compressing images, you have three methods to choose from. You can install a WordPress plugin, download a piece of software to your desktop, or use a browser-based tool.

Your first impulse may be to only use a plugin for sake of convenience, but these other options do have their advantages:

  • No strain on your server— Since the image optimization happens off your site, your server will not be affected at all.
  • No need to worry about backups — Since you’ll keep both the original files and the compressed versions, you don’t need to create backups.
  • No site compatibility issues — If there’s a problem during the compression process, it won’t affect your site.

I’ve actually found that a combination of 2 out of 3 gives you the absolute best compression and fastest speeds possible. Here’s what I recommend.

Part A. Bulk Compress with Desktop or Online Image Compression Software

Optimage Icon

Optimage
for MACs

Tutorial coming soon!

Squoosh Icon

Squoosh
– Online –

Tutorial coming soon!

Part B. Bulk Compress again & setup WebP images with ShortPixel plugin

Not only will ShortPixel compress your jpg, png, and gif images, it will also create WebP images for all of your photos for free. That’s a big deal! As we mentioned in Step 1, WebP images are a ‘next-gen image format’ made by Google and supported in Chrome. For that fact alone, Chrome using WebP, I am committed to using this format. The majority of all blogger’s traffic comes from Chrome-powered devices.

ShortPixel puts that last little bit of compression on the file that only they can do – I’ve tried others, ShortPixel has always given me the best quality and the smallest size.

Go to my ShortPixel Settings Guide >>

Step 5. Use a CDN & Enable Lazy-Loading

I mention this so you know how it all ties in together. We’ll actually configure this part later. Just know that this is where the blazing speed for images comes from. You’ve just done everything you can in your new Image Optimization workflow, next Cloudflare CDN will store them all the around in their network, serving up your files fast to your site visitor. In WP Rocket we’ll aslo turn on the Lazy-Loading feature for images. This means we are only initially loading the images that our site visitor can see before they have to scroll. On image-heavy blog posts, especially Product roundup posts, this feature alone can improve that page’s loading speed tremendously. Instead of all 10+ images being loaded, maybe just 3 including your logo are downloaded initially.

Test for Image Optimization:

Now that you have a solid workflow process moving forward with images, I know you’ll never upload another 1MB+ image again, let’s go about finding those that are currently on your website that need to be optimized to a more reasonable size. Aim for 150KB remember.

Find Bloated Images in Speed Test Results

GTmetrix

Look under Top Issues, then if the warning is present, click on the arrow next to ‘Properly Size Images’ to see a listing of all images on that page that could use further optimization efforts of Step 1 – 5 from above. It shows you how much smaller the image could be in KB.

Properly Size Images warning in GTmetrix
Properly Size Images warning in GTmetrix

PageSpeed Insights

Look under Opportunities, then if the warning is present, click on the arrow next to:
Properly Size Images to see a listing of all images on that page that could use further optimization efforts of Step 1 – 5 from above. It shows you how much smaller the image could be in KB.

Defer Offscreen Images means that you should enable Lazy Loading for your site. This is an easy to setup feature of WP Rocket. Lazy loading once applied, loads only the images that will show in the initial screen area of the visitor’s device before they have to scroll. The rest of the images located below are not loaded until the visitor scrolls down your page. This saves a lot of time on the initial page load speed.

Image Warnings in PageSpeed Insights
Image Warnings in PageSpeed Insights

WebPageTest

WebPageTest has partnered with a separate image optimization service Cloudinary. When clicking on ‘Image Analysis’ in the black menu under the letter scores, you’ll then be transferred to Cloudinary with an analysis of all the images on your page. These images could use further optimization efforts of Steps 1 – 5 from above. It shows you how much smaller the image could be in KB. What’s unique to Cloudinary, is that it shows you the file size for each image format, JPG, PNG, WEBP, or SVG, that particular image would have. Eliminates all the guesswork out of which image format you should use. Note* for those that say WEBP is the best format, save it in JPG, and as long as you’re using ShortPixel and have the WEBP settings turned on, it will serve this image format up for you instead in supported browsers.

Image Analysis Results in WebPageTest
Image Analysis Results in WebPageTest