The importance of optimizing your photos and videos, how and where to do it.
Image Optimization and Best Practices
Did you know your photos and videos could cause your site to slow down?
We know that media is a helpful tool for creating a visually appealing website, but if you aren’t careful with the files you are using it could cause major slowdowns to your page. Slow loading times can cause potential clients to leave your site due to the frustration of waiting for it to load.
Here are a few areas to keep in mind as you update or add photos to your site:
Resolution is probably one of the most important aspects to keep in mind for your website images. Website media unlike print marketing needs a lower-resolution photo. It will still look normal on your site but the higher the resolution the more chance it will slow down your site.
We have 3 main photo categories you will be using on your site.
Large full-width images would be found on your banners and possibly in certain designs on the page - Ideally, you want to keep the file size below 350KB.
*We also recommend using a width of around 1920px for full-width images.
Mid-size images can be found throughout your site in different blocks. These files should be around 200KB.
Small images are usually going to be your agent profile pictures or other similar small spots on the site. The file size should be <100KB
**You should stay away from adding any images that are larger than 1MB, as larger images can slow down site/page loading speed.
Blog Photos:
The best aspect ration for Blog Photos should be 5:3 and the actual size can vary. We recommend keeping the width under 800px.
If your photos are too high a resolution or too large you can compress your images to optimize them for web use. Image optimization is about reducing the file size of your images as much as possible without sacrificing quality so that your page load times remain low.
It’s also about image SEO. That is, getting your product images and photos to rank on Google and other image search engines
Recommended Sites for Image Optimization and Compression
TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG and JPG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a large difference in file size!
This online image optimizer uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG and PNG images to the minimum possible size while keeping the required level of quality.
You can upload up to 20 images. Wait for the compression to finish. Click thumbnails in the queue for quality settings. Use the slider to control the compression level and mouse/gestures to compare images.
If you search for Royalty free photos you can find quite a few sites. You could look at Pexels and Pixabay to name a couple but there are other options out there as well.
Video Optimization and Best Practices
Videos are another type of media that is great to include on your site. Similar to images the file size can affect your site speed.
The Resolution and size for Video Files should stay below 1080p and below 10MB. All video files should be MP4 file types.
We have a few different places on the site where you can have a video included.
Header Videos can be found on any of the pages with a header section. If you choose to have a video displayed in this section it will be without the audio and you will have to send us your video so we can add it to our servers. You can send that file to support@agentfire.com and let the team know your video is for your header.
**Ideally 720p and below 10MB should work well for these types of videos since there will usually be an overlay and text. If you can exclude the audio before sending it over that would be great but we can remove it if you are having a hard time doing that on your own.
Website Video Blocks can be found on any page. The ideal option for this type of video would be to use a YouTube link. If you upload the file directly it takes up more space so embedding with a link will help cut down on the space used by your media.
** At this time YouTube is the main source we recommend using. You can create a free account on YouTube and save your videos as Unlisted if you don't want the video to be displayed on YouTube.
Blog Videos can be uploaded or inserted with a link. We still recommend using a link to help with site speed but it will allow both options. If you are adding a video from YouTube you will choose the "Insert from URL" option.
Recommended Sites for Video Optimization and Compression
If your video files are larger than the recommended size these are great tools to compress your file to optimize your video for the web.
https://www.youcompress.com/
https://www.mp4compress.com/
https://www.videosmaller.com/
If you need to resize the resolution of the video this is a great free resource.
https://www.adobe.com/express/feature/video/resize
