Images are everywhere on your website, and for good reason. They catch the eye, tell your story, and make your pages come alive. But images are also one of the most misunderstood elements of a WordPress site, and image optimization matters more than you might think.
Used well, images work hard for you. Used carelessly, they slow your site down, hurt your SEO, and cost you visitors before they ever read a word you’ve written.
This page walks you through the mechanics of using images effectively, from file types and sizing to media library management and making every image work for your business. No complicated tools required. Just practical knowledge you can put to work today.
Why Image Size Matters
Imagine a busy highway. Motorcycles zip through easily. Cars move smoothly. Minivans take up a little more space. Pickup trucks take even more space. And then there’s the semi, taking up the whole lane and slowing everything down behind it.
Your website’s bandwidth works the same way. Every element on your page, text, buttons, and menus, is sharing that highway. And your images? They’re often the semis. Oversized, unoptimized images clog your bandwidth, slow your page load time, and frustrate visitors into clicking away before your page even finishes loading.
The good news? You control the size of your vehicles. And that’s exactly what this page is about.
Image Optimization Basics: JPG, PNG, and WebP
Not all image files are created equal. The format you choose affects both the quality of your image and the size of the file you are uploading to your site.
JPG is best for photographs and images with lots of color variation. It uses compression to keep file sizes smaller, making it the right choice for most blog images. There is a small tradeoff in quality, but for web use you will rarely notice it.
PNG is best for images with sharp edges, text, logos, or transparent backgrounds. It preserves quality better than JPG, but file sizes are typically much larger. Use PNG when you need crisp detail or transparency, and JPG for almost everything else.
These are the two most common image formats you’ll see as a blogger. Recently, I have also been seeing more mention of newer formats like WebP and AVIF. After looking into them, I found that they can offer excellent compression and quality, and WordPress supports them. But when I tried to create one myself, I noticed that common image editing tools, like the Windows Photos app, don’t yet allow you to create or save in either format.
For now, just know that changes and improvements are coming. You do not need to worry about mastering those newer formats today.
Understanding Pixel Dimensions vs File Size
This is where a lot of people get confused. So let’s use an analogy from our linen closet to understand it better.
Think about your bed. A twin sheet, a twin blanket, and a twin comforter all have roughly the same dimensions, and they fit the same size bed. But try to fold them and put them on a shelf, and each one takes up a very different amount of space. The comforter is bulky. The sheet folds down flat. Same dimensions, but very different file sizes on the disk.
Now compare a queen sheet to a twin comforter. The queen sheet has larger dimensions, and it covers more of the bed. But notice that it folds down and takes up less shelf space than that twin comforter. In this case, the larger dimensions would actually result in a smaller file size on the disk.
Your images work the same way. Pixel dimensions tell you how large the image is visually, its width and height in pixels. File size tells you how much space it takes up on your server. A large-dimension JPG saved with compression might actually be a smaller file than a small-dimension PNG saved without it. Dimensions and file size are related, but they are not the same thing.
Image dimensions are important when a platform requires a certain dimension. This is common with social media platforms. But when someone is loading your page, it is the file size that has the bigger impact on download speed.
Mobile vs Desktop
Here is another thing most bloggers don’t think about. Your visitors are not all seeing your images the same way. Desktop users have wide screens with plenty of room to display large, detailed images. Mobile users are working with screens roughly 375 to 430 pixels wide.
Suppose you upload an image that is 2000 pixels wide for your blog. A desktop user might appreciate the detail. But a mobile user’s phone has to download that same large image and then scale it down to fit a much smaller screen. All that extra image data still has to travel across the internet, even though the visitor cannot really benefit from it. That is extra weight on your highway for no good reason.
Today, more than half of all web traffic comes from mobile devices. That means more than half of your visitors could be slowed down by oversized images. Sizing your images appropriately for their intended use, and keeping mobile users in mind, is one of the easiest ways to speed up your pages and keep visitors from clicking away.
What Size Should Your Images Be?
Now that you understand file formats and the difference between dimensions and file size, let’s talk about targets. How big should your images actually be?
Blog and Page Images
For images used on your blog pages, aim to keep each image under 100KB. Some images can and should be even smaller. Text-heavy graphics, icons, and simple illustrations can often come in well under 50KB without any visible loss in quality. The smaller the file size, the faster the image can download, especially on mobile devices.
Every kilobyte adds to your page load time. When you have multiple images on a page, those kilobytes add up fast. Keeping each one lean is one of the most impactful things you can do for your page speed and your SEO.
Ads
Many ad posting sites have their own image requirements, and a common threshold is 200KB or less. Always check the specs for each platform you use. Staying under 200KB keeps you within limits and helps your ads load quickly for potential customers.
Social Media
Social media platforms each have their own preferred image dimensions, and they change periodically. Here are the most commonly recommended sizes as a general guide:
- Facebook post image: 1200 x 630 pixels
- Facebook cover photo: 820 x 312 pixels
- Instagram square post: 1080 x 1080 pixels
- Instagram portrait post: 1080 x 1350 pixels
- LinkedIn post image: 1200 x 627 pixels
- Pinterest pin: 1000 x 1500 pixels
- X / Twitter post image: 1600 x 900 pixels
Notice that social media images tend to be larger in pixel dimensions than blog page images. That is intentional. These platforms display images prominently and at higher resolution. But you still want to compress them before uploading to keep file sizes reasonable.
Before You Upload Your Image
What you do before you upload an image is just as important as where you place it on your page. Taking a few extra minutes before uploading saves you time, server space, and headaches down the road.
Crop and Resize
Decide where the image is going to be used and what dimensions it needs, then resize it to those dimensions before uploading. Depending on the image, you may need to crop it first and then resize it.
Do not rely on WordPress or your theme to handle this for you. While WordPress does generate multiple sizes automatically, uploading an oversized image means that the full-size version lives in your media library and on your server, taking up space and potentially being served when it shouldn’t be.
The right workflow is simple. Resize first, then upload.
Rename
Before you upload, give your image a descriptive file name. This helps you stay organized, makes images easier to find in your Media Library, and can be a huge help if you ever need to restore files from a backup.
A file named “blue-widget-product-photo.jpg” serves you far better than “IMG_4872.jpg” because it tells you what the image is before you even open it.
Use lowercase letters, separate words with hyphens, and keep the name descriptive but concise. Think about what the image shows, what page it belongs to, and what words you would use if you had to search for it later.
A good file name does not replace good alt text. You still need to add clear, descriptive alt text after uploading the image.
Compress
After cropping and resizing, check the file size before uploading. Many times, getting the dimensions right will also bring the file size down where it needs to be.
If the image is still too large, then use a compression option before uploading it. Compression reduces file size while trying to preserve the visual quality of the image. In many cases, you will not notice much difference on the screen, but your website will notice the smaller file size. Just remember, there is always a balance between compression and image quality.
Some image editing tools, including the Windows Photos app, may give you options to reduce the file size when saving or exporting an image. If needed, there are other online tools that can also help with compression. I do not have a recommendation because I have not needed one. If you need one, just use tools you are comfortable with and understand.
The goal is simple: get the image to the right dimensions first, then check the file size. If it is still too large, compress it before uploading instead of trying to fix it after the fact.
My Resizing Workflow
Here is the workflow I use for my images:
First, I go through all the original PNG files.
- Open the PNG file.
- Select re-size image.
- Select the .JPG format.
- Save a copy as JPG. Use the same file name, but the new extension (.jpg).
If I need to crop any, I use the new JPG file. Open each file, Edit and crop, then save a copy. I use the <original-file-name>-crop.jpg
Then for each of the new JPG files start with the cropped file if you needed to crop them. Otherwise, start with the JPG file.
- Edit the JPG.
- Select re-size image.
- Replace the larger of the pixel width or height with 1200 (if your image is 2400 x 1600, replace the 2400 with 1200), and the other dimension will automatically adjust.
- Save a copy. I use the <original-jpg-file-name>-1200px.jpg.
- Repeat and save for 800px.
- Repeat and save for 500px.
This gives you three ready-to-use versions at different sizes depending on where the image is going.
NOTE: I also save a copy of the large image, either the PNG or the JPG. If you delete them, you cannot easily make the smaller image large again without it appearing grainy.
WordPress Media Library Basics
Your WordPress Media Library is like a filing cabinet. If you never clean it out, it fills up with duplicates, outdated files, and images you uploaded once and never used again. A bloated media library slows down your admin, takes up server space, and makes it harder to find what you need.
Think about a real filing cabinet. How much longer does it take to find what you need when you have to sort through papers you no longer use? Your media library works the same way. The more clutter you keep, the harder it is to manage.
How the Library is Organized
By default, WordPress organizes your media library by upload date. Every image you upload is stored in a folder structure based on the year and month it was uploaded, for example /wp-content/uploads/2025/06/. This is important to understand for two reasons. First, it means older images are not going anywhere on their own. They stay in those dated folders indefinitely. Second, it affects how you back up and manage your files, which we cover in the next section.
Duplicates and Multiple Copies
It happens to everyone. You upload the same image twice. You edit an image and upload the new version without deleting the old one. WordPress itself generates multiple copies of every image you upload, such as thumbnail, medium, large, and full size, to serve different contexts on your site.
The result is that your media library can have far more files than you realize. Periodically reviewing and cleaning out true duplicates keeps things manageable.
Finding Unused Images
One of the trickiest housekeeping tasks is identifying images that are sitting in your library but not attached to any page or post. WordPress does not flag these for you automatically in a big obvious way.
The only way I have found to check this within WordPress is to change the Media Library view from thumbnail/grid view to list view. In list view, WordPress can show which images are unattached to a page or post, and you can sort the list so those images appear together.
However, unattached does not always mean unused. Your site icon, header images, background images, sidebar images, or images used by your theme may also show as unattached. So yes, this can be a helpful cleanup tool, but do not delete randomly. Have a backup first, and verify usage before removing anything.
Resizing Within the Library, Good or Bad?
WordPress does allow you to do some basic editing directly in the Media Library, including cropping, scaling, rotating, and flipping an image. For a quick minor adjustment, this can be convenient.
But as a general practice, it is better to resize and optimize your images before uploading them.
Here is why. When you edit an image in WordPress, WordPress keeps the original image so you can restore it if needed. It may also create additional edited versions of the image. That means you can end up with the original file, the standard WordPress image sizes, and the new version created by your edit.
In other words, editing in WordPress may solve the visual problem, but it does not necessarily solve the storage problem. It can actually add more files to your server and create confusion about which version is being used on your page.
When in doubt, do your editing outside of WordPress first. Crop it, resize it, check the file size, then upload the version you actually want to use.
One Exception: Header Images
There is one place where editing inside WordPress may make sense: header images.
For our sites, header images should be 426 x 100 pixels. In some cases, the process may start with uploading a larger image and then using WordPress to crop different header images from that original image. This is different from uploading oversized images for regular blog pages and hoping WordPress will handle them.
For regular page images, crop and resize before uploading whenever possible. For header images, follow the process being taught for your site, but still remember the goal: the final header image should be the correct dimensions and should load quickly.
Keeping It Lean
A lean media library is a healthy media library. Some practical habits to build:
- Delete images you no longer use, but always back up first.
- Avoid uploading multiple versions of the same image to test which one looks better. Do that testing locally before uploading.
- Periodically audit your library.
- Use descriptive file names before uploading, as covered in the previous section.
The Importance of Image Backup
Before you delete a single image from your media library, make sure you have your own backup of all your images. This is not optional. Your image backup is separate from your page content backup, and you need both.
Do not assume that someone else is backing up your images for you. If you are building pages, uploading images, creating ads, and adding content to your website, you need to keep your own copy of that work.
Images represent real time and effort. You may have searched for them, created them, edited them, cropped them, resized them, renamed them, and uploaded them. Losing them to an accidental delete, a website issue, or a cleanup mistake would be frustrating and could be very difficult to recreate.
Because WordPress organizes uploaded images by year and month, you can also organize your own backups the same way. Keep a folder on your computer, an external drive, or cloud storage for your website images. Once your older images are saved, future backups can be as simple as saving the newest images you upload.
A few habits worth building:
- Keep a copy of every image before you upload it.
- Organize your image backups by page, topic, year, or month.
- Back up before doing any cleanup in your Media Library.
- Store backups somewhere outside the website, such as your computer, an external drive, or cloud storage.
- Do not delete images from WordPress unless you are sure you have a copy and have verified they are not being used.
A full site backup is a larger topic and will be covered separately.
SEO and Sharing
Your images are not just visual elements. Every image on your site is an opportunity to improve your search visibility, drive traffic, and make a strong first impression when your content gets shared. Here’s how to make every image work harder for you.
File Names
We already covered file names in the upload section, but they matter here too. A clear file name helps you stay organized, makes images easier to find later, and gives search engines a little more context about what the image contains.
A good file name does not replace good alt text, but it does support the overall image optimization process.
Alt Text
Alt text serves three purposes. First, it helps people who use screen readers understand what the image shows. Second, it gives search engines more information about the image. Third, it can display in place of the image if the image fails to load, helping visitors understand what should have been there.
Good alt text is descriptive and natural. It should tell you what the image shows and, when it makes sense, include a relevant keyword without feeling forced. “Woman working from home on laptop” is better than “image1” or leaving it blank entirely.
Social Image
Every page and post on your WordPress site should have a social image assigned to it. This is the image that appears when someone shares your link on Facebook, LinkedIn, or other social platforms. Without it, the platform will grab whatever image it finds first or display nothing at all.
In Rank Math, this is set in the Social tab of the SEO settings for each page or post. Take the time to set it intentionally. Choose an image that is visually compelling and sized correctly for social sharing. 1200 x 630 pixels is a safe standard. This image is often the first impression someone has of your content before they ever click through.
Making Images Work for You
It is my opinion that every important image on your pages should have a link attached to it, even if that link points back to the same page the image is already on.
Here is why this matters.
When someone finds your page through a search engine, they may be seeing your image in Google Search. This is one of the reasons we use descriptive alt text and include key phrases naturally when they fit. If someone is interested enough to click on that image, you do not want that interest to become a dead end.
If the image is linked to your page, another helpful page, or an offer, that click has somewhere useful to go. That image is no longer just decoration. It is doing a job.
Make it a habit. Every important image gets a link because it opens another door into your site.
Do Fresh Images Matter?
When you refresh or update a page, take a look at the images too. Are they still accurate? Do they still support the message of the page? Are they sized correctly? Do they still look current?
For some topics, freshness matters more than others. A page about current events, trends, products, technology, or seasonal information may need newer images more often than an evergreen how-to page. But even on an older page, outdated images can make the whole page feel neglected.
That does not mean you need to re-upload every image just to make it look new. The image should actually be useful, accurate, and appropriate for the updated page.
Make image review part of your regular content review process. When you revisit an older page to update the text, take a look at the images too.
Quick Image Checklist
Before you upload an image, make sure it is the right file type, cropped to what you need, resized to the correct dimensions, named clearly, and small enough for the page.
After you upload it, add descriptive alt text, assign a link when appropriate, and set the social image for the page or post.
And before you clean up your Media Library, back up your images first.
Putting It All Together
Images are one of the most powerful tools on your website, and one of the most overlooked when it comes to performance. The difference between a page that loads in one second and one that takes five seconds is often sitting right in your media library.
The good news is that none of this is complicated once you know what to look for. Size your images before you upload them. Keep your media library clean and backed up. Make every important image do a job, with a link, with alt text, and with a social image set for every page.
Your visitors may never notice when you get all of this right. But they will notice when you don’t. A fast, well-optimized site builds trust, keeps people on your pages longer, and gives your content the best possible chance of being found.
Image optimization matters because your images matter.
It’s all about your image, in every sense of the word.