Skip to main content
All CollectionsCustomizing Your Website with the Novi CMSGetting Started
Best Practices for Optimizing Images for Your Website
Best Practices for Optimizing Images for Your Website

Learn ways that will help your photos / pictures look their best on your site.

Melisa Smith avatar
Written by Melisa Smith
Updated over a week ago

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:

  • Ad keywords in the file name like banners, adv, ad, etc. - Ex: photo file names like "GroupPhoto_homepageAD.jpg"

  • Common ad dimensions in the file name - Ex: "Photo_720x90.jpg" or "Photo_300_250.jpg"


Compress Images

This is the way to reduce the overall file size for your image. You might see a loss in the 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 2400 pixels wide for larger featured images or 800-1200 pixels wide for regular, in-text website photos, you may want to consider reducing the image size.

Recommended File Sizes - ideal size is 400 KB or under

Featured Images (homepage top featured section, slider, etc.)

optimal size is 2400 x 1000px

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.

Company Logos

optimal size is 300 x 300px

Individual Headshots

optimal size is 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

optimal size is 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.

  • Within a 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.


Image Edit Options in Novi: Zoom & Drag

For images uploaded in Novi and in use as:

  • Default featured image (which can be found in Association Settings)

  • Blog, product or event category image

  • Event or article featured image

  • Company logo

  • Headshot

There are two edit options available:

  1. Zoom: A zoom bar to resize the image

  2. Drag: The ability to click and drag the image within the frame

If the image needs to be manipulated, use the zoom and drag features to adjust the fit.

  • Once the image is framed properly, click the Set Crop button (beneath the picture). This will save the image, including any adjustments you made. It will not change the original jpg/png file.

  • If the picture looks good, click the Save button (top right).

  • If the picture still needs to be adjusted, click the Edit Crop button.


Recommended Tools for Featured Photos

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, tools we sometimes use are:


Related Articles:

Did this answer your question?