Images are one of the heaviest assets on a website. High-resolution photographs that most cameras offer prove to be a resource-hog and tend to slow down page loading times. In this post, let us learn how to optimize JPG images before uploading and offload the media library for a high-performance WordPress site.
It is no secret that page-speed is now a ranking-factor for search engines. In recent times, we switched few of our sites to web-safe fonts and static maps. The elephant in the room, image optimization, needed a more sustained effort though. With a planned rebranding exercise of our travel project (Backpacking Series -> Unakriti -> Scale Indigo), there was no way to ignore it. We began the project with a list of objectives to make sure:
WebP is a modern image format that provides superior compression for images. WebP images are 25-34% smaller than comparable JPEG images
Besides, we also wanted to reduce our dependence on stock imagery and making images SEO-friendly by including alt text, updating filename, etc. Now, WordPress does not allow changing file names of images in the media library. Instead, it requires re-uploading images with the desired file names. Doing so for hundreds of images is a time consuming process. It took us a good 3 months but the end-result justified the painstaking effort.
Optimizing 525 images resulted in a reduction of disk utilization from 700 to 120 MB – a 500% saving, and a site with one less plugin (to optimize images). We now experience relatively snappy backups, quick security scans, and site visitors have faster loading pages.
If you are starting out on your blogging journey or want to undertake a similar course-correction in managing your media library, here’s how to go about achieving the objectives in six easy steps:
Typically, site owners deploy an optimization plugin to scale and compress images, and / or to help convert JPG files into its lightweight WebP version for browsers that support it. These are resource intensive operations, especially on a shared server.
Besides, a plugin works with whatever you feed it with. For example, if you upload a large image file size of 8MB, the plugin will compress it by a pre-determined percentage. Wouldn’t it be better if you upload a 1MB file or better yet, a 200-300KB file and get rid of the plugin? Let us see how to achieve optimal image quality and file size before uploading, and what tools to use.
Image dimensions (in pixels) are a factor of the theme used. Consult documentation of themes you fancy, to identify the main column width, full-page width template, and specifications for featured images. Secondly, image height is based on a site owner’s preference for slimmer vs. taller images. Thirdly, remember that scaling down a large image offers better quality than scaling up a smaller image. Using these principles, we want to choose the largest possible image dimensions.
For instance, of the themes we assessed, the widest image port view offered was at 1920px. So, we chose 2000px as the largest width for our images. Identifying a corresponding height made us test few combinations of image dimensions such as 2000×1800, 2000×1600, etc. and we locked-in to a relatively taller look of 2000×1500. Scaling down from these dimensions allows us to deliver good-quality, responsive thumbnails.
Is this the only dimension used, site-wide? No. Large images of 2000×1500 constitute the bulk of our media library. It allows for the flexibility, without quality loss, to use the same photograph interchangeably either as a featured or, as a scaled down inline image.
So, what happens when a legacy photograph we really like and want to use as an inline image is available only in a smaller size, say 800×590? In such cases, we crop it to a medium size of 728×547 and never use it as a featured image. Again, 728px is based on specifications for main column width from themes we prefer. These two dimensions of large (2000×1500) and medium (728×547) constitute about 80% of all the images.
In addition, our site uses six other dimensions: small (80×80) for author profile photographs, small-medium (280×280) for badges, leaderboard standard (728×90) for advertisements, leaderboard large (728×300) for promotional banners, poster (sparsely used) for book mockups, and pins (800×1200). You can identify such additional dimensions based on the evolving requirements of your site.
Bottom line: Consult theme documents and use the largest dimensions for the majority of your site’s images.
Aspect ratio, the ratio of width to height, is a primary input you will need to crop and scale photographs. While a theme defines the width, you can choose the height. We tested few combinations of image width and height and eventually locked-in to 2000x1500px, i.e. an aspect ratio of 4:3 or 1.33 (4/3=1.33).
As mentioned, about 80% of the 525 images in our media library are either large (2000×1500) featured images or medium sized (728×547) inline images. Both these dimensions, and thus 80% of images, conform to 4:3 aspect ratio. You can choose any other dimensions / ratio that fits your site’s style and/or preferences.
You are likely to work with diverse image dimensions, especially when you source them from different cameras. This is why, you should use the identified aspect ratio as a guidance factor to crop an image. For instance, if the original photograph is 5456×3064, you can crop to exclude unwanted information and to reduce the aspect ratio from the original 1.78 (5456/3062=1.78) to the desired 1.33. The original photograph then reduces to 4234×3182 (4:3 aspect ratio).
Sometimes, the original image may already be in the desired aspect ratio and you may not want to crop it, unless you want to exclude something deliberately. For instance, if a photograph is 4000×3000, cropping is optional when following a 4:3 aspect ratio. In that case, skip this step to directly scale it down to the desired dimensions.
Beware: If the original photograph is not in the desired aspect ratio, and if you skip this step (of cropping) to scale the photo directly, the resulting image may get distorted.
This is an optional step. Sometimes, a photograph may need minor edits to make it brighter, or to enhance colors, insert layover text, etc. You can do these edits after an image has been cropped.
Even if your camera / smartphone gives you photographs in the desired aspect ratio, chances are you will still need to scale it down to reduce the file size. For instance, a 4000×3000 (4:3) photograph is larger file size as compared with, say, 2000×1500 (4:3). In this context, think of scaling down as reducing image dimensions while retaining its aspect ratio.
Thankfully, scaling can be automated. What’s more, scaling can be combined with image file size compression and performed as a bulk operation.
Now that we have cropped and scaled down an image, we are left with a file that needs compression to reduce it size from MB to KB. It’s worth to note that lossy compression of JPG files is achieved by data elimination and hence it is irreversible. Along with an expected loss of pixel information, you may even choose to strip EXIF data of an image.
As such, you need to: 1) balance quality with compression level or final file size and, 2) keep the original photographs someplace easily accessible, say on Dropbox or Google Drive, should you need to regenerate thumbnails in the future.
Compression tasks can be combined with scaling, automated, and processed as a batch. Large JPG files, when optimized properly, can go down to about 200-300 KB. Just be sure to review the images for acceptable quality after file compression. If an image is visibly degraded or if the file size is not within the desired range, try another compression level. For instance, most of our images are compressed at 50% while a smaller number is compressed at 80%.
Bonus: Tools for image optimization
There is a range of software tools and apps available for each of the optimization steps. You could choose to do everything on your desktop, everything online, or a combination thereof. Your decision about tools is also likely to be influenced by whether you prefer to optimize individual photographs or treat them as a batch operation. Based on what we have tried, here are few recommendations.
Optimize online
ImageResize.org is a handy resource to crop, scale, and compress images, one at a time. It allows you to do all the steps mentioned above and even flip, rotate, or change the image format from JPG to PNG. To get started, just visit, https://imageresize.org/
Optimize offline
Some of us prefer to work offline. There are plenty of desktop software for image manipulation, such as Adobe Photoshop. However, if you want a free tool, consider GIMP. Both these packages offer extensive editorial features and, if you have not used these before, might involve a learning curve.
We tend to prefer simpler tools and something that helps batch processing. Here are two nifty tools that we use on our Ubuntu laptops (both are available for Microsoft Windows too): 1) Shotwell: Cropping and basic editing, and 2) Converseen: Scaling and compression (supports bulk processing).
Whatever tool you choose, the process to achieve a fully optimized image, remains pretty much the same. Steps 1, 2, and 3 form the basis for optimizing images before uploading.
To verify the process, shortlist a photograph of (say) 4.5MB. Create a copy of this photo and then optimize only the copy. Upload both files (original and optimized) to the media library, embed these in a draft post, and review the post. On the frontend, note the difference in file size as a benchmark.
Tip: Do not skip an optimization step or else, you are likely to end up with a poorly compressed image file. We tested this by not scaling an image and found the resulting file size many times larger. See graphic above.
On a fresh installation, this step is not applicable – just do not install an image optimization plugin. However, if you are trying on a live website, the first step is to backup everything. Next, check the relevant documentation to verify expected plugin behavior when you disable it.
For instance, we were using the popular Smush Image Compression and Optimization plugin to scale down and compress images uploaded to the media library. After disabling it, we retained all the compressed images – optimized files are free to keep.
Be aware that some image optimization plugins also convert a JPG file to deliver the lightweight WebP formats to browsers that support it. When you disable it, your site may fall back to delivering standard JPG files. Once everything looks good, go ahead and disable (not delete) the image compression plugin on your site. Test pages and posts to your satisfaction after disabling it.
Most modern themes take care of a site’s responsiveness by creating 7-8 (or may be more) derivative images from the original. For instance, a post’s featured image may also be displayed in a smaller dimension on the blog-feed page. Additionally, WordPress itself creates three derivatives of large, medium, and small.
In other words, for each image uploaded, your site creates and stores about ten thumbnails. It means additional local storage, more time to backup, and slower security scans. It all intensifies the image optimization tasks. Moreover, depending on the type of plan, your host might ask you to either limit disk utilization or pay for exceeding a quota. If you want to avoid such inefficiencies or hosting shocks, we recommend disabling thumbnails.
A simple configuration change under Dashboard-> Settings -> Media to change all dimensions to zero disables the image derivatives that WordPress creates. However, it does not take care of the thumbnails created by the theme. To remove all thumbnails, you need to add one line of code. The recommended practice to add custom code to your site is via a child theme, a site-specific plugin, or the popular Code Snippets plugin.
add_filter( 'intermediate_image_sizes', '__return_empty_array', 999 );That’s it. Once updated successfully, your site will no longer spew thumbnails. Credits for this snippet go to the amazing folks at StackExchange.
With optimization plugin and image thumbnails disabled, we will now set-up an alternate way to deliver responsive images on-the-fly, in an appropriate format (WebP or JPG).
There are a quite a few solutions that help to fill-in for the features that we have removed from our WordPress site. While some solutions, such as the Amazon S3 and Cloudfront combo, offer granular control over image manipulation and optimization, these can be expensive.
Cloudinary comes close with its introductory free plan and generous credits based on storage, image transformation, and bandwidth usage. However, the free plan does not restrict your images to be served only from your domain and, similar to hotlinking, anyone with access to the image URL can serve it from anywhere. As such, it can be prone to quota-attacks, exhausting the free credits quickly. Moreover, Cloudinary’s dashboard can be overwhelming.
Jetpack Site Accelerator (formerly photon): A Free image CDN
The image CDN (Content Delivery Network) feature of Jetpack plugin works at the flip of a button. Literally. In the Performance & speed section of the plugin, when you Enable site accelerator and the option to Speed up image load times, Jetpack starts to work its magic instantly. Your media library is hosted on WordPress.com servers and images are served from a fast cloud. What’s more? Jetpack also converts JPGs to offer WebPs to browsers that support it, and delivers scaled images on-the-fly.
Now, Jetpack may invite polarized opinions. It may be the ‘usual suspect’ for a poorly performing WordPress site and labelled as ‘bloatware’. To be clear, unlike regular plugins, Jetpack is a multi-purpose plugin, with the ability to disable modules that your site does not need. If you like, you may replace pretty much every feature that Jetpack provides with 20-30 separate plugins. That means administration of as many different plugins with as many potential security vulnerabilities.
The thing that only Jetpack can provide is its ability to connect your blog with Reader and bring new audience. Folks who abhor Jetpack, might overlook this audience and instead rely on eMail subscribers solely.
Do we recommend Jetpack image CDN? Well, we love it for some of our sites. But every project is different and it depends on how it is designed. You may consider the paid solutions of Amazon S3 and Cloudfront combo or Cloudinary. But if you prefer free, or are already using Jetpack, there’s a good reason to offload the media library to it.
Other than the obvious benefits of faster image delivery, offloading a media library (using any solution) also helps to make your site’s images theme-proof – you do not need to regenerate thumbnails whenever you change a theme.
The Photon Module makes the images on your site be served from WordPress.com’s global content delivery network (CDN) which should speed up the loading of images. Importantly though it can create thumbnails on the fly which means you’ll never need to use this plugin.
Alex Mills, 1984-2019, author of Regenerate Thumbnails plugin
After you’ve offloaded the media library, say using Jetpack, check whether images are delivered from a WordPress URL that looks like [https://i1.wp.com/www.yourdomain.com/filepath] instead of directly from your server [https://www.yourdomain.com/filepath]. Specifically, verify the conversion of JPGs and delivery of WebP images to browsers that support it, such as Mozilla Firefox 67.0 (64-bit) or later.
Boost: Lazy load images
Now that you have optimized images before you upload them to your WordPress site and offloaded the media library to a CDN, here’s another little trick to speed up your posts and pages: lazy load images. In the ‘Performance & speed’ section of the Jetpack plugin, click the toggle to activate lazy loading for images.
It is a flip-of-a-button to defer loading of images to a later time when these are actually needed, say, as a visitor scrolls down a page / post, instead of loading them upfront. This method is especially helpful for visitors on a slow connection, or simply to enhance user experience. PS: If you prefer an alternate to Jetpack, consider a3 Lazy Load plugin.
While optimizing images before uploading and offloading a media library may appear to be cumbersome, it is not so. Identification of image dimensions and aspect ratios for your site is a one-time exercise. So are the steps of disabling (and eventually deleting) image compression plugin, disabling thumbnails, and offloading the media library.
Besides, once you get the hang of things, cropping, scaling, and compressing images comes easy. We use and are happy to recommend the desktop tool Converseen to scale and compress images as a batch operation. There’s no dearth of such tools and you may, of course, use any other.
If you are on a budget infrastructure, the number of options to speed up your site may be constrained by what the host allows. Luckily, choosing what kind of content to display in a post, and how to display images, is not one of them. So, before adding new content, would it help to assess offloading your media library? Or switch to Cloudkriti and leave such worries behind.
What kind of image optimization techniques do you use on your site? Have you tried disabling thumbnails, optimizing images before uploading, and offloading the media library? Are there any performance optimization tips you might want to share with us?
