Resize, compress, upload. It’s all about reducing your image file size as much as possible without sacrificing quality. Here’s how in a few simple steps.
Table of Contents
Step 1: Pick the right file format
Step 2: Know your size & compression targets
Step 3: Choose your compression/resize tool type
Step 4: Narrow it down to a specific tool
Why This Matters
Images have large file sizes. Large file sizes equal long load times for your site.
On mobile, as load time went from 1 to 5 seconds, customers were 90% more likely to leave the site
If you just upload your images to your website as they are, they will slow down your website load times and overall speed (some site builders won’t even let you upload the images if they are too large). Large image files can also take up a lot of storage and bandwidth. And they can make your backups slower.
Another thing—search engines like fast websites so, if your site is slow because of a lot of beautiful (but painfully large) images, it can really affect your search engine placement.
With a bit of extra work (like compressing and resizing your images before you upload them to your site), you can have really beautiful images and a speedy site.
Step 1: Pick the right file format (JPEG, PNG, GIF?)
JPG: This is the format you’ll use most often for photos and images.
PNG: Use this for images with a transparent background, for logos (logos will have a transparent background), or for screenshots.
GIFs: Use this for animation.
Step 2: Know your size & compression targets
Where to start:
- Start with a big, high-quality image (for reference, smartphones take high-quality images that are 3MB and bigger, or 3000 x 5000 pixels or more).
- Use your own photos or quality stock images.
- Don’t take a small image and size it up (it will end up pixelated or blurry).
- To find out what size your image is right now, go to where your image is stored on your computer, right-click on your image, and select “Get Info.” You’ll see “Size listed” and, under “More info,” you can see dimensions as well.
Compression guidelines:
- Hero (larger full-screen top image) or background images should be your biggest file sizes: less than 1MB
- Medium size images: ~ 300Kb
- Smaller images: < 300Kb
- Somewhere between 60% and 80% compression is a good general guideline
Sizing guidelines:
- Think in pixels instead of file size
- Pixels are a small unit of measurement. For example, most websites are about 1300px by 1900px
- Consider how big your image will be on the page, and resize accordingly. (Half of the page size? Take it down to around 500px wide. ¾ of the page? Resize to around 650px.)
Recommended image sizes for WordPress:
WordPress can automatically create 4 different image sizes when you upload an image (sometimes your theme will auto-resize as well):
- Thumbnail size (150 x 150px)
- Medium: 300 x 300px
- Large: 1024 x 1024px
- Full size: original size of uploaded image
You can go into your WordPress dashboard and change the default settings here:
- WP Admin Dashboard / Settings / Media
- Adjust default image settings, then save changes
Check your theme support if your images are resizing and not updating when you change the default settings.
Step 3: Choose your compression/resize tool type
There are 3 main types of compression tools. We’ll go into more detail on the individual tools options later but, to get started, here are some pros and cons for each:
Editing software
- Pro: If you already have the software (Adobe Photoshop, GIMP, Affinity Photo, On1Photo) or if you’ve always wanted to get it and learn, this is a good opportunity to do so.
- Pro: Lets you control everything from your computer, offline if needed.
- Pro: Includes resizing so you can do everything (compression & resizing) at once.
- Con: Can be more time-consuming to learn.
- Con: Can be expensive, depending on what software you choose (some are free).
Web tools
- Pro: Easier to use than editing software.
- Pro: Can queue up more than one image to compress at a time (depending on which tool you use).
- Con: Resizing not included in free tools (is included in most paid versions).
- Con: Need internet connection.
Plugins
- Pro: Keeps everything in WordPress.
- Pro: Some plugins include compression and resizing.
- Con: Can slow down your server while it compresses (look for a plugin that uses its own servers to compress your images).
- Con: Must work well with your theme and other plugins.
Tip: Experiencing decision paralysis? The most important thing is that you choose one of these tools to help you resize and compress. There’s no wrong choice here. Just pick one and try it.
Step 4: Narrow it down to a specific tool
Now let’s look at the specific options within these three types of compression and resizing tools and their pros and cons.
Editing software options:
Adobe Photoshop
- Costs money, but might be worth it if you will use it for other things
- Does resizing and compression
GIMP
- Free
- Does resizing and compression
ImageOptim
- Free for Mac users
- Compression only (you will have to use another tool to resize your image first)
- Removes all metadata and unnecessary color profiles
- Super easy to use (just drag images in)
- Use default settings, or go into Preferences → Quality, check “lossy”, and move the quality down to compress the image more
Trimage
- Free for Windows (this is the Windows version of ImageOptim)
- Compression only (you will have to use another tool to resize your image first)
RIOT
- Windows only
- Compression only (you will have to resize first to get your image small enough, and will need another tool to resize)
- Super easy to use (just drag images in)
- Automatically suggests compression level
- Can queue up as many images as you need
- Shows side-by-side comparison
Free web tool options:
Optimizilla:
- Free compression only (you will have to use another tool to resize your image first)
- Good balance of image size & quality (not as small as Compressor but slightly better quality)
- Lets you queue up to 20 images
- Set individual quality levels and preview them compared to the original image
Kraken.io:
- Free compression, pay for resize
- Good balance of image size & quality
- Can only resize one image at a time
Compressor.io:
- Free compression, pay for resize
- Very small image size, with slightly less quality than Kracken or Optimizilla
- Can only resize one image at a time
Try before you buy:
- TinyPNG is free for a certain number of images, then paid
- JPEG Mini has a free trial
- There are many other options as well, with a variety of free trials and paid services
Plugin Options:
Simple starter plugin:
Imsanity
- Free to use with no limits or paid versions
- Allows you to set a “sanity” limit so it automatically rescales large image uploads
- Good for new blogs
- Simple interface (no tutorial needed)
- Bulk resizing available
- Doesn’t require an API key setup*
- Doesn’t have backup or metadata* removal
Plugins with more features:
WPSmush
- Free
- Resize & compress
- Bulk-optimize up to 50 images with one click (file sizes can’t be larger than 5MB)
- Lossless* compression
- Compatible with PNG, JPG & GIF
- Includes lazy loading option
- Locates images that are slowing down your site
- Uses their servers to lessen strain
ShortPixel
- 100 Free image credits per month
- Three different compression algorithms (lossy, lossless, & glossy JPG for photographers)*
- Includes resizing & can resize & optimize PDFs in bulk
- Optimizes images in the cloud so your server doesn’t suffer
- Keep or remove EXIF data
- Backup options
- Does require API key setup*
And that’s it! From there, you upload your images without making your site slow as molasses.
Extras
Translations:
Lossy: Compression type that favors the smaller size over the quality of the image.
Lossless: Compression type that favors quality of image oversize.
Image size: The dimensions of an image (for example, 1024 x 680 pixels).
File size: The amount of space needed to store the image on the server (for example, 350 kilobytes).
Metadata: Data that’s stored with your image (what time you took the photo, camera type, location, etc. This is mostly information you do not need for your website and can strip out to help with faster load times).
API key setup: This sounds technically difficult, but it’s not. You’ll get an email with your key, and it’s a one-time setup for some plugins. Not tricky, but it is an extra step.
Dpi” & “save for web”: “Save for web” has to do with dpi (dots per inch) and image resolution. Most computer monitors display only at 72 or 92dpi, so that is all you need. “Save for web” simply saves your image at that web-friendly resolution. Use it.
By comparison, if you are printing an image out, you want at least a 300 dpi. But if you use 300dpi for the web, all that extra is a waste (and an anchor for your speed).
Quality score: Some compression tools will have a quality score (Photoshop, for example). Most of the time you will not be able to see the difference in quality between an image with a quality score of, for example, 100 and a score of 80. If that’s the case, take it down to 80 to reduce the file size.
Keep an eye on your load times
Use Google’s PageSpeedInsights tool to see how your images are affecting your page load times.
Note: there are a lot of compression & resizing tools out there. We wanted to list a range of options, but they are in no way an extensive list or in any order. We did choose tools that are highly rated and that have good support.
Best Practices for Compressing & Resizing Images
Table of Contents
Step 1: Pick the right file format
Step 2: Know your size & compression targets
Step 3: Choose your compression/resize tool type
Step 4: Narrow it down to a specific tool
Why This Matters
Images have large file sizes. Large file sizes equal long load times for your site.
On mobile, as load time went from 1 to 5 seconds, customers were 90% more likely to leave the site
If you just upload your images to your website as they are, they will slow down your website load times and overall speed (some site builders won’t even let you upload the images if they are too large). Large image files can also take up a lot of storage and bandwidth. And they can make your backups slower.
Another thing—search engines like fast websites so, if your site is slow because of a lot of beautiful (but painfully large) images, it can really affect your search engine placement.
With a bit of extra work (like compressing and resizing your images before you upload them to your site), you can have really beautiful images and a speedy site.
Step 1: Pick the right file format (JPEG, PNG, GIF?)
JPG: This is the format you’ll use most often for photos and images.
PNG: Use this for images with a transparent background, for logos (logos will have a transparent background), or for screenshots.
GIFs: Use this for animation.
Step 2: Know your size & compression targets
Where to start:
Compression guidelines:
Sizing guidelines:
Recommended image sizes for WordPress:
WordPress can automatically create 4 different image sizes when you upload an image (sometimes your theme will auto-resize as well):
You can go into your WordPress dashboard and change the default settings here:
Check your theme support if your images are resizing and not updating when you change the default settings.
Step 3: Choose your compression/resize tool type
There are 3 main types of compression tools. We’ll go into more detail on the individual tools options later but, to get started, here are some pros and cons for each:
Editing software
Web tools
Plugins
Tip: Experiencing decision paralysis? The most important thing is that you choose one of these tools to help you resize and compress. There’s no wrong choice here. Just pick one and try it.
Step 4: Narrow it down to a specific tool
Now let’s look at the specific options within these three types of compression and resizing tools and their pros and cons.
Editing software options:
Adobe Photoshop
GIMP
ImageOptim
Trimage
RIOT
Free web tool options:
Optimizilla:
Kraken.io:
Compressor.io:
Try before you buy:
Plugin Options:
Simple starter plugin:
Imsanity
Plugins with more features:
WPSmush
ShortPixel
And that’s it! From there, you upload your images without making your site slow as molasses.
Extras
Translations:
Lossy: Compression type that favors the smaller size over the quality of the image.
Lossless: Compression type that favors quality of image oversize.
Image size: The dimensions of an image (for example, 1024 x 680 pixels).
File size: The amount of space needed to store the image on the server (for example, 350 kilobytes).
Metadata: Data that’s stored with your image (what time you took the photo, camera type, location, etc. This is mostly information you do not need for your website and can strip out to help with faster load times).
API key setup: This sounds technically difficult, but it’s not. You’ll get an email with your key, and it’s a one-time setup for some plugins. Not tricky, but it is an extra step.
Dpi” & “save for web”: “Save for web” has to do with dpi (dots per inch) and image resolution. Most computer monitors display only at 72 or 92dpi, so that is all you need. “Save for web” simply saves your image at that web-friendly resolution. Use it.
By comparison, if you are printing an image out, you want at least a 300 dpi. But if you use 300dpi for the web, all that extra is a waste (and an anchor for your speed).
Quality score: Some compression tools will have a quality score (Photoshop, for example). Most of the time you will not be able to see the difference in quality between an image with a quality score of, for example, 100 and a score of 80. If that’s the case, take it down to 80 to reduce the file size.
Keep an eye on your load times
Use Google’s PageSpeedInsights tool to see how your images are affecting your page load times.
Note: there are a lot of compression & resizing tools out there. We wanted to list a range of options, but they are in no way an extensive list or in any order. We did choose tools that are highly rated and that have good support.
adminlogo