Table of Contents
Optimizing Images in 3 Steps
One of the most important things you can do to boost your site’s efficiency is to optimize your images. This is true whether your images are being used in your Slider Revolution modules, or anywhere else in your content.
The most straight forward way to approach image optimization is first to determine the largest possible dimensions the image will need to have, then modify the image to best fit those dimensions by following these three steps:
- Crop – modify image aspect ratio to discard unused portions of the image.
- Scale – reduce overall image size by minimizing width and height.
- Compress – crunch file size to the smallest it can get without noticeable visual degradation.
Generally speaking, it’s advisable to follow these steps in the order listed above.
Sometimes it can seem daunting to perform these optimizations if you don’t own any image editing software, but you can actually do everything you need using editors that are free of charge.
In this tutorial we’ll cover how to perform each of the above optimization steps in the following free tools:
- Media Editor, built into WordPress
- Photopea, in the browser
Let’s begin!
WordPress Media Editor
For convenient image editing without leaving WordPress, try the in-built media editing tools.
Accessing the Media Editor
In the WordPress admin panel go to Media in the left sidebar, then click Library:
Click the image you want to optimize:
A window titled Attachment details window will popup. Click the Edit Image button at the bottom of that window:
The media editing tools will appear above your image:
Media Editor: Cropping
To crop the image, click the Crop button:
If you know the aspect ratio the image requires, enter it in the Aspect ratio fields, where the first field represents width and the second represents height. For example, crop to a standard wide screen aspect ratio by entering 16 and 9, or crop to a square shape by entering 1 and 1.
Then move and resize the crop tool until it captures the part of the image you want to show:
When you’re happy with the previewed shape click Apply Crop:
The image will be previewed in its cropped shape, but that cropping is not yet actually applied to the image. To finalize the cropping, click Save Edits:
Media Editor: Scaling
To scale the image, while preserving the aspect ratio, click the Scale button:
Enter either the width you want in the first New dimensions field, or the height you want in the second field. The other side will be automatically calculated for you. Click Scale to apply the entered dimensions:
Media Editor: Compression
Conveniently, image compression is handled automatically by the Media Editor as part of the cropping or scaling process.
It may not seem like file size has been compressed because the Attachment Details page still shows the original image file size, but this is not accurate:
However if you open the image in a new tab, then use developer tools to directly inspect the edited image you will see its file size has been substantially reduced. In this example the image is reduced from the original 299kb down to 16kb:
Photopea
If you’d like more hands on control over the precise optimization settings of your images, rather than having it automated by the WordPress Media Editor, try the browser based image editor Photopea instead: https://www.photopea.com/
Photopea: Cropping
After opening an image in Photopea, select the Crop Tool from the toolbar on the left:
On the image canvas, draw out the shape you want to crop:
When you’re ready, press ENTER to apply the crop.
Photopea: Scaling
To scale an image, go to Image in the top toolbar, then choose Image Size… from the dropdown list:
A box labeled Image Size will appear. Enter either the width or the height you want to scale to in the corresponding field, and the other dimension will automatically be calculated. Then click the OK button to apply the scaling:
Photopea: Compressing
To compress your image, go to File in the top toolbar then choose Export as from the dropdown list, and choose a file format to export your file to. If you are working with a photograph, generally you can start by selecting JPG or webP:
To compress your image, experiment by moving the Quality slider up and down, monitoring the quality of the image in the preview. As you do so, also watch the file size estimation at the bottom of the window. Your goal is to get the file size as low as you can while avoiding noticeable image degradation in the preview:
Take note of the lowest file size you can achieve with the currently selected export file format. Then choose a different image file format, such as webP:
Repeat the process of adjusting the Quality slider, and determine which export format gives you the lowest file size. In this case webP gives us a slightly smaller file size of 11.5kb vs the JPG image size of 17.3kb:
Photographs will typically be best served in JPG or webP format, and simple illustrations with few colors are sometimes better handled as PNG images.
Every image is different, so it’s worth testing different export formats to find the most efficient for each image.
