[This page]

Tags: seo   images   optimize

Optimizing Images for Your Website

The web is a very rich media - it is not only text, but also images, video and sound. Properly selecting, formatting and inserting images on your website not only makes your content stand out, but can also improve the effectiveness of your web pages on all the devices used to view them and in search engine results. Adding images to your web pages is a good thing - if done properly. Here are some guidelines for optimizing images for your website.

Image sizes are important (quality and dimensions)

A printed page has the same size and weight, no matter what gets printed on it. Black and white or color doesn't matter, except when you pay for printing. Digital cameras are offering increasing resolution and image size, but what many don't realize is the true size of the image when displayed.

To keep things in perspective, consider the typical display for a web page - either a computer monitor or a mobile device. Rarely do you even need a full screen sized version of an image because you'll be placing it in a page. After you have the image cropped and corrected for visual appeal, save it in several different sizes - full size (no more than 1024 pixels for most uses), thumbnail size (100 - 240 pixels) and an intermediate size (300 - 600 pixels). This will give your writers and editors sizes to choose from that will work with the page layouts they've chosen.

The amount of information a web browser needs to display determines how quickly someone will be able to view a page. Images are very dense content - you've heard it said 'A picture is worth 10,000 words'. That may be true, but 10,000 words will display more quickly than 1 oversized, full resolution picture.

• Height and Width (dimensions and aspect ratio) - none of the images you use on your website will occupy the entire screen. Even if they do, what is the largest screen used to view your site? With mobile devices becoming the most common devices for Internet browsing, what is the most common screen size viewing your website? With the maximum dimensions, what portion of the screen is occupied by the image? Keep all these in mind as you select and prepare images for your website. For most situations, an image with a maximum dimension of 480 - 600 pixels is sufficient. Intermediate and smaller sizes are good to have too - one with a maximum dimension of 300 - 600 pixels and one with a maximum dimension of 100 - 240 pixels.
• Depth (resolution) - 72 - 96 dpi (dots per inch) is what the screen you are viewing supports. Typical photo prints are 150 dpi. High resolution (hi-res) photo prints are 300 dpi.
• File size - this usually isn't a limitation of the amount of storage you have, but it is a performance issue. Even just 1 large image on a page can cause the page to take a very long time to display. People do still use dial-up Internet access (after all, mobile phones are using dial-up, unless they are connected to a wireless network somewhere). Use an image with the right dimensions and resolution, along with an appropriate file type to manage your image file sizes.

Summary: In practice, the images you use online should be under 1 MP (megapixels). 72 dpi and a maximum dimension of 1024 pixels are generous allowances for images on your website. You'll want images with smaller dimensions, too.

How large are your images to start with? Here are some common images sizes from the common cameras (and phones)

Image filenames are important

What you see and what a search engine sees (or a sight impaired visitor sees) are completely different things. And, depending or your content editor, what you see when selecting an image to use in your content may vary. If you see the image, that's OK, but if all you see is the filename of the image, you'll want something more descriptive than DSC_1023.jpg.

If the image is of value, it will represent a key concept for your web page. Every web page needs a key concept that can be described in a word or short phrase that people will use when searching for information. If your page is about your worship schedule, then you might have photos named wednesday-night-worship.jpg and sunday-morning-worship.jpg instead of DSC_1023.jpg and IMG1234.JPG.

Refrain from using symbols in your filenames. except for dashes and underscores. Also, find out if your content management system renames the images when you upload them - some do and some don't. Better are the ones that don't, or at least preserve the name you provided and add its identifier.

Summary: Use meaningful file names for your photos.

Image properties are important

Digital photography adds a wealth of additional information about the photograph to the photograph. Programs for managing and manipulating images know when the photo was taken, the type of camera used to take the photograph, the shutter speed, the aperture, and the focal length of the lens. The image file can even store the latitude and longitude coordinates of where the photo was taken.

This last bit of intormation plays right in to the search engines' hands - they want to provide relevant local results whenever possible. Whatever program you use to manage your images, make sure you can at least view the GPS information of the images. Better still would be the ability to place the images on a map, if the camera didn't have GPS built in.

Summary: Add location, keywords and a description to your photos

Image HTML attributes are important

• Alternate text: what people see when they don't see the image - search engines don't see images, vision impaired people don't see images, but they are browsing
• Title text: what people see when they hover over an image
• Height and Width: yes, you can specify dimensions for your browser to use when displaying an image, so your 3000 x 2000 px image will display as a 150 x 100 px thumbnail. But, when someone is viewing that photo, they'll be downloading the very large version of the image and then their browser will resize it before displaying it. Help your pages load faster and keep your viewers happy - resize the images to use and set the HTML attributes to match.

Summary: When adding images to your pages, be sure to add the alternate text and title text. Don't use the browser to resize your images.

Image context is important

I put this at the bottom, but it is probably one of the most critical factors for your images. Lacking any of the above factors, search engines, and visitors alike, will associate an image with its context - a caption, a description, the surrounding text and the page title.

Summary: Be sure the image relates to the content on the page.

Last modified on 2016/5/24 by Steve