Images play a significant role in the look and feel of a website and in the purchase of online products and services. Whether building your own WordPress website or hiring a professional web design agency to do it for you, it’s important to know how to optimize images for the web. We’ve compiled a list of the best tips from across the web to help your site perform and look its best:
- Name your images appropriately. While sometimes it’s easier to leave camera shots or stock photography with their default image numbers, it’s not a good idea. It’s best to accurately describe the image with keywords related to your site. Be as descriptive as possible so that users searching for specific content can find it easily. If you’re not sure what users are searching for, check your Google Analytics. If you don’t have Google Analytics, install it and take a sample of data from a week or so.
- Give images alt tags. This alternative text is what users see when they hover over an image. Every main image on your site should have an alt tag, whether it’s a logo, a banner or a photo. If you have products on your site that have model numbers, use them in the alt tag too. There is no need to use an alt tag on decorative elements or graphics that are part of the design of your site.
- Show multiple angles. If you operate an e-commerce based business, you probably already know that images sell product. Customers want to see as many views as possible of the product they are going to buy. Invest in good photography up front and show front, left 45 degree and R 45 degree angles, as well as side and back views. Show detail and texture shots when applicable.
- Provide an option to view a larger image, but don’t make it the default. Many web developers say that you shouldn’t have large images on your site, but it’s actually okay to have large images on your site, so long as you don’t place the largest image on the page and reduce the dimensions. Instead, use two images for everything that you want to show, making the smaller image the default, and giving the user the option to view the larger one in a pop-up window.
- Reduce file size. Oftentimes, when images are saved they are a much larger resolution than is needed for optimal web viewing. If working in Photoshop, be sure to “Save for the Web”.
- Use the right file for the right situation. If you’ve worked with images, you know that images can be saved as JPEGs, GIFs or PNG files. So which one is right for your site and why? Well, for e-commerce stores, JPEGs are ideal because they pack a lot of quality into a small size. GIFs are perfect for decorative site elements because the file sizes are typically large. PNGs are the least favorable, but can work for simple icons and images.
- Use decorative images sparingly. Everything from a website background to button colors and borders can be in the form of an image, or code. When it comes to web design today (especially with solutions like WordPress), there are an infinite number of templates from which to choose. These template options include the decorative elements as part of the HTML + CSS, which helps to decrease file size and increase load time.
- Test, test and test again. Load time and customer experience is pivotal, especially in an age where more and more consumers are moving to their mobile devices for an on-the-go content consumption experience. In fact, on average, customers wait only 3 seconds for a site to load on a PC, and only 5 seconds on a mobile device.
When it comes to image optimization, following the above tips is a great start, but every site is different based on the audience at hand. Don’t be afraid to survey your customers and find out exactly what it is they want to see and how they want to view it. Or, provide options that allow consumers to sort products by list w/ thumbnail, grid style, etc. A site with well optimized images will not only help your conversion rate, but will help get you found in the first place.
