Are you looking to upload images to your WordPress site, but aren’t sure what sizes or filetypes the images should be? Are you unfamiliar with the process of resizing and compressing images for the web? In this article, I’ll explain why using proper image sizing is important for your website, plus show you how to resize and compress your images using the free photo editor GIMP.
Why Resizing Your Website’s Images is Important
Let’s start with why resizing your website’s images is so important.
According to WordPress.org, the overall “physical size” of an image plays a huge role in a website page’s performance. “File size [of an image] dictates the time it takes to load your page; the larger the file size… the longer [a page] will take to load.” In other words, uploading a large file size to your website will slow down the performance of whatever page you add the content to, usually showing up as slower page load speeds in your site’s analytics data.
“File size [of an image] dictates the time it takes to load your page; the larger the file size… the longer [a page] will take to load.”
-WordPress.org
Page load speed, also referred to simply as “page speed,” is “how fast the content on your page loads,” according to the SEO site Moz. Having slower pages can result in higher “bounce rates,” which is a fancy metric representing sessions where a site visitor leaves your site after viewing a single page. Slower pages can also lessen the amount of time visitors spend on your site’s pages, as people may get impatient waiting for a page’s content to load and leave your site more quickly.
These metrics are important because you typically want users spending more time on your site and looking at more pages across your site.
They’re also important because they play a role in how your site ranks on search engine results pages, or “SERPs.” SERPs are simply the results pages that display when you type a word or phrase into Google and hit the enter key. Because larger images are indicative of poor web design practices and negatively affect the user’s experience while on your site, search engines like Google may penalize your site for having these larger images and rank your website below other websites that perform better.
The lower your website ranks on Google, for example, the less traffic your site gets and the more traffic will go to your competitors who rank above you in the search results.
By reducing the file size of your images on your website, you can improve your page speed and thus improve other metrics like bounce rate and time on page to ultimately improve your rankings on search engines.
Note that there are many other important variables that go into search rankings, so fixing your images is only part of a solid SEO (Search Engine Optimization) strategy. However, it is certainly very important for helping your site rank higher on places like Google to help increase your site’s traffic.
How to Resize Images for WordPress in GIMP
So how do you properly resize images for WordPress?
You can decrease an image’s file size simply by decreasing the overall size of the image using scaling and cropping before you upload it to your website. Plus, you can apply what’s called “compression” to your image to further reduce its size.
GIMP, the free and open source photo editor, can accomplish all these tasks while also exporting to recommended “next-gen” file formats to further decrease your images’ file size and improve your site’s performance.
Scale Your Image
To get started on this process, open the image you want to upload to your site into GIMP. You can do this by dragging and dropping your image from your computer into GIMP’s image window, or you can simply go to File>Open when inside GIMP.
If using the File>Open method, navigate to the location of the image on your computer from inside the “Open Image” dialogue that appears, and double-click on the image file once you locate it to open it into GIMP (or click the “Open” button in the bottom right corner of the dialogue window).
At the very top of the GIMP window is a feature called the “Title Bar” (red arrow in the image above). Here, you’ll see your image’s current dimensions (enlarged green box in the photo). My image is 1920×1280 – with the first number, 1920, representing the width of my image (in pixels), and the second number, 1280, representing the height of my image. The final image dimensions you’ll want to use for your image will depend on where in WordPress you intend to use the image, as well as what theme you’re using.
For this tutorial, I’ll resize my image to the standard 1200×630 pixels size that’s recommended for blog post images.
With this in mind, the first thing I’ll want to do is crop my image so that the aspect ratio of my original image matches the aspect ratio of the recommended size. To do this, I’ll grab my crop tool by hitting shift+c on my keyboard or clicking the crop tool icon in the GIMP Toolbox (red arrow in the image above).
Next, in the Tool Options for this tool, I’ll check the box next to “Fixed” (green arrow) and click the dropdown to select “Aspect ratio” (blue arrow).
I’ll type “1200:630” to set my aspect ratio in the text field below the dropdown (yellow arrow). This matches the aspect ratio of the recommended image size I want my final image to be.
Using the crop tool, I’ll now click and drag my mouse across the image to draw the crop area. When I release my mouse, everything outside the crop area will be dimmed (red arrow in the image above – assuming “Highlight” is checked in the Tool Options, which it usually is by default).
By default my crop area has the guides set as “Center lines” (yellow arrow in the image above). I can change this setting using the guides dropdown towards the bottom of the Tool Options. For example, I’ll change my guides to “Rule of Thirds” (green arrow). The various guide options here are based on photography principles, which makes it easy to frame your composition using these principles.
You can hover your mouse over any of the sides or corners of the crop area (i.e. the highlighted area denoted by the red arrow in the image above), then click and drag to resize the boundary of the crop area. Note that you can always see the size of your crop area in the “Size” fields located in the Tool Options (outlined in green in the image above). You’ll want to keep the overall size of the crop area larger than the 1200×630 final size of the image.
You can also click and drag your mouse in the middle of the crop area (red arrow) to reposition the crop on the image.
Once you’re ready to crop the image, click once inside the crop area and your image will be cropped.
Note that if the “Delete cropped pixels” option in the Tool Options is unchecked (green arrow in the image above), your original image boundary will still display around your image via a yellow dotted line (red arrow). You can restore the original image, thus undoing the crop, by going to Image>Fit Canvas to Layers. Only the area of your image inside the canvas boundary will be exported.
Our image is now cropped to the aspect ratio we want, but if you look once again at our image dimensions in the “Title Bar” you’ll see that the image is 1532×804 (outlined in green and enlarged in the above photo – your dimensions will likely be slightly different based on how large you drew your crop area on your image). We’ll need to now scale our image to match our desired dimensions.
To do this, go to Image>Scale Image (red arrow).
In the “Scale Image” box that appears, under “Image Size,” make sure the chain link icon next to the “width” and “height” boxes is linked (red arrow in the above photo). Then, change the “Width” of your image to 1200 (green arrow). Hit the tab key. The height of the image will automatically update to “630.” Under “Quality,” make sure the “Interpolation” dropdown (blue arrow) is set to either “NoHalo” or “LoHalo” for best image quality after the scaling. (For more information on interpolation, check out my tutorial on the subject).
Hit the “Scale” button to scale your image (yellow arrow).
Once the scaling is complete, check out the image dimensions in the Title Bar. You should now see an image size of 1200×630 – the exact size we want! So, what do we do now?
Compress Your Image by Exporting to WebP
Cropping and scaling the image reduced the file size by reducing the height of the image from 1920 to 1200 pixels, and the width from 1280 to 630 pixels, but we can reduce the image size even further by applying compression when we export the image.
So, we now need to export the image to a file format that will apply compression to the image without noticeably reducing the quality of the image. While JPEGs are always a good option, there’s an even better option now available: WebP.
The WebP format applies more compression than JPEG while affecting the quality of the image less than a JPEG does. In other words, you’ll get a better looking image with a smaller file size. Plus, WebP formats are supported by all top 5 web browsers.
To export to WebP, go to File>Export As (red arrow).
Click on any of the folders in the “Places” section (outlined in green) to choose the image on your computer where you’d like to save your image. You can simply double-click a folder to enter it, and see what folder you’re in next to the “Save in Folder” title (red arrow). Then, rename your image to whatever you’d like – just make sure you end your image name with the extension “.webp” (blue arrow) to export the image in the WebP format. When you’re ready, click “Export” in the bottom right corner of the window (yellow arrow).
Next, the “Export Image as WebP” dialogue will appear. Make sure “Lossless” is unchecked (red arrow). I typically set the “Image Quality” to 80 (blue arrow – this is a percent, so the lower the percentage the lower the quality of the image will be, but the smaller the image file size will be). If your image does not contain transparency (i.e. a logo with no background), you don’t have to worry about the “Alpha quality” slider (in fact, in an experiment I performed, lowering the alpha quality from 100 to 90 actually slightly increased the file size of an image with a transparent background from 8.50 kb to 8.52 kb). The “Source Type” dropdown you can keep set to “Default.”
Whether or not you want to check or uncheck any of the metadata options, including Exif data, ITPC data, and XMP data, is up to you. Exif and XMP data are metadata typically assigned by your camera that describe information about your photo like what model of camera was used or what type of lens was used. ITPC, on the other hand, is used by members of the press and assigns information to your image such as ownership, rights, and licensing. If you’re not sure what to do, just leave these options checked.
Likewise, you are fine leaving the “Save color profile” option unchecked as most browsers will automatically use the sRGB color space to display your image, which is what GIMP uses. If you are using a different color profile, you’ll want to leave this checked. Also, if you’re worried about the image not being displayed properly for certain browsers, leaving it checked only adds a few kb to the overall image size.
Finally, the “Save thumbnail” option can remain unchecked, which will further save us some kilobytes.
Click “Export” (yellow arrow in the image above) to export the image to the WebP format. When comparing the exported WebP file to a JPEG file that is the same size and also has its quality set to “80,” the WebP image comes in at about 30 kb, or approximately 25%, smaller in size than the JPEG.
You can now log in to your WordPress site and navigate to the page or post where you want to upload your image, or simply navigate to the “Media” section using the main navigation and drag and drop your image into the Media Library. In my case, I’ll navigate to “Post” using the main navigation (red arrow in the image above) and will click on “Blog Post 1” (blue arrow) to edit that blog post.
I’ll then open the Post Settings Sidebar (red arrow) and scroll down to the “Featured Image” section and expand this section (blue arrow). Then, I’ll click the image to replace it with my new image.
I’ll navigate to the “Upload Files” tab (red arrow), and can drag and drop my image from my computer into WordPress (blue arrows).
Finally, I’ll click “Set Featured Image” to apply this change (red arrow).
Click “Update” (red arrow) to update your page with the new featured image.
If I click “View Post,” (blue arrow)…
…you’ll now see the new featured image displayed at the top of my blog.
That’s it for this tutorial! If you want to learn more about designing a WordPress website, I recommend checking out my WordPress 6.0 for Non-Coders Course! Or, if you want to learn more about GIMP, check out my GIMP 2.10 Masterclass on Udemy!
