How to Optimize Your Website Images: Tools, Techniques & Common Mistakes

The links in this post may be affiliate links.  That means that if you click them and make a purchase, this site makes a commission.  It will have no impact on the price you pay or the experience of your purchase.

Knowing the right image sizes is only half the battle when it comes to optimizing your website’s images. Let’s discuss how to properly optimize your website Images and the tools that make the job easier.

The Step-by-Step Guide to Resizing Your Images Three Different Ways

We’ve talked about the proper image sizes for your content and the different parts of your website, but maybe now you are wondering, how do I resize my images???

Here’s how to actually implement proper image sizing in your workflow:

Using Canva (The Easy Way)

1. Upload your image to Canva
2. Click on “Resize” in the top menu
3. Enter your desired dimensions (e.g., 1200 × 800)
4. Click “Resize”
5. Download as JPG for photos or PNG for graphics with transparency
6. Run through an optimizer like TinyPNG before uploading to WordPress

Using Photoshop (The Pro Way)

1. Open your image in Photoshop
2. Go to Image > Image Size
3. Enter your desired width (height will adjust proportionally if you keep “Constrain Proportions” checked)
4. Set Resolution to 72 PPI (this is all websites need)
5. Use “Save for Web” and adjust quality to find the sweet spot between size and quality

Using Free Online Tools (The Quick Way)

1. Visit a tool like Pixlr.com or ResizeImage.net
2. Upload your image
3. Set your desired dimensions
4. Download the resized version
5. Run through TinyPNG for additional optimization

I personally use PhotoShop to resize my images and have settings in place where I can batch the process.

I recommend that you set up a consistent workflow so you don’t have to think about it each time. Once you find a method that works for you, stick with it and make it part of your publishing routine.

Image Optimization Tools: My Top Picks

You’re in good hands with any of these tools:

TinyPNG

TinyPNG is an online tool that compresses PNG and JPG files without visible quality loss. 

Why I Love It: You can bulk upload up to 20 images at once with the free plan, and it often reduces file size by 60-80% 

Best For: Quick optimization before uploading to WordPress

Imagify WordPress Plugin

Imagify is a WordPress plugin that automatically optimizes images as you upload them to WordPress. 

Why I Love It: Set it and forget it. It works in the background and has bulk optimization for existing images. 

Best For: WordPress users who regularly upload images 

ShortPixel WordPress Plugin

ShortPxel is similar to Imagify, with a slightly different compression algorithm. 

Why I Love It: It offers a good free tier and handles PDF files too 

Best For: Users who need PDF optimization as well as images

Canva

Beyond design, Canva is  great for resizing images to exact dimensions 

Why I Love It: The resize feature is simple, and you can create templates for common image sizes 

Best For: Creating consistently sized featured images or social media graphics

What Actually Happens When You Upload Oversized Images

I know this looks scary, but trust me – we’re going to figure this out together. Here’s what happens behind the scenes when you upload images that are too large:

1. Slower Load Times

Your 5MB image forces visitors to download all 5MB even if it displays at a size that only requires 200KB. That’s 4.8MB of wasted bandwidth and time.

2. Increased Hosting Costs

Most hosting plans limit bandwidth. If your site gets 1,000 visitors a month and each visitor has to download an extra 4.8MB due to oversized images, you’re paying for an additional 4.8GB of bandwidth unnecessarily.

3. Poor Mobile Experience

Mobile users on limited data plans or slower connections may simply abandon your site rather than wait for huge images to load.

4. Storage Limitations

WordPress creates multiple versions of each image you upload (thumbnails, medium, and large). Oversized originals mean all these versions take up more space, potentially hitting your storage limits faster.

5. Backup Complications

Larger site size means longer backup times and larger backup files to store.

This is totally fixable. By properly sizing images before upload, you eliminate these problems before they start.

Common Image Sizing Mistakes (And How to Fix Them)

Here are the most common mistakes I see with website images:

Uploading Images Straight From Your Camera or Stock Site

The Fix: Always resize before uploading. Create a folder on your computer for “Web-Ready Images” where you place properly sized versions.  

If you are using stock images, you may even want to crop them so they don’t appear the same as images on other sites, especially if you are using free stock photos.

Using PNG When JPG Would Do

The Fix: Use JPG for photographs and images with lots of colors. Reserve PNG for images that need transparency or have large areas of solid color.  You can always convert your images from PNG to JPG as well.

Not Checking Images on Mobile

The Fix: Always preview your pages on a mobile device or using browser developer tools before publishing.

Ignoring Image File Names

The Fix: Rename images descriptively before uploading (e.g., “blue-widget-product-display.jpg” instead of “IMG_4387.jpg”) for better SEO.

Forgetting About Image Alt Text

The Fix: Always add descriptive alt text to images after uploading them to WordPress. This helps with SEO and accessibility.

Your Complete Image Optimization Process

Here’s a simple process to follow each time you prepare images for your website:

1. Determine purpose: Identify what the image will be used for (banner, content, thumbnail)
2. Resize properly: Use the guidelines from our previous post to resize to appropriate dimensions
3. Choose the correct format: JPG for photos, PNG for graphics with transparency, SVG for logos and icons
4. Compress: Run through TinyPNG or a similar tool
5. Use descriptive filenames: Rename with keywords
6. Upload to WordPress: Let your optimization plugin further compress if needed
7. Add alt text: Describe the image for accessibility and SEO
8. Preview: Check how it looks on both desktop and mobile

How to Fix an Existing Site with Oversized Images

If you already have a site full of oversized images, don’t panic! Here’s what to do:

1. Audit your site: Use a tool like GTmetrix or Google PageSpeed Insights to identify problem pages
2. Focus on high-traffic pages first: Homepage, popular blog posts, key product pages
3. Use bulk optimization: Plugins like Imagify or ShortPixel can optimize your entire media library
4. Replace crucial images manually: For hero images and other critical visuals, consider manually replacing them
5. Set up processes for the future: Implement the workflow above for all new content

This is totally fixable. The sooner you address it, the better your site will perform.

Need Help With Your Images?

If you’re feeling overwhelmed by image optimization or you have an existing site with hundreds of unoptimized images, don’t let WordPress intimidate you. You got this!

We are always available if you have questions about properly sizing your website images. Remember, this is one of those small changes that makes a massive difference in your site’s performance, user experience, and even your SEO rankings.

Don’t hesitate to reach out if you need personalized guidance for your specific WordPress setup.