• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

2 Dogs Media - NJ Web Design & SEO

  • Work
  • Services
  • About
  • We Recommend
  • Blog
  • search 2 dogs design
Analytics Blogging Gutenberg Nonprofits Reviews Search Engine Optimization Web Design Tips Website Speed Tutorials Wordpress Tips Wordpress Resource Lists

Disclaimer: Yes, there may be affiliate links in this post – but it is because we love some tools & services we use that much! We may get a small commission if you click on these links and make a purchase. We will NEVER recommend something that we have not used – puppy promise.

Resizing WordPress Images

December 2, 2019 by Jill Caren Leave a Comment

0shares

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.

Screaming Frog Images Over 100KB

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 Images Over 100kb in Media

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 File Size Column WordPress
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

  1. Go to the MEDIA area in your WordPress admin
  2. Hover over the image you want to edit and click the EDIT link
  3. Click the EDIT IMAGE button under the image
  4. 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)
  5. Click Scale
  6. Go to the page or post in WordPress admin that has the image
  7. 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

  1. Click the link for the URL of Image in the spreadsheet to open the image in a browser
  2. Save the image to your computer
  3. Use Photoshop or an online tool like ResizeImage.net (instructions below) to resize it
  4. Go to the page the image is on and find the image that is too large
  5. 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.

Sample of ResizeImage

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

Images Too Big WordPress Audit

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!

 

Other Image Tips

  • Wordpress Image Handling in 5.3 WordPress 5.3 Images: Everything You Need To Know

Categories: Tutorials

About Jill Caren

Jill Caren brings over 12 years of Wordpress and SEO experience to help you improve and grow your website. She has spoken at several events on SEO and has been published in several top SEO publications. You can contact Jill here.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published.

Primary Sidebar

Recent Articles

  • Resizing WordPress Images
  • WordPress 5.3 Images: Everything You Need To Know
  • Keep America Beautiful Launch: Gutenberg Galore

Footer

Let’s Work Together!

Ready for a new best friend? Contact us at 800.397.5631 or if you are on the shy side - use our contact form and we will get back to you in a dog's lick.
phone: 732.241.5365
email: bark@2dogsdesign.com

Sign up for our newsletter!

© 2019 ยท 2 Dogs Media LLC
DMCA.com Protection Status