Long gone are the days where we are connecting to the Internet through a modem and a phone line. While the sound of dialing in makes me nostalgic, I'm happy that I can watch video and download images quicker than ever before.
Yet, the power of fast connections comes with great responsibility when maintaining your website. If you are placing large images on your site and are not optimizing them for the Web, your site will take a while to load. This statement is especially true when it comes to accessing your site's content on a mobile device.
Search engines like Google rate and index websites based on their weight and performance, among other criteria. Therefore, those slowed down by large images will have negative consequences on their rankings.
Image optimization is more than adjusting file sizes. You also want to provide relevant information about your images to search engines to correctly index them. As images can bring a considerable amount of traffic for your site, this is one way to enhance visitation metrics.
Faster load times also equate to a reduced bandwidth, which can cause a significant saving in any Web hosting costs. Who doesn't like a little extra cash for being efficient?
Hopefully, you can see why image optimization is key to a well-performing site for your DMO. As sites today are typically image-heavy, your team should make every effort to optimize each image to maintain optimum performance. There are plenty of ways to get started, but some are more time-intensive than others. It's important that we focus on the low-hanging fruit to get your team started on easy improvements.
1. Descriptive File Names
Ever noticed that your mobile phone or digital camera has named your photos "DSC02851" or "img2013"? Thanks to this, you cannot tell what the photo's subject is on the file name alone. If you leave file names this way and upload them to your website, search engines will not understand the details of your content.
See, search engines cannot "see" your content. All they are able to see is the code associated with your site. So, a shot of your downtown named "img19" will not be indexed by Google in a way to help people searching for pictures of your city. The image will list as "img19."
In many content management systems, the Image Title and Alternate Text fields supply details about the picture. These act as the alternate text if an image cannot be displayed because of an error, a slow connection or several other reasons.
The title and ALT attributes are not only useful for visitors, but also for search engines, as they gives them a clue on what the image is about. That's why it is a good idea to use important keywords in your title and ALT attributes. For example, a picture of a New York City's skyline should not have the alt-description of Slide Image 1.
Additionally, ALT text can assist visually impaired readers. Those using a screen reader will hear the image description in place of the image.
To tell if your image has a title attribute, try taking your mouse cursor and hover over the image. A box should appear to display the title of the image, as the Las Vegas Convention and Visitors Authority has done.
You can also review the code on the website to check for ALT text in the image tag.
3. Editing the File Size
It's good to keep file sizes on your site to a minimum, as long as it does not compromise the overall appearance of the image to your visitors. There are many reasons for this, but one of the major reasons deals with site speed. There are statistics that indicate 47 percent of Internet users expect a web page to load in two seconds or less. That same study states that 40 percent would abandon a website that takes more than three seconds to load. If you have large images that delay your page from fully loading, you are missing lots of marketing opportunities.
You can reduce file size with photo-editing software such as Adobe Photoshop. The tool can handle basic optimization steps like saving the image to an appropriate format, cropping unnecessary space and several other tasks. The video below shows how to use Photoshop's Save for Web and Devices option.
You can also make sure your file is in the best shape possible by doing some advanced optimization after saving it in Photoshop. These tools remove needless data that your software did not initially find. This creates a lossless image that is small and looks great. I recommend Yahoo's Smush.it for these tasks, as I have found it will remove several percentage points from my files' size.
So Fresh and So Clean
Trust me. If you follow these practices, your website will run faster. Additionally, search engines will have an easier time indexing its content. You may need to make some additions to your content management workflow to get everybody on-board. Once you do, these tasks will become second nature and will only take a few minutes to perform.