So it’s your responsibility to add content to your organization’s website? If you’re not also a designer or photographer then this post on image editing for beginners should help.
Crop the Original
Cropping your image is key to creating impactful images that focus in on the right elements. Cropping lets you remove distracting items from the edges of the image, or center to focus onto the most important part of the photo. It can also help you improve the overall composition of the photo. The Rules of Thirds is a basic composition technique that’s very effective.
This hummingbird is beautiful but it’s a little boring in the center of this image.
Cropping the bird closer and positioning him to the right on the 2/3 mark makes the image more intimate and dramatic while giving more breathing room to his giant beak.
How to Resize a Picture for a Website
Rarely will you need to use a full-size, original photo file as is. The originals are usually high enough resolution for print, and much too big for the web. Uploading large images to a website content management system (like WordPress) may make the image appear smaller. But unless it’s actually resizing the image for you it’s probably using the full size file. This will cause your page to load slowly. Have you ever watched an image load on a website — slowly from top to bottom? This is probably why.
You’ll want to size the image to fit, making sure that it has adequate pixel dimensions and proportions. A medium sized, standard size image for web should be approximately 1200 pixels on the longest side. Thumbnails can be much smaller, maybe 200 pixels. If your site is optimized for high resolution displays you’ll need to create a larger image (usually double the size).
Professionals use Photoshop for cropping and sizing but a simple online editing tool like ipiccy.com will work just as well.
Be sure when resizing your image that you don’t stretch it. If you need a horizontal image, don’t try to make a vertical one fit by stretching it. Nothing makes a site look worse than a stretched image. Here our hummingbird has been stretched to make a square image. You’ll see that he’s now taller and distorted. If you square image, crop it instead.
Save and Compress
Exploring the difference between different file types can be pretty complicated. Acceptable image file formats for websites include JPG and PNG (and GIF but we’re not dealing with those here).
The simplest way to look at it is JPG files that are compressed lose image quality though a JPG can be compressed to a smaller file size than PNG. That being said, PNG files can be compressed some without losing image quality. If compressing a JPG results in undesirable loss of quality and the pixel size of your image is not very large, a PNG may be your best option.
The size of your files determines how fast your web page will load. Web users are impatient, if something doesn’t load quickly, don’t expect anyone to wait around for it. To make your files the smallest possible, size them to the smallest pixel size possible to fit the desired space and compress them. A great tool for compressing JPG and PNG files without Photoshop is tinypng.com/ and tinyjpg.com/. A good rule of thumb is to end up with a file that is under 100KB. Smaller is always better.
Happy image editing!
You might also like our post about websites where you can get good quality free stock photos.