Serving well sized images is critical to a fast website and good user experience. This short and sweet guide will help you resize images that are too big in a flash!
This post is going to strictly focus on helping you resize your WordPress images
There won’t be a lot of “why we do it this way” but just plain old “how we do it this way!“.
Finding Oversized Images
ScreamingFrog
The easiest way is to download ScreamingFrog and do a crawl of your website. ScreamingFrog is free for websites with less than 500 URL’s – if you have more than that you will need to purchase a license, or you can ask us to run a crawl for you for $50.
Once the crawl is complete you can then filter to view only images that are over 100KB so you can see your largest images and where they are located on your website. Below is a screenshot of how it looks.

Finding Oversized Images in WordPress Option 1
This is a much slower way – but free! You can click on your images one by one in the admin to see the File Size in the details box as shown below. (To do it this way we recommend you have your media gallery set to the GRID option located to the left of your media filters).
But doing it this way allows you to use the arrows to easily move back and forth – and you can click the EDIT IMAGE button below the image to do the resizing. You can see below that this image is 144kb and is 1200 by 433 pixels – if we are happy with it we can hit the arrow right and move on to the next.

Finding Oversized Images In WordPress Option 2
Alternately – if you feel comfortable adding some code to your functions.php file, you can add the code below which will show a column in the media area with the image sizes for you to see them a little easier. To see the image sizes you will need to use the LIST style media option instead of the grid format.
Once you add the code to your functions file you will see a column called FILE SIZE as shown in the image below. Then you can just scroll through your media pages to see which ones need to be resized.

add_filter( 'manage_media_columns', 'td_media_columns_filesize' ); /** * Filter the Media list table columns to add a File Size column. * * @param array $posts_columns Existing array of columns displayed in the Media list table. * @return array Amended array of columns to be displayed in the Media list table. */ function td_media_columns_filesize( $posts_columns ) { $posts_columns['filesize'] = __( 'File Size', 'text-domain' ); return $posts_columns; } add_action( 'manage_media_custom_column', 'td_media_custom_column_filesize', 10, 2 ); /** * Display File Size custom column in the Media list table. * * @param string $column_name Name of the custom column. * @param int $post_id Current Attachment ID. */ function td_media_custom_column_filesize( $column_name, $post_id ) { if ( 'filesize' !== $column_name ) { return; } $bytes = filesize( get_attached_file( $post_id ) ); echo size_format( $bytes, 2 ); } add_action( 'admin_print_styles-upload.php', 'td_filesize_column_filesize' ); /** * Adjust File Size column on Media Library page in WP admin */ function td_filesize_column_filesize() { echo '<style> .fixed .column-filesize { width: 10%; } </style>'; }
Resizing Images
Option 1: Resizing Images Within WordPress
- Go to the MEDIA area in your WordPress admin
- Hover over the image you want to edit and click the EDIT link
- Click the EDIT IMAGE button under the image
- Enter the maximum width or height in the Scale Image box (we typically suggest about 1200px as a max width – but this will vary based on your website needs)
- Click Scale
- Go to the page or post in WordPress admin that has the image
- Replace the image on the page with the one you just resized.
You can even crop your images in this area if you want more control. Just click the crop tool, drag the lines to your crop area and hit the crop tool again. If it looks good hit save.
Option 2: Resize The Image Elsewhere And Re-upload
- Click the link for the URL of Image in the spreadsheet to open the image in a browser
- Save the image to your computer
- Use Photoshop or an online tool like ResizeImage.net (instructions below) to resize it
- Go to the page the image is on and find the image that is too large
- Delete that image and replace it with your new image.
Using ResizeImage.net
This is our tool of choice that we use when we do not feel like firing up Photoshop.
https://resizeimage.net/
Here are the basics of how we use it to resize and optimize our image:
1. Upload your image using the Upload an Image button
2. If you need to – you can use the crop tool otherwise skip to 3
3. Rotate your image if it is needed otherwise skip to 4
4. In Resize Your Image in section 4 you will set your image size – we typically use 1200px as the width and then check the Keep Aspect Ratio box. You can also set a specific size if you prefer.
5. You probably won’t need this
6. Select JPG as the Output Image Format
7. Select Normal Compression then set image quality to about 75% or so (you can adjust based on the size of the image) –
8. Click RESIZE IMAGE
9. Now you should see the original image size and compressed/resized image so you can see the difference in size.
Below is a sample of an image I uploaded to ResizeImage.net – if you look at the bottom of the image you can see the original image was 2.6MB and after resizing and compressing with this tool it is just 41KB in size.

2 Dogs Media Website Audit Clients: Image Resizing Tutorial
If you are a 2 Dogs Media website audit client you may have a sheet that looks like the one below. As you can see the images below are absolutely huge – the first one is a whopping 21GB!
The sheet contains 3 columns:
1. Page image is on is where the image can be seen on the website
2. URL of Image is the image location
3. Size is how big the image is

You will follow one of the 2 options above for Resizing, but this sheet will tell you exactly what images you need to resize and where they are on your website so you can easily find and edit it after you resize it.
Final Thoughts
Just a few final thoughts on WordPress Image Resizing.
1. Shoot for under 100kb in size
2. Unless you have huge images on your website for artistic reasons (photographer, artist) – 1200px should be MORE than fine in most cases
3. Use JPGs – gif and png files are too large
4. After resizing you will need to change your images in your post or pages to show the newly resized image
5. When inserting images in a post or page choose an appropriate size! – do not use a large size then scale it down in the editor. When you insert an image block in Gutenberg – you will see image size options – use those!
Questions?
Hit us up!
Leave a Reply