The right images can transform your website from a very average one to a high-end, professional website one that boosts your online presence and adds credibility to your brand. For this reason, you should always add a featured image to each blog post. When using images on your WordPress site, it is very important to consider the size of the underlying image file. This post will walk you through some quick and easy steps to resize and compress images before using them on your site.
But Why Does it Matter?
If you have not considered how to crop and compress images on your WordPress site, the images may be slowing down your website and you may not even realize it. Images are typically the largest items on your website, and simply put, larger images take longer to load. The sizes of the image files on your site are an important factor in the total time it takes your website to load.
If you use stock photography, many of the original downloaded files are huge and way larger than needed for a website. Take for example this image downloaded from unsplash.com.
The original file is a whopping 4.1MB and approximately 5100px by 3400px, adding precious seconds to the time it takes this page to load. Website visitors expect fast load times, and may not stick around to read the content if your website loads too slowly.
So what can you do about it?
Crop Images with Adobe Photoshop
The first step is to crop the images to the actual size needed on the website. As viewed on a desktop, the width of this blog post is 1200px. That means the original file downloaded from unpslash (at 5100px wide) was more than 4x what I needed for this blog post!
The size needed will depend on the image’s placement on your website and if you are using a full-width image or not. If you visit the Pix & Hue home page, the very first image is full-width as it takes up the entire screen. Compare it to the other images on the home page, which are much smaller and do not extend the entire width of the site. To help you, Pix & Hue recommends the right size for the featured images of all of our themes.
Once you know the size of your image, open up the image inside Adobe Photoshop (or similar). From the top menu, select Image > Image Size. Set the width to the necessary size. Save your file.
Compress Images with TinyPNG
You have already made important adjustments to your images by simply resizing them to what you actually need. However, you can take it a step further and compress images with free online tools. By compressing your images, you can further reduce the size of a file and improve your load time even more.
I use TinyPNG for this final step – its simple and free. Follow the instructions on TinyPNG to drag and drop your image file. Download the compressed file and use this resized, compressed file on your WordPress site.
By following these simple steps, I was able to reduce the size of the featured image of this post from 4.1MB to 106KB. Follow these 2 easy steps for each and every image on your site, ensuring your WordPress loads faster and keeps your readers from leaving too soon.