In this guide, you will learn how to optimize images for WordPress website.
So, you will get
- Faster page loading time.
- Better GTMetrix score.
The WordPress image optimization methods below are the exact and simple ways that I used to optimize my WordPress images which make my page to load only at 387ms and get 100/100 GTMetrix score.
Just dive into the guide right now to optimize your WordPress images.
You can spot many eye-catching images on a popular website. Images play a crucial role to engage visitors and convey the intended messages.
Even though it is quite essential to equip a web page with images, this strategy can backfire if the images make a web page load slowly.
The modern-age internet users do not like to wait. They expect a swift loading time. Websites, which fail to load quickly on both PCs and portable devices, face the danger of losing many visitors.
This is why you need to optimize images for WordPress website, which reduce the image size without affecting its quality and serving images faster.
1. Popular Image Types Used on a Web Page
You will mostly find three types of images on a web page, which are a GIF, JPG and PNG images. Web designers use these images by considering their features and drawbacks.
GIFs are limited to a maximum palette of 256 colors, it is the best suited when your image contains only a few colors. Therefore, GIFs are rarely used when storing a product photo on a website. One benefit of using GIF format is it supports transparency, though PNG now also offers this too.
GIF is mostly used for:
- Simple animations
JPG is 16-bit format, it can mix red, blue and green colors to result in millions of colors. This makes JPG very ‘photo-friendly’.This image type is also the best to save pictures containing lots of shadows, shades, and gradients. It is considered the best to save pictures with their genuine features. JPG is a lossy format type which allows compression from 0% (heavy compression) to 100% (no compression), which can reduce the file size produced. However, unlike the GIF and PNG, JPG cannot preserve transparency.
JPG is mostly used for:
- Static Images
- Images with complex colors and dynamic
When it comes to PNGs, there are 2 kinds: PNG-8 and PNG-24.
PNG-8 is similar to GIF in many ways this kind of images shows limited color palette. You get only 256 color options in this type of image and therefore it is not the best choice for storing complex pictures. However, it has better transparency options and usually exports slightly smaller file sizes.
PNG-8 is mostly used for:
- Small icons
- Graphics with low pixel-to-pixel variation
PNG-24 (Default PNG type) allows you to render images with millions of colors – much like JPEG – but also offers the ability to preserve transparency. PNG is a lossless format file type, so you will get larger file size, if image quality is more important than file size, PNG-24 is your best option.
Use PNG for:
- Web graphics that require transparency
- Color heavy and complex photographs and graphics
- Images that require re-editing and re-exporting
I usually use PNG-8 for small icons and graphic with low pixel-to-pixel variation (the file size is my main concerned). And use JPG for medium quality needed photo (because it can be compressed). And PNG -24 for a really high-quality image or with transparent background for social sharing purpose such as Pinterest.
2. Resize Images into Right Dimension
It is important to learn how to save an image in order to use it on a web page. You will get a choice to store the image in its actual size. Learn how to optimize images for WordPress website so that your website can load within 1 second with all those appealing images. This is how you should save the images to load on a web page:
First and Foremost
You need to identify the dimension of images needed in your website. For instance, blog post image: 680px width x any height, thumbnail image: 100px x 100px.
Using Photoshop to Resize Images
I recommend using Photoshop to save images into the right dimension. You can use GIMP too. Open image in Photoshop. There are several tools in Photoshop you can use to resize your images to your desired dimension. You can use crop tool, image size tool for resize (Image -> Image size), Canva size tool for cropping (Image -> Canva size).
3(A). Optimize Images for WordPress (Manual)
High-quality images taken from quality cameras can be heavy in size. You can reduce that size in order to load on the web page without compromising with the quality of the image. First, you can convert your image profile to sRGB IEC61966-2.1 profile. It is the color profile used by most web browsers to display images on the web. Go to Edit -> Convert to Profile and change the profile to sRGB.
Adobe Photoshop offers “Save for Web” feature to reduce the image size without significantly reducing the quality of the image. Open your photo editing tool and then go to File>Export>Save for Web. (Note: Please don’t use typical “Save as” method, because it will have bigger file size)
The new window will let you customize the export quality. From “Preset”, you can set the image type and quality of the exported image.
- JPEG High maintains 60% quality level
- JPEG Low maintains 10% quality level
- JPEG Medium maintains 30% quality level
- PNG-24 for full quality level
- PNG-8 for 256 color palette
Finally, just click save to get the optimized image. (Remember to put a SEO friendly name for the new image)
3(B). Bulk Optimizing Images (Auto)
From the above tutorials, the method is used to optimize for a single image.
However, sometimes you may have a bunch of new images, for instance, when publishing a new article, then optimizing every single image manually is very time-consuming.
This is why the automation comes into the place.
The tool that I’m using is the Image Processor Pro. It is a photoshop script. You can download it from here and install it. Original Photoshop only comes with Image Processor, in which it doesn’t have much customization such as Save for Web.
After the installation of the script, the tool is available at File -> Automate -> Image Processor Pro.
- Store all your unoptimized images in a folder and select it. (Please assign a SEO friendly name for the unoptimized images)
- Choose the directory of the optimized photo to be stored
- Configure the File Type (The settings below are the settings for JPEG-High resolution)
- Remember to resize and do not enlarge when scaling all your images. Leave the value of height pixel empty (if you don’t have height limit), so it is auto-scale with your respective width.
- Click run.
Wait for a while….. All your optimized photos are produced at the chosen directory.
With this simple tool, it makes the process easy and faster for bulk images.
4. Compress the Images for WordPress
You need an image compression tool to further compress the image size. These types of tools remove hidden data in the image file like additional color profiles and metadata (like geolocation of where the photograph was taken) that aren’t needed. You can rely on an online image compression tool or WordPress plugin to compress the image size without causing the image to lose its natural appeal.
4.1. List of Online Image Compression Tool
4.2. WordPress Plugins
5. Optimize Images Loading Speed
5.1. Browser Caching
Caching can improve WordPress speed for your visitors by storing assets in a cache for faster retrieval. With browser caching, the assets such as images are stored in the client’s browser cache folder. When the returning visitors visit back the site again, it will retrieve the assets from their browser without the need of requesting and waiting the whole bunch of assets from the server. This will dramatically improve website loading speed.
The browser caching can be enabled through the cache plugin. The one I recommend to use is Swift Performance. You just need to go Settings->Optimize->General->Browser Caching to enable browser caching.
5.2. Content Delivery Networks (CDN)
By using CDN such as Cloudflare and BunnyCDN, they can help to store and deliver the images all over the globe from their nearer datacenter. This will definitely improve your images delivering speed and saving your hosting’s bandwidth when compared with serving your images from your server in a single location. I have a tutorial on how to set up the free Cloudflare CDN for improving the website loading time.
5.3. Lazy Loading
Lazy loading can improve initial page loading speed. This is because it will delay the loading of images/videos until users scroll to the images/videos section on a page. However, this is not good for user experience, so I recommend only lazy load videos if you have videos (because the file size is very large) but not images.
By using Swift Performance, you also have the options to enable the lazy load of images/videos.
Lazy load Images
Lazy load Video
This is my exact WordPress image optimization that I always use which give me faster page loading speed and better GTMetrix’s score.
Quality images which are smaller in size can lead you towards a huge success.
You can always follow my suggested approach to optimize images for your website.
Your site will definitely load faster and look more appealing.