Best Practices: Optimize Images to Improve Website Speed

The Right Images are Game Changing (00:00:52)

• High-quality images are crucial for any website experience, as they can draw attention, elicit emotions, and relate well to the target audience and content, making it essential to use high-quality images on websites and web pages (00:00:53).
• Background images, such as the main hero image on the home page, create an atmosphere and set the stage for the website visitor’s experience, giving them an idea of what the website is about aside from the supporting text (00:01:20).
• Many sites use images that are too large for their purpose, which can affect page load times and lead to a poor user experience, even if the images are high-quality, and optimizing images can help improve page load times (00:01:54).
• Slow load times can affect a website’s SEO, as Google and other search engines favor websites that serve content rapidly, and images play a large role in this, with slow-loading websites and images often getting pushed further down in search results (00:02:30).
• High-quality images do not necessarily mean large image sizes or file sizes, but rather attractive images with sharp photography that are clean, easy to digest, and add to the website experience, whether by eliciting an emotional reaction or helping with navigation (00:03:01).
• Using high-quality images that are sharp, clear, and add to the website experience is essential, as they can help with navigation, elicit emotions, and improve the overall user experience, and it is important to optimize images to ensure they do not negatively impact page load times (00:03:37).

Best Practices for Web Images (00:03:52)

• High-quality images should not be overly large in terms of dimension and file size, as large images can lead to slower load times, and some recommended dimensions and target file sizes are provided for guidance (00:03:52).
• For images that take up the entire width of a website, such as a hero image on the home page, a width dimension of about 2000 pixels and a file size of no larger than 200 kilobytes are recommended (00:03:55).
• For content images that are placed in the body of a post or as a supporting image on a web page, a width of no more than 1200 pixels and a file size below 100 kilobytes are suggested (00:03:58).
• For square sidebar images, a size of around 450-500 pixels in both length and height, and a file size of no more than 50 kilobytes, are considered suitable (00:04:02).
• When obtaining images from stock photo websites, it is often possible to download the right size or size range of images, rather than the largest size available, which can help solve problems with image file size (00:04:05).
• Many stock photo websites charge more for larger sized images, but for web use, a size of around 2000 pixels is often sufficient, and downloading the right size can help reduce file size and improve load times (00:04:08).
• Editing photos and reducing file size can be done using free online tools, and guidance on how to do this will be provided, which can be helpful for those who are not familiar with photo editing software (00:04:13).
• The goal is to find a balance between image quality and file size, and by following these guidelines, it is possible to optimize images for web use and improve website load times (00:04:18).

Free Online Tools to Optimize Images (00:07:15)

• There are free online tools available to optimize images used on websites, including a tool to resize photos, with the first listed tool being a free resource to resize images, especially useful for photos from stock photo sites that are typically very large in dimensions (00:07:16).
• An optimization tool can be utilized to reduce the file size of an image without reducing its dimensions, by removing bloat metadata and optionally reducing the image quality, with a recommended tool being imageoptim.com (00:07:50).
• A convert tool can be used to convert image files to the WebP file type, which dramatically reduces file size without losing quality, and can be done using free online tools such as Convertio or Cloud Convert, with potential file size reductions of up to 75 percent (00:08:40).
• Using these free online tools can help optimize images and improve website speeds, even for novice users without access to high-level image editing software like Adobe Photoshop or Adobe Illustrator (00:10:15).
• Optimizing images can help reduce website storage and bandwidth usage, and can also speed up page load times, making it a useful practice for improving website performance and speed scores (00:09:39).

Important to Note… (00:10:45)

• The BD platform automatically optimizes image dimensions for images uploaded by members, including profile photos and post images, to reduce their size to an acceptable level for the website (00:10:48).
• The tips provided are primarily for images uploaded directly into the media manager, which can then be used as hero background images or within the web page builder (00:11:20).
• For users who do not want to manually optimize their images, a free tool called ImageKit is available, which has a freemium plan and can optimize image delivery, serving images in the webp format automatically (00:11:39).
• The BD platform’s optimization settings are built into the platform, but for users with WordPress sites or other external sites, there are plugins and other tools available to optimize images (00:12:37).
• It is essential for users to be aware of and follow best practices for image optimization, particularly when uploading large images, such as 8,000-pixel-wide images, which are not suitable for websites (00:12:44).
• A previous webinar discussed using ImageKit as a shortcut for optimizing image delivery, and a link to the video is available, which can be found by searching for “Speed” on the Brilliant Directories’ website (00:12:03).

Live Website Example: Before & After (00:12:55)

• A live website example is being used to demonstrate the impact of optimizing images on website speed, with the website’s home page having four images that are overly large and contributing to a significant portion of the page’s load time (00:12:56).
• The website’s speed score is 63 and 86 on GT metrics, with images contributing to about 7 megabytes of load time, and the goal is to reduce the web page size to under 1 megabyte or 500 kilobytes (00:13:35).
• The background image of the website is 8 megabytes in size and is being downloaded and optimized using tools such as iloveimage.com and imageopt-in.com (00:14:35).
• The image is first resized from 6700 x 2100 pixels to 2000 pixels, reducing the file size from 8 megabytes to 1 megabyte, and then further optimized using imageopt-in.com, which removes metadata and reduces the file size to 207 kilobytes (00:15:07).
• The optimized image is then converted from a JPEG to a webP format, with the goal of further reducing the file size and improving website speed (00:16:51).
• The optimization process results in a significant reduction in file size, from 8 megabytes to 207 kilobytes, which is an 80% savings and is expected to improve the website’s speed score (00:16:35).
• The process of optimizing images for a website involves several steps, including resizing the image to an appropriate dimension, removing unnecessary metadata, and converting the image to a more efficient format like webp, which can be done using tools like convertio or Cloud convert (00:16:55).
• An image was optimized by resizing it to 2000 pixels, removing metadata, and converting it to webp, resulting in a significant reduction in file size from 8000 kilobytes to 61 kilobytes (00:17:01).
• The optimized image was then uploaded to the media manager, and the website’s speed test score was re-run to see the impact of the optimization, with the result showing a significant improvement in the fully loaded time and image load (00:17:55).
• The optimization process involved using multiple tools to achieve the best results, but it’s not necessary to use all of them, and even a few simple steps can make a big difference in website speed (00:19:12).
• The website’s speed test score was improved from a lower score to a Performance score of 95, with the fully loaded time reduced to 1.3 seconds, and the image load reduced from 7.35 megabytes to 895 kilobytes (00:19:54).
• The optimization of the hero image, which is usually the largest image on a webpage, had a significant impact on the website’s speed, and optimizing other images on the website could further improve the speed test score (00:19:23).
• The speed test was run using gtmetrix.com, which is one of many speed testing tools available, and while each tool has its own biases, they can provide a useful overall pulse of a website’s speed and identify areas for improvement (00:19:28).
• To optimize images for a faster website speed, it is essential to check the file size of images, which can be done by going to the media manager, where the size of the images is displayed, allowing for identification of large files that may need to be optimized (00:20:50).
• The file size is the most important factor in achieving a good website speed, and dimensions are helpful in achieving a good file size, with standards including 50 to 200 kilobytes for background images (00:21:14).
• Image kit can be used to further improve load times by enhancing image delivery, which involves setting up an image kit account and pasting the link for optimized images in the advanced settings (00:21:49).
• Converting PNG and JPEG images to a webp format can also be done using tools like convertio.co and convertcloud.com, which can help reduce file sizes and improve website speed (00:22:35).
• Using image kit and optimizing images can significantly improve website speed, with a score of 100 being achievable, and anything in the high 80s or 90s being a good sign that the website does not have any major speed issues (00:23:05).
• Being aware of image sizes and optimizing them is a good best practice, especially for those managing their own websites, as it can help prevent page load lag and improve overall website performance (00:23:32).