There\u2019s a good chance that you\u2019re going to use images at one point or another, regardless of the website you run or the publication you manage.<\/p>\n\n\n\n
We\u2019re a very visual society these days, after all; a few well-placed pictures can drastically improve the look, feel, and readability of a site. Of course, if you fail to properly optimize these images, you\u2019re going to be losing out.
<\/p>\n\n\n\n\n\n\n\n
Don\u2019t underestimate the amount of traffic you can draw to your page with Google Image Search. Ensuring the images you use are properly optimized from both a user and search engine standpoint can work wonders for your site. By that same vein, improper image optimization could actually cause the rating on your entire page to drop.<\/p>\n\n\n\n
Today, we\u2019re going to go over a few best practices for your website\u2019s images.<\/p>\n\n\n\n
The first piece of advice I\u2019ll give you is to give your image a descriptive name. Think about what your target audience is going to search for \u2013 the most common naming patterns they\u2019ll use \u2013 and change both the image\u2019s title and filename to reflect that. Look at your website analytics if you\u2019re having trouble working it out.<\/p>\n\n\n\n
For example, let\u2019s say you\u2019ve got a picture of an Xbox One console. The filename when you download it is \u201cCONSOLE-PHOTO-1304.jpg.\u201d Not exactly the sort of title that your audience is going to search for, right? Instead, try one of the following:<\/p>\n\n\n\n
You get the idea.<\/p>\n\n\n\n
While you should definitely be descriptive with your image title, you need to avoid being too wordy. If your image titles end up being full paragraphs in their own right, you\u2019re doing something wrong. As a general rule, try for 3-6 words at most. Anything more might cause Google to assume you\u2019re keyword stuffing and blast your search rank.<\/p>\n\n\n\n
For the uninitiated, an image\u2019s Alt Tags (also known as Alt Text) basically refers to what a browser displays when it can\u2019t properly render an image. Optimization of your alt tags basically follows the same principle as title optimization: be descriptive and use plain English to describe what the image is about. Make sure it\u2019s relevant, and different from the title.<\/p>\n\n\n\n
It\u2019s worth noting at this point that, in the case of thumbnails, you should vary the image title and alt tags so that there\u2019s no duplicate text.<\/p>\n\n\n\n
It goes without saying that you want to avoid stuffing your alt text with keywords. Doing so basically equates to spam, and will meet with limited success \u2013 if it succeeds at all. There\u2019s a good chance you\u2019re simply going to find yourself getting penalized by Google, instead.<\/p>\n\n\n\n
In addition to being visual creatures of habit, today\u2019s consumers are infamously impatient<\/a>. Most users won\u2019t wait more than three seconds for a web page to load (five seconds on a mobile device) before giving up and moving on. As you can imagine, you want to do everything necessary to speed up their experience \u2014 and that includes reducing the file size of your images so that they load quickly. A good rule of thumb is to aim for somewhere below 60-70 kb.<\/p>\n\n\n\n Most editing software these days has an option that allows you to \u2018save for web\u2019 or to modify the quality of the image when you save it. Make liberal use of this feature. You might also consider reducing the resolution of your images, if at all possible. It might also be a good idea to strip the meta-data off your images if you\u2019re particularly strapped for space, though I\u2019d not necessarily recommend it; according to Google\u2019s Matt Cutts, meta-data could potentially be a ranking factor for Google Image Search<\/a>.It\u2019s also a good idea to strip the meta-data off your images, unless it\u2019s absolutely necessary for your website.<\/p>\n\n\n\n As for thumbnails, make them as small as humanly possible.<\/p>\n\n\n\n Reducing the filesize of your images is something of a delicate balancing act. On the one hand, if they\u2019re too large, your page will hang and you\u2019ll lose visitors. On the other hand, if they\u2019re too low quality, your site\u2019s going to look awful. Use your best judgment.<\/p>\n\n\n\n Currently, there are three primary image types online: jpeg\/jpg, gif, and png. Each one has its own strengths and weaknesses, and its own specific use cases. It\u2019s vital that you know when and where to use each one:<\/p>\n\n\n\n This mistake is surprisingly common. Many authority websites make it. Instead of using images for decorative icons, use CSS. CSS lets you add features like shadows. You can also add rounded corners and special fonts to a page. This doesn’t drastically increase loading times. However, older browsers don’t support modern CSS features. If you want to support these browsers, degrade your markup to a working design. Another option is to use an emulation solution like CSS3 PIE.<\/p>\n\n\n\n By now, it should be abundantly clear to anyone with even a passing knowledge of optimization that one ignores mobile at one\u2019s own peril. That applies to image sizes, too. Members of your audience are likely seeing your page at a number of different screen resolutions \u2013 make sure your images are resized to account for these.<\/p>\n\n\n\n It\u2019s easy \u2013 and incredibly tempting \u2013 to simply use a single image across all mediums, resizing it client\/browser-side where necessary. Don\u2019t. This wastes a ridiculous amount of bandwidth, and actually serves to increase load times for your visitors. Instead of using a single image across all delivery mediums, upload a copy of that image to be used on each medium. It\u2019s more work, certainly, but it\u2019s better than the alternative.<\/p>\n\n\n\nDon\u2019t: Sacrifice Image Quality<\/h2>\n\n\n\n
Do: Know What Image Types To Use<\/h2>\n\n\n\n
\n
Don\u2019t: Use Images In Place Of CSS<\/h2>\n\n\n\n
Do: Resize Your Image For Different Devices<\/h2>\n\n\n\n
Don\u2019t: Resize Your Images Browser-Side<\/h2>\n\n\n\n
Do: Use Image Sitemaps<\/h2>\n\n\n\n