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"
Additional Tips: Characters to Avoid When Creating File Names (and URLs)
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
For best use, they should not exceed 2400 pixels wide.
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
Since these are smaller images, your file size should be a bit smaller as well. This is the minimum size logos should be for optimal image quality, but for larger sizes, you can use our image resizing tool.
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:
Zoom: A zoom bar to resize the image
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: