With the rise of image-heavy social media networks like Instagram and Pinterest, the demand for “media-rich” websites is becoming less of a trend and more of a necessity.
People expect to see multimedia during their browsing experience, and the days of text-heavy or bland content with no supporting imagery are numbered. On the other hand, the increase in media-rich sites are causing many web designers and developers to battle increased loading times due to all those images bogging down and slowing the page load – even on modern, fast connection speeds such as broadband cable and fiber. Now, those designers and developers are forced to walk the fine line between rich user experience and loading speed.
In this article, I’ll discuss the benefits of adding more images to your web content, the importance of optimizing those images, some guidelines on pixel and file size, and some recommendations on software for optimizing your images, including paid and free options.
Images, they’re important
No one has to be convinced that imagery is a vital part of a human’s interaction with any kind of content, whether it be physical or online. The idiom “a picture is worth a thousand words” has been around now for over 100 years according to Wikipedia1 – and before someone coined the phrase, it was already a universally understood fact. And based on that inherent psychological truth, advertisers, designers, and photographers have used imagery to sell, inspire, entertain, educate, and more.
In the online world, images enhance the user experience not only by creating aesthetically-pleasing websites, but by giving context and support to text, bulleted lists, headings, and navigation. Modern websites employ iconography to guide and inform users, giant hero images to catch attention and make calls to action, and galleries to display large quantities of images in an efficient way. Almost every page of most modern websites have one or multiple images to create a more vibrant, relevant, useful, and pleasing browsing experience.
The Fine Line
We know that all the images on our websites look beautiful, inform the user, and make the website generally more useful – so why does it feel like loading the page takes us back to the dial-up dark ages? It’s because the user’s browser is requesting more calls to the server, asking for larger data chunks, and it’s taking longer to download all the pieces that make up the site. Suddenly, the loading time skyrockets, users are checking out before the page finishes loading, and search engines are downranking the site as a punishment. In addition to that, with computer monitors becoming higher resolution and smartphone devices shipping with screen resolutions that rival a movie theater, not only do users want more images but now they need to be a whole lot bigger to fill the screen.
So how do we increase the number and size of images on our websites, but keep the loading time at a respectable level? The good news is we have lots of tools and technology at our disposal.
To begin, a quick tip: images that come out of a digital camera or smartphone are typically 2-5 times bigger than they need to be for a website. For example, the average iPhone 6 spits out images at a resolution of 8 megapixels, which is roughly 3264 pixels by 2448 pixels.2 According to hobo, a UK-based SEO firm, the two most popular monitor resolutions in late 2016 were 1366×768 and 1920×1080.3
Even then, many web users don’t actually use the full monitor for web browsing, so those horizontal dimensions could conceivably be even less. The lesson here is that if you’re uploading images to your website straight from your camera, they’re probably way bigger than they need to be and will take way longer to download. This is especially true if you’re looking from the perspective of a mobile user, whose usage numbers continue to outweigh desktop users more and more.
The solution? Size your images before uploading to fit the pixel size of their container, whether that be the full monitor, just the browser window, or a section within a website. In many cases, depending on the quality of the images and optimization technique, you can get away with a smaller pixel dimension that will scale up and still look acceptable. We’ll discuss the tools and software that will allow you to do that later in this article.
In the same vein, images that are sized to the correct pixel dimensions may still be packing some unnecessary data baggage that increases loading time. Optimization of those images involves software that analyzes the existing pixel and metadata, and finds places where it can trim the fat to make the file size smaller.
This results in an optimized image, but keep in mind there is a balance to be struck between compression (the pixel-tweaking software optimization) and resulting quality. For example, an image with smooth color transitions such as a sunset photo, or an image with a lot of edge detail such as a portrait or architectural photo will be affected more harshly by image compression. But a slightly blurred photo, background photo, or texture can be optimized more because the resulting visual quality is not as affected:
This is why it’s important to optimize each image on its own rather than bulk-processing images, because each will have its own balance between quality, file size, and compression. Also, like I mentioned above, some photos of particularly high quality or sharpness can be saved/sized to a lower pixel dimension to save on file size, and will look just fine blown up slightly in the browser view. The exception to this rule might be if you were trying to optimize an extra large gallery of dozens of images, and wanted to just give each image a reduction in size without custom-tweaking each one – in which case the quality and compression of the images would be subjective to the image author and/or type of website (i.e. a photographer’s website should probably have the minimal amount of compression and loss of quality).
Alternatives to pixel based images include svg files, which are the web version of vector graphics – as well as using tools like icon fonts to replace pixel images for icons, buttons, etc. These are outside the scope of this article but if you want to learn more about the pros and cons, check out info about svg files at https://www.w3schools.com
The Tools for Optimization
The need for optimization is clear, so how do we go about it? The go-to for most design and development professionals is Adobe Photoshop. Photoshop has a built-in “save for web” image optimizer with lots of options to tweak, including file size, pixel size, compression amount, color management, file type and more. You also get a side-by-side comparison of the original and the optimized versions so you can check quality issues.
Photoshop can be purchased on a monthly-fee structure for around $10/mo, you can check out Adobe’s website for current pricing and details.
If you don’t want or can’t afford Photoshop, there are some free alternatives to consider:
GIMP.org – Gimp is essentially a Photoshop-like program that is free and open source (code is freely available). It mirrors many of the features of Photoshop, and has it’s own quality options for exporting images.
tinypng.com – A popular free website service that allows you to upload images for optimization. This service does not resize image dimensions though, for that you’ll need an image editor.
imageoptim.com – This is a free downloadable application for Apple computers only, and is very popular for it’s low-settings drag-and-drop style interface. They also offer a paid web-based optimizer.
FileOptimizer – Since ImageOptim is a Mac – only program, they actually recommend FileOptimizer for Windows users. While the interface is a little more “Windowsy,” it seems to have a very decent optimization technique. At the time of this writing, the download is free and available at: http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer
There are actually a TON more, if you do a search engine search for “image optimization software.” I would recommend doing research on all the available services before downloading, signing up, and definitely before paying any money.
WordPress itself also has a very rudimentary image editor with functions such as resize, crop, rotate, flip, etc… While this does not actually optimize the image, it can allow you to resize if you’re uploading directly from a digital camera or smartphone. Also, WordPress has gotten very intelligent about responsive images (images that are loaded at different sizes based on the width of the browser window) and will try to load the appropriate size automatically without any interaction from a human. Another reason why WordPress rocks.
It IS possible to overthink image optimization
While image sizing and optimization is extremely important and needs to be addressed for any website – it is possible to inadvertently go overboard. When optimizing images, don’t hold yourself to the impossible standard of squeezing every single kilobyte out of image size, and every single pixel. Many of the online “speed test” checkers will give a very well-built and optimized site medium ratings because of all the dozens of minutiae factors, many of which apply to image size and optimization. While those ratings are a decent way to identify and solve large bottleneck problems, expecting to get 100% or A++ is not something most small business owners need to make a priority. Instead put enough effort into optimization to make a measurable difference in your user’s experience, and spend the rest of time creating valuable and relevant content.
In the same vein, this article probably just barely scratches the surface of image optimization, especially in regards to things like retina monitors, QHD screen resolutions, and pixel size and ratio. The point is that if you try to satisfy every single eventuality for every single screen, you will drive yourself crazy and will have wasted a lot of time and energy better spent on more valuable pursuits such as content creation and link building.
If you have any questions on image optimization or would like to share your favorite tools and processes, please feel free to send us a message!
1 – https://en.wikipedia.org/wiki/A_picture_is_worth_a_thousand_words
2 – https://support.apple.com/kb/sp705?locale=en_US
3 – http://www.hobo-web.co.uk/best-screen-size/
