It seems like it shouldn’t really matter that much, but finding an easy way to resize graphics for your blog really is a big deal.
There are countless studies showing what a difference good images can make on a website’s success.
These days your graphics have to be eye-catching. They have to be unique. And they have to not only be memorable, they have to be indexable, searchable and brandable.
As if that weren’t enough, they also have to be the right size.
Having large images on your site can have a dramatic impact on how quickly your site loads.
When the internet really started using graphics rather than all text (yes, I’m that old) we in the technology field would measure internet speed by how long it took CNN, a very graphics-oriented site, to load. If your site loaded slower than CNN, it was way too slow!
These days people just won’t stick around on your site waiting for images to load. A study by Forrester Consulting found that 40 percent of consumers will wait no more than three seconds for a web page to load before abandoning the site and going somewhere else.
Yet most people prefer a site that has a several nice, but relevant, graphics.
Let me point out that we are going to refer to images and graphics in this article: they are interchangeable for what we’re doing here so I’ll probably flip back and forth between the two words. But either way, we’re talking about pretty pictures you see on a website.
What does “resize graphics for your blog” even mean?
Generally, when you work with graphics in any graphics program, the file will be saved in its original uncompressed or natural format, and at its original size. That’s what you want if you are a professional artist or photographer showing off your work.
Otherwise, you need to optimize your graphics for use on the web.
This will not only give you faster loading times but will reduce the amount of space needed. Your hosting company will thank you. And if you pay for storage, your checkbook will too. (does anybody even use a checkbook anymore??)
Two Types of Sizes
There are two types of sizes we are going to be concerned with here: screen size and storage size.
1 – Screen Size
An image’s screen size refers to the height and width of the graphic on the screen. The size is generally measured in pixels, which is the number of tiny dots that actually make up what you can see on your monitor.
A pixel is a single point in a graphic image.
So if you have an image that is 600×300, that means that it is 600 pixels or dots wide, and 300 pixels or dots high.
Let’s say you need a picture of a penguin (cuz who doesn’t?)… so you head out to pexels.com to grab a nice frozen bird. Or at least a picture of one.
You find the perfect photo and download it using the original size. You then upload it to your site.
Well, that image’s size (if you selected the same one I did) is 3000 X 2008.
Why it matters
Most websites will be somewhere between 800-1000 pixels wide because that’s still the most popular viewing size. It goes back to when a really good color monitor had a resolution of 1024×768 and designers didn’t want people to scroll back and forth to see everything. But that’s too geeky for now, so just take my word for it.
If your site is 800 pixels wide, then there is no way you are going to need an image that is 3000 pixels in width. WordPress will have to adjust the size of that image down to probably something less than 600 pixels wide to make it work with your site. And any time that happens, you’re losing valuable loading time for your site.
It’s better if you resize graphics for your blog yourself and don’t upload anything larger than what you need.
The other kicker is that WordPress uploads several other sizes of your image in order to give you options for loading the most appropriate size. (more on that later)
WordPress, by default, will grab the image that most closely matches what it needs for any particular theme, always taking the image just larger than what it needs.
So anything above about 600 x anything is wasted. Again unless you’re going for detailed photos or artistry.
How to fix it
You can start by not downloading the largest or default image. You will likely never need anything greater than a 1280 x anything.
Once you get to know more about blogging and how graphics work, you’ll figure out the optimal sizes you’ll need for your site.
For now, you can either fire up Photoshop (too expensive for my needs) or use one of the many online photo resizing tools.
Some of my favorites are:
Resize the graphics for your blog to a more reasonable size. And make sure that you keep the aspect ratio intact. Otherwise, your images will stretch all funny. (ouch)
But before you throw them up on your site, let’s address the file size.
2 – Storage
A file’s storage size refers to the amount of space it takes up on your web server. This would be the size in kilobytes or megabytes.
Remember that cute little penguin picture you grabbed from pexels.com a little while ago? We’re going to be referring to that again.
That one little picture is actually a big picture, and just took up 1 megabyte of your space.
As you may recall, WordPress uploads several other sizes of your image. There are ways to customize the size and number of images that WordPress saves, but for now, just know that bigger is not always better.
Why it matters
If you have a lot of images or graphics on your blog, you not only run the risk of filling up your hosting storage, but your site will take longer to load if you haven’t learned how to resize graphics for your blog.
To save space and decrease the time it takes for your site to load, you need to make your images as small as possible without losing much quality of the image.
How to fix it
The best way to decrease the storage size of your images is to compress them. Think of compressing files like squeezing all the blank space out of them. You’ll lose a little bit of the quality, but generally not enough to be visible on a website.
You will probably reduce the size of your files somewhere between 40-60% most of the time.
Compressing images can be done using sites such as:
One size does not fit all!
Once you have reduced the resolution or pixel size of your image and compressed it, you are ready to put it on your site!
If you have any favorite resizing or compressing sites, let me know. I’m always looking for a way to save space!