It’s done way too often… WordPress admins, editors and authors publishing oversized images that are completely inappropriate for website use and are the root of many website problems. In this post we address two very important concerns, why images need to be optimized for size and how to easily optimize images for your WordPress website.
A Background on Website “Image Bloat”
WordPress users routinely ask me about proper image sizes for their website. The question seems straightforward, but the answer can get complex. Very little has been written for the average WordPress user about image size optimization. Most explanations found via Google are either complicated or encourage the installation of a WordPress image compression plugin (of which, I do not recommend). This 5-minute read is for ordinary WordPress users. Hopefully, what I say here provides some clarity and gets you headed on the right direction. For the sake of simplicity and brevity I’ve cut out a lot of technical nomenclature and voiced my recommendations as simply as possible. But, if you really want to “geek-out” on the topic, always feel free to read this basic Google help article on image optimization.
What’s the Problem with Publishing Large Image Files?
ANSWER: Publishing large images on a web page is the #1 culprit for a slow-loading website.
Web pages should load as quickly as possible. The larger the overall size of a page, the slower that page will load for a web visitor. And, a slow-loading website can lead to the following issues…
- Lower Search Engine Rank
- Server and Web Hosting issues
- Increased Visitor Bounce Rate (visitors will drop off your site and visit your competitor)
- Your visitors can burn through their cell phone data plan
- Your visitors/customers experiencing a heightened level of frustration
Image Sizes Weigh Down Your Website’s Success
The following statistics, from HTTP Archive, are on the conservative side of industry measurements. Other sources (not cited) estimate web page and image sizes to be more than double with what’s referenced here. Over the last 5 years (from June 2013 through June 2018), the average website page has grown in size (in kilobytes) by 87% for desktop, and by 258% for mobile. On the desktop, the average webpage that was once under 1MB in 2013 is now over 1.7MB. A good portion of this growth is attributed to the broader and more integrated use of images on websites. Currently, images account for nearly 50% of the overhead (864KB) on a web page. As we continue to use more images and high-quality images, it’s our job as web publishers to keep their size to minimum so our visitors and customers are happy.
The Cardinal Rule for Website Image Publishing…
DO NOT upload images directly from your digital camera or smartphone camera (or directly from a stock image provider) to your WordPress website! This could create errors, lead to a down website, or something else really bad (think “White Screen of Death”). Always optimize your images before uploading them to the website! Images taken by a digital camera or camera phone can be as small as a 1MB file or may be as large as 45MB (or even larger). These file sizes are way too big for a web page.
“It is important to make sure that your page size, as well as the total size of JS and CSS files (transfer size), doesn’t exceed 2MB. “Even though 2MB is enough for a page to ‘live its life to the fullest’, […] we recommend you put your page on a diet and keep its size at least under 2MB. “[…] images and videos make up the largest part of a page’s weight, so that should be your starting point. “
What is Image Size? When discussing images there are two types of “sizes” to consider, dimension size and file size.
Image dimension size
Image dimensions are referencing the number of pixels in an image. For example, you may work with an image that is 1280 x 720 pixels. This means the image is 1280 pixels wide and 720 pixels high. The number of pixels directly influences both the image file size.
Image file size
The image file size, on the other hand, refers to the amount of storage being consumed on a device, described in kilobytes (KB) or megabytes (MB). For example, the feature image at the top of this post (the hand holding a camera phone) has a file size of 98KB. The goal for website image optimization is to get each image file size as small as possible without sacrificing viewing quality.
File Formats for Images
Also, it is important to understand the file formats that are used on websites. The most common image file formats are .JPG, .PNG, .ICO, and .GIF. As a rule for web admins (especially beginners), here are what these image types should be used for…
JPEG (aka, JPG) image files
JPEG files should be what you’re working with 95% of the time. They’re used “above the fold“ as hero images and are mixed in with written copy to support context. The JPEG file format is the most popular image file format for good reason. Images can be compressed down to a very small size. JPG and JPEG are terms that are used interchangeably. The file extensions themselves, .JPG and .JPEG, represent the same file type. Do not be confused between the two; there is no difference between the files except for an additional letter in the file extension. My team has standardized on the use of the .JPG extension because it’s my preferred image editor, Adobe PhotoShop, uses as its default.
PNG image files
This file type typical can’t be compressed as small as a JPEG and should be reserved for specific-use cases. PNGs should be employed for logos, icons, or images with transparent areas. Many photo editors save images as a .PNG by default. Save it instead as a smaller JPG whenever possible. It’s often the case, that what would be a 200K PNG file can be saved as a 50K JPG by just selecting JPG in the file type dropdown when saving an image.
GIF image files
I generally avoid using GIF file types. Although they’re great for images with basic colors, such as graphs and charts, they won’t compress down nearly as tightly as a JPEG for photos (the mainstay of what I publish). However, GIFs are a great choice for employing simple animation on a website.
ICO image files
These file formats are primarily used as favicons in browser tabs. Like the PNG format, ICO supports transparency and doesn’t compress as small as JPEG. Although PNG files can be used as favicons, ICO files are the favored favicon format because they’re backwards-compatible with older browsers.
Will the image be a Hero or part of the Supporting Cast?
The Hero Image
A Hero image sets the tone for the page. This image usually found at the top of a webpage (above-the-fold) and spans the whole width of the browser or display, edge-to-edge, from left to right. The image at the top of this post is an example of a Hero image. As a general rule, the Hero should be between 1280 and 2000 pixels wide. Anything less than 1280, the resolution becomes grainy or fuzzy. On the other hand, when the image starts to grow beyond 2000 pixels in width, the image file storage size is likely to go beyond the recommended threshold. My Recommendation… The width:height ratio may vary, based on WordPress theme requirements and design application. Typically for Hero images I create, I use the ratio of 1280 x 720 pixels (or 16:9 ratio).
A Supporting Cast Image
This image is found mixed in with the written copy of a web page, post or article. It’s most often a fraction of both dimensional size and the storage size of a hero image. My Recommendation… The storage size for this type of image file should always be under 80K, with a target of under 40K.
The Image Optimization Caveat…
The exception (and there are always exceptions) to my recommendations are images for Galleries. Visitors taking a look at gallery of fine art or photography should expect to see higher quality images. I’d easy recommend gallery images be 2,000-2,500 wide and be between 250k-300k. For artwork viewing, a visitor would be willing to wait slightly longer for the images to load.
Learn how to Optimize Images by Watching this Video
I recommend everyone subscribe to and use Adobe’s Photoshop CC for image editing. It surpasses other software like Gimp and Ifran View. Don’t waste time on other editors. Learn the basics of Photoshop today! It’s the industry standard and mastering even a fraction of its capabilities puts you ahead in the game.
I’ve searched extensively for a comprehensive video on website image optimization. Surprisingly, Adobe lacks a good one. This 16-minute video is the best resource. Though focused on optimizing online store images, these instructions apply to any website for image optimization.
I’m Not a Fan of Image Optimization Plugins
The #1 & #2 Good Reasons Not to Use Them
First
My team has found that many website admins become over-reliant on compression plugins to do the work they should be doing manually. Yes, it’s exciting to see an image automatically compress by 50%, from 1,200K to 600K, when uploaded. However, that compressed image size is still 6X-10X larger than what really should be published.
Second
Some companies rotate through staff members who author and edit web pages. Frequently, rookie staff members unfamiliar to a new workflow will make mental note that image files are compressed upon upload and assume the images are ‘Good to go’ for publishing, when in fact they may not be.
Other Important Reasons Not to Use Compression Plugins
Loss of Details
You, the webpage publisher, have little-to-no control on how images are automatically compressed and may lose many details.
Hosting Storage Quota Will Be Reached Quickly
The reliance on image compression plugins will fill your hosting account storage 100x faster than if you compression the image before you upload. Many compression plugins first save a copy of the original image file (with its HUGE size) and then saves additional compressed versions. So in practice, if one uploads a 2,000K image and it’s then compressed by 50%, there’ll be at least 3,000K of hard drive storage used on your hosting account for a single image. Most hosting companies do make their customers pay for storage.
SEO Hazard
Some compression plugins, such as Jetpack’s Photon, store copies of your images in 3rd party data centers and push them out from there when a visitor loads a page. Some argue (myself included) there is a SEO handicap with this type of strategy. Others claim there is no affect on SEO. But why gamble with your SEO if you don’t have to?
A Website Becomes Incrementally More Vulnerable
And finally, a compression plugin just incrementally makes your website more complicated on the back end. If the plugin is a CDN service, what happens to your images if the plugin is discontinued or abandoned? Or, if their server connection is disrupted? My final thought is… An optimization plugin is an unnecessary plugin that’ll need regular updating. It’s just another opportunity for a software conflict and an additional target for a hacker.
0 Comments