Agencies
Services
Author Guide – Wednesday, June 14, 2023
Big Effect with Tiny Images
Recently, in "A Picture Helps 1,000 Words," we learned using images can create a better experience for site visitors. Certainly, some of us began using more – or “better” – images across our sites after reading the article. However, even the perfect images could cause issues if not handled properly.
While gone are the days of logging onto your dial-up account, going to your favorite Illinois State agency’s website to view the latest photo gallery – stepping away to wash the dishes, do a load of laundry, vacuum and feed the dog – only to come back to find the page has only downloaded half the images so far.
With the currently available multiple “g” internet speeds, we have come to expect everything instantly. We click on a photo; we want it open now! Uploaded now! Downloaded now! When we are forced to wait…even for an extra second or two…we become irritated and, in some cases, maybe even hostile. Not only that, research shows the majority of site visitors are using mobile devices, and Google has reported that 53% of those will abandon a site if it takes more than three seconds to load!
As content authors, we can take steps to ensure download times are as minimal as possible.
How large is that image, really?
The easiest thing we can do is be certain to use appropriately sized images. The responsive containers in AEM may have you thinking that because an image only takes up a small space on the page, the image cannot possibly be causing an issue. In certain cases, you may be wrong.
When we select an image from Adobe Stock, the image is quite often thousands of pixels wide by thousands of pixels tall. We then try to stuff that image into a container that may only be 300px wide by 200px tall. So, when a visitor reaches your site, the browser ends up processing a 2MB image just so it can render the image in the dimensions you have set. What a waste of processing power! The good news is we can take a few easy steps to ease the browser’s workload.
No Photoshop? No problem!
A quick glance at the image properties details tab will reveal the dimensions of your file. If the dimensions exceed those when it is displayed on your page, you may wish to use an image processing application to optimize, resize, compress, and is some cases convert, your image.
When you think about image manipulation, Adobe Photoshop may first come to mind for many of us. While you can certainly perform these actions with Photoshop if you have working access to this software, there are additional options available to you either online or by downloading freely available software.
Tiny PNG is a web-based application that can quickly take an image and diminish its size by decreasing the number of colors without noticeable differences. In the example below, you see two images that appear to be the same. Yet, one was run through Tiny PNG’s optimization and is now half the size of the other. Can you tell the difference? Neither will your 99.9% of your users.
If Tiny PNG does not meet your needs, you can Squoosh it! Squoosh is a simple open-source web application designed by Google that allows you to resize, compress, optimize and convert all on the same screen. In the comparison below, the original image is over 1.5 MB and 3000 x 1440 pixels. The other three were compressed and resized to 750 x 300 pixels using different compression libraries available on Squoosh. Since State of Illinois sites on AEM only allow certain file types, only the libraries ending in JPEG or PNG are relevant for your images. (See Asset file types supported in AEM agency sites).
These few extra steps will ease the browsers workload tremendously. Of course, these are not the only two online image optimizers available. A simple online search will return an overwhelming number of results. However, we wanted to give you a couple we use to get you started. Just remember, bigger is not always better, especially when it comes to file sizes and downloading. Take the extra step so your site visitors can navigate through your site as quickly as they need to while still experiencing the nice visual touches images add...and it could just save your site!