As the Senior Design & Brand Manager at Conductor, I’m in the fortunate position of seeing firsthand how design can either help or hinder SEO efforts. Each day my team is posed with the challenge of maintaining a beautiful website while making sure it’s exciting to the user, beneficial to the company, and optimized for search engines. It’s a challenging yet exciting task.
Even though Google Image search does not yield nearly as much web traffic as it used to, there is something that makes optimizing images incredibly important: mobile. Now that there are more searches on mobile than desktop, we need to keep image optimization in mind more than ever. After all, your mobile rankings and user experience depend heavily on load times.
This is why it’s important that SEOs and their design teams are aligned. In this post, I lay out what every SEO should be asking their designer when they need imagery for their website.
First, Ask Yourself: Do You Really Need an Image?
Before your team selects their first image, take a moment to be sure that you do in fact need an image (or images) on your page.
Can the same visual interest be achieved using CSS effects like gradients or creative web fonts? Both load quicker than images and are easy to replicate in many different areas of your site.
You should also take the time to confirm that your page loads in 2 seconds or less, an industry standard across the web. A slow page load speed can affect your rankings and also provide a less than desirable experience for your users. Be sure to solve any page load issues before filling up your site with images!
How to Optimize Your Images: Pre-Upload
For the purpose of this post, I’ll be referring to Adobe Photoshop for image editing.
Before your design team sends you images, there are three aspects of the image you should pay close attention to: size, name, and file type.
When someone refers to the “size” of an image, they are referring to both the image’s quality as well as its height and width dimensions. A low quality image will appear fuzzy, which means the number of Pixels Per Inch (PPI) is relatively low. In comparison, high quality images are crisp and brightly colored, appearing almost lifelike. The dimensions of an image refer to the actual height and width measurements, measured in pixels.
The size of your images is extremely important to the overall optimization of your webpage. Reducing your image to the smallest possible size while maintaining visual quality is the key to having a successfully optimized website. Ask your designer to use the Preview view in Photoshop to determine the lowest quality your image can be saved at before it begins to appear fuzzy.
Instruct your team to save the image at the exact dimensions you need based on the width of your page – if this particular image will be in a column that is 500px wide, for example, then 500px should be the width of your image.
If you need a thumbnail of an image, save that thumbnail as a separate image at the exact dimensions it will be displayed at. This ensures that a user will not need to load a large image to view a tiny thumbnail and that mobile users will not be forced to download a high quality image meant for a desktop user.
Saving your image with a descriptive name – one that includes product numbers and other specific information – will help search engines correctly identify each image on your site. Plus, it’ll also help your Marketing team properly locate images when they search their media library.
Once uploaded, you should make sure the image’s alt text matches the keywords you are aiming to rank for on that particular page.
3. File Types
There are three common image file types that are universally supported by all browsers – JPEGs, PNGs, and GIFs. Deciding which file type to use depends on the use case:
- JPEGs are great for your run-of-the-mill website images and should be what the majority of your images are saved as. They support 16 million colors and do a great job of compressing file information to a lower size. Your designer should always save their JPEGs as “progressive”, meaning an algorithm will be used to gradually fade in the image for a better page load speed and user experience.
- PNGs are larger in size and should be used primarily for images that contain a transparent layer or extremely fine detail. They are not as compressed as JPEGs so they should be used with caution.
- GIFs are mainly used for animations and should always be utilized in place of Flash. They do not compress nearly as well as JPEGs or PNGs, and only support 256 colors.
How to Optimize Images: Post-Upload
Once your image has been selected and saved, it is ready for upload to your CMS. As a best practice, text should always be both crawlable by search engines and selectable by your user. Always avoid baking text directly into your image or saving text as a PNG with a transparent background.
Large amounts of text saved as images can result in a manual penalty, due to the search engine reading the site differently than it appears to your users. Text saved as an image is also a missed opportunity to gain a significant amount of SEO value.
Once your image has been uploaded, the most valuable optimization step is to add valuable alt text. While important for accessibility to the visually impaired, the alt text primarily serves as a descriptive SEO caption that should include the keywords you’re targeting for that page.
Keep in mind that there is an abundance of optimization techniques for web images, only some of which were covered here. For more information on additional techniques, like vector vs raster images and saving as lossy vs lossless, the Google Developers site has an awesome overview.
Whether you’re the designer or the SEO, image optimization is important. Find the balance and keep Google happy: pick relevant images, name them properly, and always keep page load time in mind.