It's important to size images correctly so that websites load quickly and images fit properly in the various templates on the website. Most photos, even from a basic smartphone, produce huge and very detailed images that should be trimmed down to fit a website appropriately. Uploading full-size images can dramatically slow down the website and create a poor experience for mobile users in particular, especially since most phone plans only include a certain amount of data.
The recommended size for most images on Acadia websites is 800x600 pixels (wide x tall, a 4:3 ratio), with a file size of ~100kb. We use this size for all news stories and many other photo elements throughout the site. It strikes a balance between a small file size and acceptable image quality.
Many photos will not be shot in the same aspect ratio, and will need to be cropped. For example, most Digital SLR cameras and some smartphones produce wider 3:2 images that need to be trimmed to match the proper dimensions.
Tips
- Be consistent. If you are placing images in the sidebar of your pages, posting photos in staff directory, using images in testimonials throughout your site, etc., try to keep the images the same aspect ratio. For example, you shouldn't have some staff photos that are squares while others are portrait (tall) rectangles, and others are landscape (wide) rectangles. Try not to mix and match, which creates a messy look.
- When possible, start from the original or largest copy of the image.
- Avoid having to enlarge images if at all possible. If you are emailing or receiving a photo from a smartphone, avoid using the "Smallest File Size" options, which are often too small and low quality for our purposes.
- When cropping photos of people, avoid cutting off the tops of heads if possible, as well as joints (elbow, wrist, knee, ankle), as this tends to look awkward to the viewer.
- When editing a photo, save your revised version as a copy instead of rewriting your original, full-size photo.
Tools
- Pixlr is a free, easy-to-use online editor. Resize the image first using Constrain Proportions, then use the Crop tool to trim it down to the proper size. For example, let's say you have an image from a DSLR or smartphone. First, resize the image down to the closest size (ex. 900x600). Then, choose the Cropping tool, set the dimensions to 800x600, and trim the excess part of the image.
- macOS users can use the built-in Preview app to resize images by using Tools -> Adjust Size. Other built-in apps like Windows Paint and iOS Photos offer some cropping or resizing tools.
- Adobe Photoshop CC, Photoshop Elements, and their competitors feature very robust tools but require a purchase or subscription.
Example
Open your original image in Pixlr or an app like Preview. In this case, we're starting with a huge photo from a camera that is 5706 x 3804 and 14MB in size: far too large for the website. Make sure to keep "Constrain Proportions" selected to that your image does not get distorted. We'll use Pixlr to resize the image close to our 800x600 target. But the best we can do is 900x600; a little wider than we'd like.
We'll use the Crop command to create an 800x600 box, then position it so that we trim only the least important parts of the image.
When you save an image in Pixlr or most apps, you'll get the option to adjust the quality, as well as an estimated file size. We'll aim for our 100kb goal, and we're done!
Check the finished image to make sure that the quality is acceptable. If it's too blurry or pixelated but the image is important, we may need to choose a slightly larger file size.