Improve Your Website With Correctly Sized Images
The best thing about high-speed Internet is the wealth of amazing pictures available at your fingertips. Pictures are the basis of entire online communities with populations the size of small countries. A cellphone can power a whole stream of shareable visual content for your business. The only problem with high-quality pictures is they are often too big to look right on your website.
Like it or not, a good medium-sized image on your website should be about 400 pixels wide. My dinky smartphone from 2010 captures images that result in sizes up to 2560 by 1920 px. If I wanted to put an image up on Roundpeg’s website that was taken straight from my phone, it would look really wrong. It would literally overflow the display and look like a mistake.
Good thing WordPress lets you re-size pictures on the fly. After selecting a photo from your computer, users have the option of inserting their picture at its original size or letting WordPress display the file at some smaller size, typically 300 by 300 px or 800 by 600 px. Learn more about using images with WordPress.
That’s all well and good, but I want you to do better. Even if you let WordPress display it in a small size, you’re still uploading a great honking image that hogs storage space and drags down the time it takes for pages to load. The solution is to re-size your images ahead of time. It takes just a minute of your time to do things the right way. Like Uncle Scar always said, “Be prepared!”.
Start by finding your photo editor. If you’re a Mac, use the Preview app. Find Tools > Adjust Size in the menu bar, do the deed, and re-save your image with a different name. Windows PCs are trickier. The classic Paint application is one rudimentary tool, or your version of Windows may have image resizing included in its basic photo viewing tool. Pick a sample image and let it open up in the default application to see if you might already have software with the necessary function.
If you find that you don’t have any image editing software at all, please don’t buy Photoshop or Photoshop Elements. That is money you won’t earn back for a very long time. Especially when there are super good free tools to serve you better. Here’s my two favorites:
Paint.net – free download. It’s like a grown-up Microsoft Paint. Simple and flexible. Don’t be put off by the ad-stuffed website, I’ve tested this download and it works really well.
Pixlr Editor Express – free online tool, no download. It’s a really slick interface with quick access to resizing tools. But you can only save as the JPEG file format (PNG is better for web). Choose Pixlr Editor Advanced for more robust options.
For more alternatives to help you do right by your website, check out “6 Photoshop Alternatives for the Casual Designer” by Chris Spooner.