Website graphics typically refer to website visuals like images and even videos. Pretty and efficient visuals act as marketing tools to improve public image of your brand and enhance user experience on your website. When optimizing our web graphics, we usually want to ensure that 1) they look good and 2) that search engines could find them.
Some points to consider for optimizing your website graphics include:
Before we discuss anything else about graphics, consider whether you’re using the right file types.
JPGs are the most popular image file type for websites because of their ability to efficiently handle colors, shadows and gradients. Photographs and other vivid, complex pictures should be JPGs. If you need photos that look highly professional (like those for product images or hero banners), use JPGs. Keep in mind that all JPGs are not made equal and can be saved anywhere between low and high quality.
Though JPGs could handle many colors, they can’t handle transparency. PNGs are often used for logos, which typically don’t require complex coloring and benefit from transparent backgrounds to blend into the website’s background color. Any other images that need crisp lines like infographics or images with text also may be better of as a PNG.
Image-editing software like Photoshop and GIMP allow users to save PNGs as either PNG-8 or PNG-24. PNG-8 has a limited palette of 256 colors and smaller image file size, and PNG-24 provides higher-quality at the cost of a larger file size.
GIFs are typically not used for product photos or website layouts, but could be used for animations. However, how efficient GIFs are compared to videos matter on the quality, frame rate and length of the animation. Nowadays, they’re popular for social media reactions and memes--typically from television clips.
Vector graphics, also known as SVGs, are popular for logos and other images that would benefit from rescalable qualities. The allure of vectors is that they could be saved at any size and resolution without a drop in quality. However, SVGs are not optimal choices for images that require fine blending or for photographs.
Poor quality pictures--fuzzy or otherwise--could lower the authority of your website, but hiring professional photographers isn’t cheap either. Luckily, you could find free high-quality stock photos online. Of course, there are some things (like company product images) that you won’t find on a stock photo website. That’s when you could hire photographers or learn how to take the photos yourself.
Okay, so now you have your crisp, high-resolution images. But be wary--choose appropriate sizes and resolutions for your photos! Photos that are unnecessarily large or detailed could result in large file sizes that will slow the time it takes for visitors to browse your site. In this fast-click age, slow browsing could make visitors bounce.
Image dimensions are the image’s measurement in pixels. For example, an image may measure 800x600 pixels. Keep in mind that image dimensions aren’t the same as file size.
Resolution is image density, measured in dpi (dots per inch). Higher resolutions offer more detail-rich pictures with the trade off of larger file sizes.
File size is the amount of space that a file takes up in your computer. An image’s file size is typically determined by the amount of detail, which is related to the resolution of the image. Sure, image dimensions do contribute to the file size, but two images of the same dimensions with different resolutions could differ greatly in file size.
Tip: Your background images and large headers shouldn’t be more than 1 MB in size!
For consistency, you need to keep image proportions and style the same. Keeping image proportions the same means using the same dimensions for depending on the type of element you use. For example, all header images should be the same dimensions. Proportions are not only important for uniform design but also for the symmetry of your webpage.
Keeping image style the same means sticking to a trend--for example, if you normally use all photos and then suddenly start using drawn pictures, your audience might be caught off guard by the contrast.
This may seem obvious, but placing your images near relevant text will better both your website’s user experience and SEO. The images will help visitors visualize the meaning of your content as well as boost your rank.
We spent a lot of time explaining the technicalities of making sure your images look good. Now, here are the ways to use image-related text to boost your SEO. Before you upload your images, consider your file names. After you upload your images, consider your alt text.
Catering your file names to keywords that you want to rank with will improve your website’s overall SEO. Think about it this way: when you drag an image off a webpage and into another tab, it will have its own URL. Your image’s file name will determine its separate URL and will therefore contribute to your website’s SEO rank. Say goodbye to “photo-1” and your other generic photo names.
As a rule of thumb, keep image names lowercase and with numbers 0-9. Avoid spaces, underscores, punctuation and special symbols. Instead separate words by hyphens.
Alternative text, frequently labeled as alt text, tells search engines about your image. They shouldn’t be overly descriptive or chock full of keywords but should include some specifics. For example, a picture of a cat could be labeled as simple as “cat” to something more vivid like “blue eyed siamese cat.”
Tip: Though captions don’t directly affect SEO, they capture readers’ attention. Captions increase the overall comprehension of your website.
While not classified as an image (according to HTML tags, much to our sadness), videos are becoming more popular for websites. Videos are useful for busy visitors who may not have the time to read through product descriptions and other website content. They also help potential consumers better visualize your content. Believe it or not, videos could work as website eye candy and SEO boosters the same way that images do.
At the core, user experience is the key to optimizing web graphics. Following these guidelines will improve efficiency, convenience and style to retain and attract visitors to your website.