Image Optimization and Management

Image via Unsplash.com

Image via Unsplash.com

You understand that impactful visuals on your website are a must.

You’ve combed through old image files and carefully curated powerful, timeless images.

You’ve lobbied to increase your photography budget.

You’ve hired a staff photographer or conducted several recent campus photoshoots with a freelancer.

You now have a library of campus and community images for use throughout your website.

You, my friend, are way ahead of the pack.

Now what?

It’s time to get those images optimized and ready to make a splash online.

Consider your image ratios and crop your images. Your website templates likely call for various image ratios. For example, you may have 1:1 images on faculty profiles, 16:9 images in your feature areas, and 4:3 images in body copy inset locations. One image may not work in all three areas, based on its composition. If you can, consider the type of composition you’ll need before a photoshoot. Once you have the images, immediately start cropping them for their target areas. This will prevent any last-minute problems.

Ensure your images are the appropriate size for the web. Weighty, high-resolution files will slow down your website and cause negative experiences for your users. You want images to pop onto the page without any “waiting wheels.” Ask your photographer to provide both high-resolution and web-size photos. Photographers can export images to optimize the pixel length/height and resolution for your website.

If you have a set of high-resolution photos already, there are many online tools that can resize your images: Kraken.io, Optimizilla.com, and Compressor.io to name just a few. Compressing an image also can mean a reduction in image quality — there’s an art to finding the balance between size and quality — try a few different options and review them on various computer screens and mobile devices.

Sharpen images for the web. Most image-editing software allows photographers to sharpen images for the web. This technique is usually not appropriate for photography that will appear in a magazine or brochure, but it will give images an added pop on a variety of electronic devices and it's easy to do. Talk with your photographers about this option.

Name your photos clearly and concisely. You should be able to browse a library of 1,000 photos and narrow your options down to a few based on the photo names. Instead of “DSC005689.jpg,” you want to see “PresidentMcKinley_and_students.jpg.” This is going to save you time and frustration. It also will help you collaborate with team members when you select images for your website.

Prepare your alt tags. These are critical lines of code for accessibility, and they also are used in SEO. Additionally, some browsers allow users to hover over an image and see an alt tag. Your tags need to state what the image depicts. Missing alt tags are a common accessibility error, but they are easy to add.

Talk to your photographer in advance about how you plan to use the images from a shoot. A little planning can go a long way to ensure that you’re spending your time and budget well.

If you make it a habit to complete these tasks as you go, it’s a simple process. However, if you wait until you’re in the midst of a large website redesign with new photography throughout, it's quite the lift. When you’re planning content migration, it’s easy to think just of the website text, but the image migration can be time consuming. Plan in advance.