5 Tips for Optimizing Your Website Images
Optimizing your website images is essential for the success of your website. If you have ever wondered why your product photos never show up when you do a Google image search, what the difference between a JPEG, GIF and PNG is or if you are supposed to add “Alt Tags” to your images, then you have come to the right place!
What is image optimization? And why is it important? Image optimization consists of using the most compressed (smallest file size) yet visually acceptable image in the proper file format for the specific role of the image.
In this article you will learn more about the importance of optimization as Forward Web provides 5 tips for optimizing your website images:
Tip #1: Reduce the File Sizes of Your Images:
Why is this relevant? Well, considering that most customers wait about 3 seconds for a website to load on a desktop or laptop (about 5 seconds on their mobile device), if you have images that take over 15 seconds to load, you can basically say goodbye to that prospective customer. Also, Google uses page load time as a factor in their ranking algorithm.
What can you do? Your website load time is affected by the size of your files, especially with images. The larger the file size, the longer it will take for the webpage to load. Therefore, if you can decrease the size of the image files on your webpage and increase page load speed, less people who visit your site will click away. One way you can reduce image file size is by using the “Save for Web” command in Adobe Photoshop. You want to adjust the image to the lowest file size acceptable while maintaining the quality of the image when using this command.
If you don’t have Adobe Photoshop, there are many online tools you can use for image editing as an alternative. Adobe even has an online image editing application at photoshop.com. This online tool does not have all of the capabilities of the desktop version of Adobe Photoshop but it does cover all of the basics of image editing and doesn’t cost an arm and a leg.
Other alternate (but impressive) online image editing tools are:
- Pixlr which is very user friendly and even comes with a 100% free app for your smartphone;
- PicMonkey which has been described by the experts as a “staggeringly great photo editing tool”;
- FotoFlexer which is another fairly advanced online image editor (it even allows you to work with layers!);
- GIMP which is an open-source, free image editing software application that cab be run on Windows, Mac or Linux and can do everything that Photoshop can do.
As you can see there are several useful online image editing tools available!
Tip #2: Name Your Images As Simply and Descriptive as Possible:
It is really easy to develop the (bad) habit of going through hundreds of product shots and keeping the default file name your camera gives them. Although you might think this isn’t a big deal, this is actually very harmful because when it comes to SEO (search engine optimization), it is important to use acceptable keywords to help your website rank on search engines.
It is absolutely critical to create descriptive, keyword-rich file names for image optimization and keep in mind that search engines not only crawl the text on your webpage, they also search for keywords within your image file names. Understanding the importance of naming files for your website images is worth the effort, as it can surely increase your on-page SEO and help your website and images rank highly.
Looking at your websites analytics to see what phrasing patterns your customers use to perform searches is another aspect you can consider. Determine the most common naming patterns used and apply that formula to your image naming process for maximum results.
Tip #3: Optimize Your Alt Tags Intelligently
Alt tags are a text alternative to images when a browser cannot properly render them. Depending on your browser settings, even when the image is rendered, you can see the alt tag text created for that image if you hover over it with your mouse pointer.
The alt attribute adds SEO value to your website as well. Your website can achieve better rankings in the search engines by associating keywords with images when you add appropriate alt tags to the images on your website. In fact, using alt tags is probably the best way for your ecommerce products to show up in Google image and web search.
To understand this concept better, let’s explore the source code of an alt tag (keep in mind that when it comes to image optimization, filling out each alt tag for each product image on your site is the highest priority). The following are some of the basic rules when it comes to alt tags:
- Do not keyword stuff your alt tags
- If you sell products that have model numbers or serial numbers, use them in your alt tag.
- Do not use alt tags for decorative images because search engines may penalize you for over-optimization.
- Describe your images in the simplest for possible, just like you do for your image file names.
As a final thought, always do a sanity check of your website and view the source of your webpages to make sure your alt tags are filled out.
Tip #4: Strategize Your Product Angles and Image Dimensions
Displaying multiple angles of your products is a common trend these days. It makes sense, if you’re trying to sell a product, you don’t want to show just one side of the product; the more shots you have of your product, the better the odds you have of selling it.
With that in mind, the best way to capitalize on these extra photos is to fill out your alt tags and you can do this by creating unique alt tags for each product shot. The key is to add descriptions to your base alt tag so that potential searchers land on your website. If this seems redundant, it is totally worth the extra effort because Google will reward you with many hungry searchers.
A word of advice: Be careful when using larger images because although they are a great user experience enhancement, they can however, increase your page load time because of the larger file size associated with the large image. Whatever you do, do not place the largest image on your page and simply shrink the dimensions via the source code. Instead, you can make the image smaller and provide the option to view a larger image in a pop-up or display it on a separate webpage.
Tip #5: Be Cautious of Your Decorative Images
It is not uncommon for websites to have an assortment of decorative images (basically anything non-product related can be considered a decorative image) such as buttons, borders and/or background images. Decorative images can add aesthetic appeal to a webpage but this oftentimes results in a large combined file size and slow load times. Consequently, it would be wise to consider taking a closer look at the decorative images used so that they do not impair your website’s ability to perform at it’s full potential and convert visitors into customers.
Make sure to check the file sizes of the decorative images on your web pages. You can use a template that minimizes file sizes for all or most of the pages on your website. Another method you can use to reduce to decrease the file size substantially is to cut out the middle of the background image, and make it a flat color or transparent.
Review the following tips to cut down the file size of your decorative images:
- Pay attention to large wallpaper-style background images because those can be huge files. We recommend that you shrink them down as much as possible without depleting the quality of the image.
- You can create great looking images that make up simple patterns or borders by using PNG-8 or GIFs (making them only a few hundred bytes big!).
- Use CSS to create colored areas instead of using images whenever possible and use CSS styling to replace any decorative images.
From the information provided in this article, it is easy to conclude that the optimization of your website images is in fact, very relevant to the success of your website. We learn that there are two extensive reasons for image optimization: download time and bandwidth used. Optimization is definitely an art that you want to master! For more information or if you have any questions about the material covered in this article, please contact Forward Web.
