The simple way to reduce your image sizes and boost your website speed.
Images are a great way of breaking up your content in a visually appealing way. However, adding images to your posts and pages has its drawbacks.
Images tend to be the bulkiest part of the content, as they are often much larger in file size than any other element that makes up your pages.
If you have several images on a page, it can greatly slow your pages down. This is particularly true for mobile devices or readers with slow internet connections.
Google and other search engines prefer sites that load quickly. Speed is a ranking factor and slower websites tend to not rank as high on the search results pages.
This is why it is important to optimize the images that you add to your pages, which can greatly improve the page speed.
Scaling and compressing images is one of the top things you can do to speed up your site and provide a better browsing experience for your readers.
47% of people expect your website to load within 2 seconds. Any longer, and visitors will likely abandon your site and not return. Fast websites simply mean more engagement, more conversions, and sales.
Working with images
Several different image formats are commonly found on websites, although the two most common image formats online are jpg and png.
There are some key differences between the two, which are worth knowing.
Jpg is most often used for images with lots of colors, such as photos. The jpg format is very efficient at reducing the file sizes without significantly reducing quality.
Png is generally used for simpler graphics that have a few solid colors, such as logos and it is very efficient at reducing the file sizes of these types of images.
When working with images in your favorite image program, such as paint or Canva, then aim to save the images in one of these formats based on the type of image you are editing.
Scaling and Cropping Images
Scaling images allow you to reduce the sizes of images both visually and in file size, which contributes to the speed of your pages.
Displaying large images is often unnecessary, as the areas on your pages where they often appear can be a lot smaller in size than the images themselves. For example, you don’t want to upload a large image that is only being used as your gravatar profile photo.
A properly scaled image is an image that has been sized to fit the exact size that it is supposed to be displayed.
Scaling keeps the proportions of an image relative to the original, just making it smaller and more efficient.
However, it is not recommended to rescale images to a larger size. This will reduce the quality, making them look fuzzy and generally lower the professionalism of your site.
WordPress processing images
When you upload an image to WordPress, it automatically generates three additional versions in various sizes. These are large, medium and thumbnail, and the original image is left untouched at full size.
This is so that different versions of the image are used for different areas of the site. For example, the image used for the blog post will be a large size while the image used for the blog post thumbnails will be small, which helps keeps things efficient.
The default image sizes are:
- Full size – this is the original unmodified image you uploaded
- Large – 1024px
- Medium – 300px
- Thumbnail – 150px
You can also change these default sizes to sizes that suit your needs within the settings>media section of the dashboard.
How to serve scaled images
You need to know the dimensions of the areas where images will be used on your site, such as banner image areas, blog post image sizes, etc.
Make sure you know the largest size that your images will be displayed at. Anything over this is a waste and will only slow your pages down unnecessarily.
An example would be placing an unaltered image that was 1920px by 1080px into a post image area of 600px wide. This area is only around a third of the size of the image, so avoid making your images significantly bigger.
To remedy this, you would have the images rescaled to 600px width or doubling this to 1200px for retina screens such as iPhones, which would still make a great saving.
Multiply this saving by the number of images you have in your blog posts, and you can get an idea of how much more efficient your website will be by simply rescaling images.
Cropping cuts parts of the image out so that it removes any unnecessary parts and fits the dimensions you require.
You can manually crop images in media> library. Click on the image you want to edit, then click edit.
This opens the edit image interface.
There are different ways to crop your images:
- Crop the image by clicking and dragging over the image to select the crop area that you want to leave remaining.
- Click and drag the squares at the edge of the image to make adjustments to the width or height of the image.
- Enter the exact dimensions in the fields on the right.
Any thumbnail changes?
You can also manually resize images when you’re creating or editing a post. To do this, simply click the add media button, then click media library. Choose one of the images in the library, then click edit image link.
Image Compression Plugins
Compressing images can be one of the most significant speed optimizations you can make, and it is also one of the easiest.
Image compression plugins optimize images for better speed and performance. They take any image and apply compression, which reduces the file size without reducing the visible size or quality.
Smush is one of the most popular image optimization plugins. It allows you to apply image compression to your images as you upload them, or you can also bulk optimize previously uploaded images at up to 50 images at a time.
Auto image resize
Smush has a feature within its image resizing section of the plugin. Smush will resize any full-size images as you upload them with the settings that you specify within the feature, which is a great time saver. It will resize the image and also optionally keep a copy of the original image.
Smush also includes a lazy loading feature so that your images only load as the reader scrolls down the page, so if the image is below the screen, it won’t load until it needs to. This can also contribute to the speed of your site.
Smush has an option for wrong size detection which can notify you when you browse your site of any images that are slowing down your site.
The free version will be suitable for most small websites, although it limits the file sizes to 5mb images but can essentially save you a lot of time.
Bonus Tip: Jetpack Site Accelerator
We’ve mentioned Jetpack many times on our site as we’re so in love with this plugin and can’t recommend it enough. One of the great features of this plugin is the Site Accelerator feature, which is great for speeding up your site.
Jetpack Site Accelerator helps your pages load quieter by optimizing your images and other files and serves them from their global network of servers.
This means that your images will be loaded from their dedicated servers around the world, rather than your host, which alleviates load from your host and maximizes speed for your readers.
JetPack has many other great features in their plugin that not only help your site run fast but keep it secure and help grow your audience.
As you can see, there are different ways of optimizing images from scaling in size to applying compression, but a combination of the two will provide you with the best efficiency.
Aiming to make your pages load as quickly as possible is key to your website’s success, so make your images a priority above other speed savings, and you’ll see your pages load faster instantly.