When adding images to your website, you'll want to make sure that they're optimized for the web. 

This has many factors other than just the image size, although that does play a role in it. When your images are not optimized, you may experience slow loading times, which could give your members a poor user experience. As an added layer, Google also uses page load time as a factor in their ranking algorithm.

We've compiled a list of best practices for optimizing your images for your site in reaching its full potential.


Save Image for Web

Be sure that you're using a friendly file type (jpg or png preferred) and save the image. If you're given the option to choose your export or save quality, A Better Lemonade Stand, a leading tech support community, recommends that you use a quality of around 60%.


Choose Your File Name Wisely

Adblocker programs often look at photo file names in determining if something is an advertisement. To avoid getting your images blocked on certain browsers, you'll want to avoid:


Compress Images

This is the way to reduce the overall file size for your image. You might see loss in quality of your photo if you compress the image too small. Note the file size of your image once saved. Tech Republic recommends that your file size is no larger than 200KB for web at an absolute maximum. See #3 below for a tool to compress images.


Image Dimensions

If you notice that your image size is drastically over 1200 pixels wide for larger background images or 800-1200 pixels wide for regular website photos, you may want to consider reducing the image size. 


1. Photoshop - Allows you to save the right size (in pixels), file type and quality. This is a great tool to do all of these things in one.

2. Free tools - If you don't have access to Photoshop, you can resize your images with one of the below recommended tools:

Note: Canva and Pixlr offer some other editing tools that you may find beneficial as well, like adding text to an image.

3. Compress - In addition, if you need to compress, a tool we sometimes use is: http://compressjpeg.com/


Quick Stats

Recommended File Sizes - ideal size is 400 KB or under

  • Background images - optimal size is 1200 x 500px.
    For best use, they should not exceed 1500 pixels wide. For more information on choosing background images, click here.
  • Event Logos - optimal size is 525 x 225px.
    Note that if you do not have these exact measurements, the image will still appear, but there could be some cropping. If you do not upload a logo, the default icon for the event category will appear.
  • Individual headshots - 300 x 300px.
    Since these are smaller images, your file size should be a bit smaller as well.  This is the minimum size headshots should be for optimal image quality, but for larger sizes, you can use our image resizing tool.
  • Product Images - 250 x 250px
    Since these are smaller images, your file size should be a bit smaller as well.  This is the minimum size product images should be for optimal image quality, but for larger sizes, you can use our image resizing tool.
  • Static CMS page - optimal sizing - A full-width image on the default or header photo template is about 820px. A full-width image on the full-width page template (no sidebar) is about 1120px.
  • Leaderboard - For a leaderboard section, optimal sizing is 728x90. However, the section will change depending on what content you put there - it can be text, an image, etc.

Did this answer your question?