Most websites today are built using one of many Content Management Systems (CMS) available that offers non-technical end users the ability to update content and upload images themselves, without the need to ask a developer for assistance. In the case of images, your CMS should allow you to drag-and-drop images, upload them in bulk, and even edit them directly within the content editor. This saves you time and allows real time updates to your site.
Most users simply upload whatever image they have available or was given to them, without considering how large the image might be. But doing so can be detrimental to your website.
How can uploading large images hurt my website?
Large, uncompressed images can significantly impact a website in several ways:
- User Experience (UX): Visitors can be impacted by slow load times. Large image files take longer to download, which can significantly slow down your website's loading speed. This can be very frustrating for your visitors, leading to less overall traffic, lower conversion rates and fewer sales. Visitors on public Wi-Fi or some mobile devices with limited processing power may experience even longer delays when attempting to download large, uncompressed images. Overall, not a good user experience.
- Search Engine Optimization: The speed at which your website loads is one important factor considered by search engines when ranking pages. Websites that are sluggish or slow loading may receive lower rankings in search engine results. This can be caused by large images on your website and may impact your page’s visibility and organic traffic.
- Server Performance: Larger images require more storage space on the server and can affect websites with extensive image libraries or those expecting high traffic volumes. Serving large images requires more processing power from the server's CPU and memory. This can strain the server's resources, especially if there's high traffic or many concurrent visitors. It can lead to higher response times and increased server load, which may affect the overall performance of the website.
These issues can prevent you from meeting your website KPIs (key performance indicators) for traffic (total users, new users, sessions, pageviews), engagement (session duration, bounce rate, return visitors), conversions (conversion rate, leads generated, sales), and SEO (keyword rankings, backlinks, domain authority).
Read on to see how you can fix your website if your site is filled with very large images, and if you need a hand, how Liquid can assist!
How can this be fixed?
There are three main ways you can fix your site when it comes to large image sizes:
- Properly resize images: Before uploading an image, consider where on the website it will be used and what size it should be. Uploading an image to be used for an author’s headshot may require an image size of 200px x 200px, but if the photographer gave you a 3000px x 3000px high-resolution proof, you should resize it using an image editor (or ask a designer to do it for you) before uploading it.
- Consider your image format: PNG (Portable Network Graphics) images are a good choice if your image is a logo, icon, illustration or graphic, or requires transparency. PNGs should be used with care, since they use lossless compression and may result in larger images if used for photographs. JPEG (Joint Photographic Experts Group) images offer good compression for photographs but use lossy compression (which makes them smaller) so be careful not to over compress. WebP is a newer format offering superior compression without significant quality loss and runs about 25%+ smaller than JPEG and PNG. However, you’ll need to convert your images to the new format before you will see the size savings.
- Compress images: Reduce the overall space it takes up on the server. Keep reading to learn more!
What is image compression?
While resizing an image will make the size smaller by changing the height and width of the image, image compression is the process of reducing the file size of an image while retaining as much of its quality and detail as possible, as well as the height and width. This reduces the overall space it takes up on the server.
How do smaller image sizes improve website performance?
We mentioned above the problems that larger image sizes cause. By reducing the size of images, we can increase page load times, improve server performance, and provide a better overall user experience.
What are the SEO benefits of smaller image sizes?
Overall, smaller image sizes contribute to a more SEO-friendly website by improving user experience, loading speed, mobile-friendliness, and crawlability. These factors work hand in hand to increase your website's search engine rankings and organic traffic.
How can images be compressed for the web?
There are several ways to compress images, whether you’re using a CMS or not.
Online Compression Tools
If you don’t currently use a CMS, or if your CMS doesn’t offer an easy way to compress uploaded images, you can use one of the many popular web-based services to run your image through before uploading, including:
- TinyJPG/TinyPNG (https://tinypng.com/) – Let “George” the adorable panda help you compress your WebP, PNG and JPEG files for free with a simple drag and drop interface.
- ShortPixel (https://shortpixel.com/) – Upload individual images or enter your website to get a list of compressed images. Offers various compression levels.
- Compressor.io (https://compressor.io/) – Similar to the others, and supports multiple image formats.
Content Management Systems
If you do use a CMS, chances are there is already a plugin or module you can install that can help you automatically compress images as you upload them.
- Umbraco – Older versions of Umbraco support the Kraken Image Optimizer (based on Kraken.io) and Tinifier (based on TinyPNG). For newer versions, you can try Dyfort Umbraco. AutoImageOptimize (v10-13).
- Wordpress – Smush, ShortPixel Image Optimizer and Imagify are just a few plugins that can get you started compressing images.
- Sitecore – While Sitecore is limited in options when it comes to compression modules, Dianoga offers an out of the box solution to optimize images in the Sitecore media library. Another option is to implement your own image compression using TinyPNG or Kraken.io API integrations.
In Conclusion
Optimizing your website's images through compression and reducing file sizes offers a myriad of benefits that can significantly enhance your site's performance and user experience. Faster load times lead to improved SEO rankings, reduced bounce rates, and higher user engagement, all of which contribute to the overall success of your website. By utilizing modern image formats, responsive design techniques, and leveraging tools and plugins for automatic compression, you can ensure your site remains visually appealing while still being efficient and accessible. While optimizing images can meet the technical requirements of your website, you will also be delivering a more enjoyable experience for your visitors with the ultimate goal of providing better overall results for your online presence.
If you’re interested in learning more about how Liquid can help you support image compression in your website, or the many other technology services we offer, hit us up!