The topic of images is a sordid state of affairs. While images play a direct role in both user engagement and Google ranking, they are also the largest contributor to sluggish page load times.
While the go-to response when dealing with an underperforming website is to simply cut back on the number of images, this seemingly obvious solution can be as detrimental as having too many slow loading images. According to trends established by end-users and Google, images are no longer optional.
In fact, sites who primarily communicate their message/information via text-heavy pages are likely to see a substantial decrease in organic traffic as Google switches to an image/visual-first mindset.
Considering the invaluable benefits of images, as well as its potential to slow down site performance, optimization is not only important, but essential.
Although the need for image optimization isn’t a foreign concept, its methodology and best practices are often overshadowed by misunderstandings. Perhaps the most notorious myth is image optimization, specifically compression, significantly reduces quality.
In an effort to retain the visual beauty of website images, many website owners make the mistake of foregoing optimization altogether. Unfortunately, their desire to sustain the aesthetic appeal of their images results in lackluster site load times and lowered Google ranking.
But, it doesn’t have to be this way. It is completely possible to safeguard the crisp, vibrant quality of images while satisfying the need for speed users and Google crawlers demand. Of course, this requires not only understanding the benefits of proper image formatting, but more importantly, its best practices.
Before heading to your website and uploading even one more image, take a few minutes and join us as we dive into the compressed world of 21st Century image optimization techniques.
The Benefits of Being Small – Why Optimize Images?
To simply say image optimization benefits website load times is an incredible understatement. Sure, smaller image files directly influences page load times, but this one action yields a myriad of advantages.
So, what are these benefits? Here’s just a few from a long laundry list:
- Dynamically boosts SERP (Search Engine Results Page) ranking in two ways. First, the decreased page load times enhances overall website response times. Google specifically outlined its latest, and upcoming, algorithm updates reward sites with higher ranking based on overall website speed. Secondly, optimize images are easily captured and ranked for image-based search results. This opens an entirely new realm of organic traffic as Google begins to push image results harder than ever before.
- Optimize images not only load faster for end-users, but significantly reduces website backup durations. Since creating website backups is a common maintenance practice, this adds up to hours of saved time.
- Larger image files require an astonishing large amount of bandwidth when transferred from your web server to visitor browsers. Reducing image data weight reduces overall bandwidth usage, which allows greater server resources to be used for other on-page and backend elements.
A Step-by-Step Guide to Image Optimization for 2018
In essence, the foundation of image optimization is finding the perfect balance between the highest possible quality and the lowest possible file size.
While mastering this process can take a little time, there are many online tools capable of streamlining this process. However, the success of any optimization and compression tool is based upon following several fundamental steps:
Step One – Image File Format (No, They’re not all the same…)
Before compressing and optimizing an image, it’s paramount you choose the best file format. If you’re new to the realm of website images, you may be surprised to learn different file formats perform differently when optimized and rendered.
Understanding that there are always exceptions to any rule, the bulk of your images should be saved in one of the following formats:
- JPEG – This is by far the most common and accepted image file format. Not only does it offer high quality rendering after compression, but it’s easy to manipulate and most image editing software works with this format type.
- PNG – Much like the aforementioned file type, PNG produces quality images that handle compression relatively well. However, the compressed file will always be larger than JPEG. Therefore, use this format sparingly and for smaller-sized images.
- WebP – Unlike other formats, WebP isn’t supported by every web browser. However, this file type produces the smallest size while retaining the highest degree of quality.
Step Two – Resize Images BEFORE Uploading (Forget CSS-based sizing)
Think resizing images via CSS helps boost site speed? You better think again! Even when an image is rendered to 200 x 200 pixels, if the original uploaded file is 2,000 x 2,000 pixels, browsers must retrieve and render 10 times the data.
As a rule of thumb, always resize images to their desired scale prior to uploading. While you may still instruct their displayed scale in CSS, you won’t waste precious data (and time) downloading/rendering unnecessarily large files.
Step Three – Compress, Compress, Compress (Did we mention compression?)
Did you know hidden within image files are troves of useless data, such as metadata and color profiles? As you can imagine, these data fields create bulkier-than-necessary files. The only way to eliminate this speed-damaging situation is via compression.
Image compression tools simplify the art of streamlining by automatically eliminating hidden data without reducing quality. Once you’ve resized your images, run each one through a compression tool before uploading to your site. This is especially important for image-heavy sites.
Here are a few of the most popular image compression tools:
