Fact: Online media has become increasingly image-dependent.
Fact: Using images in your online publishing gives your ideas more credibility.
Fact: Using images at the wrong sizes, without optimizing them for the web, can drag down performance of your website, with negative usability and SEO consequences.
Now that you know where to find high quality images without stealing them, it’s time to learn how to properly crop and size them for the best balance between appearance and speed.
But I don’t know HOW to use Photoshop!
No worries, non-designy readers.
There’s a nifty FREE tool that will help you get your images web-ready in less than two minutes, without making a career change.
What size SHOULD my images be?
Excellent question, Grasshopper. There are three components to sizing images for the web, and most non-designers find this nomenclature confusing, so we’ll try to handle that first so you understand what you’re shooting for.
Size = pixels wide by pixels tall
First, there’s the plain old pixel dimensions. For the best performance, you never want to upload an image to your site that is LARGER than you need it to be and just tell WordPress to make it 70% of its original size. That puts load on the server to do the math each and every time the image is loaded, and users are actually downloading the oversized image over and over again.
So – if your blog has a content area that’s 600 pixels wide (you can measure this with a Chrome extension like Page Ruler if you’re not sure) – then if you want an image that will span the width of your content, how wide does it need to be, pixel wise?
What’s that? You said 600 pixels? A truckload of Rice-a-Roni to the lucky winner!
Actually, 580 would probably be even better, just to make sure it colors inside the lines of the padding in your design.
If you want an inset image that’s half the width of your content, so text can wrap around it, it needs to be…divide by 2…carry the 1…you get the picture.
So once you’ve figured out how many pixels you need in at least one direction, you know what size image you need to purchase.
Hint: Don’t overbuy the image size – pay attention to the dimensions listed from the stock agencies. You don’t need a bunch of extra pixels to just have to throw away – but don’t underbuy either. You can always size DOWN, but never UP with images.
Resolution = pixels per inch
Different images come out of cameras at different resolutions, or pixel density. You might have an image that’s 300 ppi (ideal for print), 240 ppi (some cellphones produce this size), or 72 ppi (screen resolution).
For screen, you always want 72 ppi. That’s all they can display. So if you have an image that is higher resolution than that, you’ll need to size it down to 72 ppi. Don’t worry, this tool I’m about to tell you about handles that automagically.
Quality = amount of compression
The third factor you have to look at when sizing images is the amount of compression applied to the image to make it smaller. For example, every time you re-save an image as a .jpg, it compresses even further, because JPEG is what’s called a “lossy format” – unlike .psd or .tif formats, which preserve every single pixel.
This is why you probably have some images on your hard drive that have been saved over and over again as .jpg that now look like they have worms – those little squiggles that appear around the edges of things when an image is overcompressed. This is especially noticeable with text. See the squiggles surrounding each letter below?
We DO want to apply some compression to images to make them smaller, so they’ll load faster, and this is expressed as image quality. I find that an image quality between 60 and 80 for photographs is the best balance between compression and quality.
All good image manipulation tools will show you a side-by-side preview of what the original image looks like next to the compressed version. You can increase or decrease quality based on what you’re seeing. Use your reading glasses for this. Go find them.
Now that you understand the 3 parameters for good image optimization – pixel dimensions, resolution, and image quality, you’re ready to go zap those numbers into our handy-dandy tool, Web Resizer!
Using Web Resizer to Prepare Images for Your Blog
Step 1: Acquire the image you wish to work on and put it on your hard drive so it’s ready to upload.
Step 2: Go to http://webresizer.com.
Step 3: Click the orange button that says “Resize Photos Now.” This will take you to a screen with an example image, which is a giraffe at the time of this writing.
Step 4: Find the little gray button at the top that says “Choose image.” This isn’t exactly obvious, but hey – it’s free. Click choose file and browse to your image you’re working on.
Step 5: Click the equally unobtrusive “Upload image” button. Note that there’s a maximum size of 5MB – if your image exceeds that size, it means you probably overbought. The image will upload, and show you a side by side preview:
Step 6: Now it’s time to work the magic. In the New Size field, enter the pixel width you’ve decided your image needs to be. Make sure the “width” radio button is selected. The tool only cares about one dimension at this point.
Step 7: Choose the image quality you want – between 60 and 80. There are some other cool things you can play with, too, like messing with exposure, contrast, tinting, etc. – but you can do that on your own time. We’ve got a blog post to publish here.
Step 8: Click the “Apply Changes” button at the top of the gray area. WebResizer will apply the changes and show you the new file size, which will be shockingly and gratifyingly smaller, on the left side. If you don’t like how the quality turned out, you can click “Start Over” next to the Apply Changes button and try a different number. Lather, rinse, repeat.
Step 9: (optional) – if you do need to crop, now is the time to do it. Above the optimized image, you’ll see a blue link that says “Crop image.” Click it, and you’ll get a crop box with handles on the size and corners. Put in the pixel dimensions you want for your crop, and click the checkbox next to the “lock symbol.” After you get the crop the way you want it, click “Apply changes” down in the gray box again.
Step 10: Click the blue “download this image” link below the optimized preview. The new image is now ready for insertion into your website!
Calling a do-over
Don’t forget – if you’ve EVER clicked the “Apply changes” button and then you decide to change your numbers or your crop, click the “Start Over” button and start again at the top. Otherwise your image will end up looking terrible.