The Best Practices for Images on the Web

Getting Started

Adding images strategically to your website can improve engagement, create emotional connections with your visitors, and increase page views.  If you want to maximize the benefit for your website, you’ll want to make sure you are using well-optimized images.  

Choosing the Type of Image File

Browsers support a variety of image file types including JPEG, PNG, GIF, and SVG.  Choosing the right type of file can make a huge difference in the load time of your pages while still looking great.  JPEGs are best for images with a lot of detail.  GIFs are great for animated images.  PNG is the best format if you need a transparent background.  Many sites are now using SVG files which are great but not as easily accessible to everyone.  If you are working with a designer, they will likely be able to provide these types of files for you.  SVG files size to whatever size is needed and is better for load time.

Compression and Sizing

You want to make sure you are creating sizes that are the size you need for the site.  You don’t want to upload images that are larger than you need as these will likely slow down your site.  They also take more room to store on your server which, over time, can create space issues.  You can determine the size needed in a variety of ways but it starts with knowing a full-width image needs to be 1920 pixels wide.  Heights will change based on your layout.  A common width of the content area (center part of your website) is around 1200 pixels.  This can vary as well but, in order to give you an idea of how to figure out sizing, we’ll use this number.  2 columns would require 1200/2.  3 columns would require 1200/3.  Please note these are minimum sizes as images may need to be larger to accommodate retina screens that many modern devices have to keep the quality high.

You also want to be sure your images are adequately compressed without losing the level of quality needed for your website.  Imagify is a great plugin for compression once you’ve loaded images on your site and has a nice feature that allows you to see your current quality against the different levels of compression available to make sure you don’t lose to much of your quality.

Naming Your Image

You want to use relevant keywords in the name of the image file.  Be sure to use keywords in the order of importance – the most important ones being first.  If you have a store, name the file using the product name.

Alt Text

You also want to be sure to include alt text on your images.  If someone has a screen reader, they will hear the alt text vs seeing the image.  Alt text helps with accessibility on your website and is highly valued by the search engines when they look at your site to determine how it should be ranked.

In Conclusion

With a little extra effort upfront, you can maintain fast loading pages with quality images which make for a much better user experience across the board.  You can also find a nice list of guidelines for image publishing in the Google support section.  Image optimization is the best thing you can do to improve the quality of your website…It’s worth it.

Want more content like this? Check out Website Creation.