Everyone wants striking images on their website or blog. The right image can do visual wonders and be a powerful means to communicate your message and attract visitors. However, the right image, done the wrong way, will negatively impact your website, slowing loading times and causing visual overload for the visitor.
Making an image web-friendly means choosing the right file format, size, and resolution. Read on for some tips and best practices.
File format
The predominant file formats for web use are .jpg (JPEG), .gif and .png. All three have different benefits and negatives. Any image in a different format will need to be converted to one of these three before uploading. Most people choose JPEG for photos and then PNG or GIF for simple illustrations or logos. Photoshop and other image editing programs offer a ‘Save for Web’ option where you can easily choose the file format and preview the image and estimated file size.
.jpg (JPEG)
JPEG files allow you to resize and adjust quality settings to balance them to your liking. Unfortunately, JPEG compression causes loss of data which ultimately reduces image quality.
.gif (GIF)
GIF files are great for logos or simple illustrations and is a lossless compression type, meaning no data is lost.
.pgn (PNG)
PNG also works great for logos or illustrations but is also suitable for smaller images. Like GIF, PNG is a lossless compression type.
Image overload
Are there too many images on your website? Image overload doesn’t look great and will slow down the page loading. Use a critical eye when adding images. Too many will slow down your website and potentially overwhelm the visitor.
Image file size
Image file size determines how much storage space an image takes on your hard drive. Smaller files load more quickly, making them better options for web graphics. Be careful, though; decreasing the file size will also reduce the image quality. Try to find the sweet spot between size and quality.
Text as an image
Is your text rendered as an image? Using web fonts instead of .jpg will make your text much faster to display and are searchable, and can be scaled up or down.
Batch processing
When you have many images to work through and resize, consider batch processing. With batch processing, you can apply the same edits, such as resizing, changing file format, and renaming, saving a lot of time rather than modifying each image one by one.
Image names and descriptions
Don’t forget to add image descriptions and image names. Simple, concise image names will have a positive impact on word searches. Most online searches are done with simple words. This is because Google crawls images and image file names and ranks them for appropriate phrases.
Image descriptions are essential for search engines optimization (SEO). Searchable images with a high shareability factor will help you attract new visitors across multiple social platforms and searches.
Final checks
It is also a great idea to revisit your website from different devices to see how it loads. For example, is it slow to load, do the images convey the intended message, or are there too many images? And then take a closer look. For example, did you include image names and descriptions, and do your image file names add to the searchability of your images? What can you improve? What needs to change? Are your images attracting and involving the visitor or frustrating them?
With all the above tips you should be able to easily improve the visitor experience, searchability, and search engine optimization (SEO)of your site with well-placed and high quality images.
