Putting a little bit of effort into formatting and documenting web images can go a long way with improving the user experience and enhancing search engine performance. A strong sample SEO plan includes images as well as textual content as emphasis points. When images are auxiliary content, web editors may fall into the trap of not spending a few minutes making sure images are properly configured. The following six tips focus on work flow changes you can implement to improve image implementation on your website.
1. The Problems with PNGs
The PNG image format is a wonderful space-efficient option for storing high-quality images without sacrificing picture quality. However, the strengths of the PNG image format do not necessarily make it a good option for web use. PNGs work great for small icons and site logos, but are a poor choice for photographs and other larger content images because they consume a substantial amount of data relative to size. Using a PNG image instead of a comparable JPG image can cause page sizes to increase by 50 to 100 percent which significantly increases load times. A single large PNG can use more data than the rest of the page content combined: the longer load times are bad for SEO and the user experience. If you still need to use a PNG, use 8-bit color instead of 24-bit if it doesn’t degrade the color profile.
2. Choosing an Ideal JPG Compression
Visitors have a tendency to leave a page if it takes longer than three seconds to load: this is a particular problem on mobile devices that experience slower load times. Mobile devices also make up around 60 percent of web traffic, so the days of assuming the average visitor is sitting behind a desktop computer with a lightning fast broadband connection are over. The JPG image format resolves this problem by using lossy compression that sacrifices quality for a smaller file size. Most web users won’t be able to notice or just won’t care if JPG images are under peak quality. Using 70 percent export compression efficiency offers an insignificant decrease in image quality while providing a relatively tiny file size. Programs like Photoshop include a “Save for Web” option that streamlines this process.
3. As Big as the Image Can Be, No Larger
When formatting an image for a page it’s best to look at the resolution the image will display as and match those settings. However, responsive design, or page element resizing and rearranging to fit content to different screen sizes, throws a stick in the notion of a specific image size. Responsive-compliant sites typically display the same image in two or more sizes depending on the device, so it’s a best practice to format the image to the largest possible display size. The image should be no larger than it is displayed to avoid adding unnecessary loading time to the page. Web developers can help here by implementing server-side image scaling that automatically resizes images to the largest display dimensions.
4. Implementing Social Media-Friendly Dimensions
Content needs to keep in mind social media-friendly standards to maximize audience reach because social media is responsible for nearly one third of all incoming web traffic. Each social platform has its own specifications, but developers can implement Open Graph tags and Twitter Cards to select specific images for each network that don’t have to be loaded when a visitor views the page. Twitter cards will either crop an image to 120×120 pixels or cut off any image over 1MB in size. Facebook requires images with a minimum 600×315 resolution to display in wide-column format while recommends using at least 1200×630 for high-resolution devices. Therefore, a social media-friendly sharing thumbnail image will sit at 1200×630 pixels using the JPG format to minimize the file size which keeps it under 1MB.
5. Names that Describe
Image titles are a lot like page titles: they need to accurately describe the content to boost SEO performance. Using junk file names for your images that are a random assortment of letters and numbers is a bad practice that won’t help your content do well in search engines. It is a best practice to name images in ways that accurately describe the content. For example, an image of a woman eating broccoli should be named “woman-eating-broccoli.jpg” instead of something nondescript like “broccoli123.jpg.” The title is also very important when someone is performing an image search.
6. Use Alt Text
The alternate text attribute is often left neglected be content creators, but when used it helps improve SEO. The alt text attribute is a description for the image that is used instead of the image. It’s a useful element for screen readers as well as search engine crawlers that are trying to make sense of the page. The field is extremely important if the image content is vital to the page making sense, so putting in a little time to fill this out can go a long way.
Dan S is a former news journalist turned web developer and freelance writer. He has a penchant for all things tech and believes the person using the machine is the most important element.
