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)
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.
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.
Recommended Tools for Background 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, a tool we sometimes use is: http://compressjpeg.com/
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.
- Company logos - 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.
Learn more about adjusting company logos and headshots in Novi.
- 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.