Like most things in Search Engine Optimization, you can always be trying and testing something in an attempt to get an edge on your competition in the search engine rankings. Two areas where SEOs commonly have room to improve are image search and page load speed. However, some effort and know-how in both areas is required, and chances are not everyone has what it it takes. This is why you may be able to get a leg up on your competitors if you’re willing to take the time to learn. And because image optimization is inherently linked to the improvement of page speed, and conversion rate increases when page load time decreases, you’re almost guaranteed to see a return on your investment.
Optimizing images is a task you’ll need to repeat again and again in a consistent way in order to reach your end goal of faster page load speed and increased visibility in the Image SERPs. As with any repeated effort, a checklist is an invaluable tool to getting the job done right every time, so I’ve put together a set of checklists for optimizing images and page speed elements related to images. The checklists are the culmination of the some of the best advice from industry experts I’ve turned to during my own research, which I’ve collected and categorized for you as Beginner, Intermediate, and Advanced. These classifications refer to both the aptitude level required for implementing the recommendations as well as the general order in which they should be tackled. You’ll find examples and resources along the way and a link to download the checklists for yourself at the end of the post.
Beginners:
1. Test your webpage’s page load speed
It’s important to establish a benchmark of your performance in both Google and Bing so you know if you’re successful later. Use Google PageSpeed Insights and GTmetrix (or Pingdom or Web Page Test, whichever is your favorite). Because image optimization takes time, you’ll want to make these changes to a small number of images first to see if your efforts have paid off. We recommended changing one element (like adding alt text) per batch of images at a time and re-testing after each type of change so you can empirically track the effectiveness of each step. The good news is, you’ll be able to test the effect on page load speed more quickly than traffic from the Image SERPs, so you’ll get some immediate gratification.
2. Choose the right format for your images
As a general rule, GIFs and PNGs are best for small images with a limited palette, transparency (and animation if needed) like logos, icons and design elements. JPGs are best for photos with a wide palette of colors and a lot of detail.
3. Resize images to a unique size
This is particularly important for ecommerce websites. Of course, it’s best to use your own original images, but when that’s not feasible and you’re using the same images from the manufacturer all your competitors are using, create a unique sized image to enable the possibility of your image appearing in the Image SERPs. Don’t have Adobe Photoshop? You can edit photos with free tools like Pixlr or Gimp.
4. Serve scaled images
When you serve up images that are the exact size you want the image to display on your website, according to your CSS and HTML, you eliminate the overhead it takes to ship extra pixels from the server only to have the browser resize the image for you.
5. Reduce quality to the sweet spot
The sweet spot is that point where the file size is as small as possible without sacrificing naked-eye perception of quality. The larger your file sizes, the more time it takes for the page to load and the more data it takes. Your users – especially your mobile users – will be negatively impacted by either a data usage fee, or by not being able to load your site, which means you’ll be hurt by a bounced session.
6. Change your filename
Name your image something descriptive, accurate, not keyword-stuffed, using hyphens for spaces and all lowercase letters. Intuitively, it makes sense that an image filename adorable-baby-bunny.jpg will rank higher in the Image SERPs than file4601256720423.jpg for a relevant query.
7. Add alt text
Search engines can’t see images or what’s inside them, so it’s your job to provide the alternative text to the image, which benefits the search engines and the user. Commonly given the misnomer of “alt tag,” the alternative text – or “alt text” for short – is actually an attribute that provides information about the image tag, like this:
8. Have a thumbnail strategy
Just like your other website content, for which you’ve applied a canonical keyword strategy, your images have canonical versions as well. If your site displays thumbnails, you don’t want them to compete with your “money” images.
Possible strategies include giving your thumbnails filenames and alt text distinctly different from your “canonical” images, leaving off the alt text altogether or putting all thumbnails in a separate directory and disallowing that directory in your robots.txt file.
Intermediate:
Complete the Beginner steps plus:
9. Eliminate and replace all unnecessary images with CSS and JS effects
It’s likely that many of the design elements you want on your website – buttons, gradients, shadows, rounded corners, and images overlaid with keyword-rich text – can be achieved with CSS and JS effects. Bonus: they’ll look clear and crisp across all browsers and resolutions, and occupy mere bytes in contrast to greedy, finicky images, and they don’t require expensive software or keeping track of original image files.
10. Replace all images with encoded text with images + web fonts
Likewise, webfonts fulfill the desire for effective typography and simultaneously enable visitors – including the visually impaired – to copy/paste, resize or use a screen reader, something they can’t do if you encode text into the images themselves. Plus, you can classify this text – often headline text – as a prominent H* etc. tag, which has an SEO benefit.
11. Use CSS image sprites
Combining small image design elements, logos, and icons into one file called an image sprite, then using CSS to refer to x, y coordinates to serve up the individual elements reduces page load time because it requires just one round trip to the server to retrieve and cache the image sprite and CSS file and render the elements from there.
12. Provide links to view larger images
Large images provide an enhanced user experience but can drag down your page load speed. The solution is to offer links to “View Larger” images in a pop-up or new window.
13. Add schema to images
Adding structured data or schema to the HTML markup surrounding your images helps search engines understand semantic information about the image and its relationship to your business and your website. While this step requires a higher level of skill and understanding and should be implemented with the help of an experienced developer, you can follow a basic tutorial from Google here.
14. Geo-tag images
If your website represents a local business, you can associate images on your website with your location. This is particularly relevant for images of your physical brick-and-mortar facilities.
15. Use Image Sitemaps
Just like you use XML Sitemaps to help the search engines find your text content, you can encourage them to discover and index your image content with an Image Sitemap.
Advanced
Complete the Beginner and Intermediate steps, plus:
16. Leverage browser caching and expires headers
These final steps all involve server-side optimization that require a technically-deft hand, so work closely with your developers. Browser caching aims to reduce the number of round trips that the browser needs to make to the server in order to render the page. It both caches assets like images, CSS, and Javascript files and also sets a time frame for how long those assets will remain unchanged, which can improve the performance for your returning website visitors.
17. Enable Gzip compression
When your browser makes an HTTP request, it looks to see if the website it’s fetching has compression enabled. Compression reduces overhead and results in faster page load. To enable compression for your site, you’ll need to look up the proper configuration for your server, then make a relatively simple edit to your .htaccess file.
18. Optimize your Critical Render Path
When your webpage loads, make it your goal to have the browser load only the images (and HTML, CSS, and Javascript code and resources) needed for the initial, above-the-fold view. If your visitor can’t see what’s below the fold of your webpage before he/she takes action (e.g. clicks, hovers or scrolls), it can be loaded after the initial page load a.k.a. asynchronously.
19. Employ a Content Delivery Network (CDN)
For many sites – especially eCommerce sites – Content Delivery Networks are commonly used to host mirrored content (like images) on servers closer to the client (e.g. in the UK for a London user of an American site), thus reducing round-trip time, page load speed, resources and bandwidth. CDNs are terrific solutions for specific situations, and should be employed with proper configuration, a strong canonical strategy, and images that have been optimized as described here for ultimate success.
You should now feel ready to tackle these 19 steps for Image Optimization, armed with the checklists (click the button below to download) and the advice from these industry experts. If you’ve done some of your own tests and want to share the results, ask a question, or brag about how optimizing your images and increasing your page speed helped you clobber your competition, please comment below!
Social Articles | Business 2 Community
(368)
