The most significant consideration for building or maintaining a website these days is speed. Ensuring that your site moves quickly and supports speeds down to mobile 3G is vital in providing the best possible user experience (UX) to the largest percentage of your target demographic. The guiltiest speed hogs are network requests dedicated to fetching images and video media. One of the best ways to improve UX and guarantee site speed is to consistently practice techniques for WordPress website image optimization. If you think about images as a percentage of your overall website’s footprint, a few bytes here and there will certainly add up. By optimizing images, you can reduce the overall impact of your website’s footprint, page size, and increase load speeds.
Image optimization is just that, optimizing, compressing, scaling, resizing, or changing image formats for the web. The general idea is to reduce how many requests you have to make or how large those requests are in the first place. Google uses a term called “time to first meaningful paint,” which is when “the user feels that the primary content of the page is visible.” The faster users get to the information they’re looking for, the better off you will be.
There are many ways that WordPress website owners can improve load speeds. Some techniques can be used before an image makes it to your website and some by directly modifying your server configuration and the way that the site handles images. Let’s explore both.
Compression and Optimization
Uncompressed images can contain additional bulk that should be removed when you save your files for the web, once you already have an image, or once it’s already on your website. You can manually optimize images in programs like Photoshop, Pixelmator, or Affinity Photo. By ensuring that you’re selecting the proper image format, quality, and a few other settings, you’ll be well on your way to improving your website. Photoshop, for example, has a default preset called “JPEG High” that takes care of the bulk of the optimization for you which is probably a safe bet nine times out of ten.
We want to make sure that our image quality is set as low as possible without destroying the integrity of the image. Select “Optimized” to strip out unnecessary data from the image and further compress it. I typically find that 60 is a good quality. Much lower than that and you’ll start to see major image degradation.
A slight note on quality: by default, WordPress uses the jpeg_quality hook to set uploaded JPEG/JPG image quality to 60. You may find that images that seemed clear initially are a little fuzzy after upload. So, play around with the quality vs size ratios to see what works best for you.
JPG vs PNG vs All the Other Formats
JPG/JPEG and PNG are by far the most popular image formats you’ll see online. There are plenty of other image formats like GIFs and newer formats like JPEG 2000, JPEG XR, APNG, but you don’t need to worry about all that. Most of them aren’t widely supported by major browsers or don’t provide any additional benefit. So if you see those online, stick to the basics.
JPG/JPEGs are “lossy,” meaning that unnecessary data is removed during compression or when you save a file as a JPEG. Most of the time this doesn’t matter especially for photos, but if your image has text in it or requires transparency, you might be better served with a PNG.
PNGs support transparency and have a higher level of quality because they’re considered “lossless,” which means that no data is lost during compression. Graphics with details, like text, or that require transparent backgrounds/elements are perfect for a PNG. However, because none of that information is removed or lost, it will end up being a larger file than a JPEG. Play around with those formats and see. Sometimes the difference in size is negligible, and sometimes you’ll see a PNG at two or three times the size of a comparable JPEG.
So which is right for you?
If you’re saving an image to be a background element, design element, photograph, or something that doesn’t need to render super-detailed elements, JPEG is the way to go. If you’re dealing with text over images, transparency, or need super-detailed or crisp edges, a PNG is the way to go.
What about SVGs?
Keep in mind that not everything needs to be an image. SVGs are super lightweight because they are generated by mathematically rendering shapes from just a few lines of text. SVG supports transparency, animation, and can be colored programmatically unlike raster images. SVGs, because they are vector shapes, can be as large or as small as you want without ever losing quality.
Not everything can be an SVG, though. Only elements that don’t rely on pixels (photographs) can be an SVG. Simple icons and shapes or your logo are prime examples of an SVG use case. Because it’s code rendered by your browser, it’s super lightweight and doesn’t bog down your server with beefy network requests.
Size
I’m not necessarily talking about file size here. If we’ve optimized our images properly and chosen the right file format, we should be in good shape as the file size is concerned. I’m talking about the dimensions of the image. If the image you’re using will take up approximately 300 pixels x 200 pixels on screen, you don’t need to be using an image that is ten times the size, which happens more often than you’d think. Website platforms like WordPress will automatically generate many different sizes to allow users to select a more reasonable image size instead of always embedding “full size” images.
Purposefully selecting images and image sizes for sections of your website is vital toward improving your website’s performance. If you don’t have a desktop program, there are plenty of websites online to help you out like Image Resize or Pixlr Editor with similar size and optimization capabilities.
Metadata
All image formats contain additional metadata by default—data that describes the file, such as a title, copyright information, image ratings, GPS location data, file and dimension sizes, how, where, or when the file was edited, etc. Most of the time, these are necessary for the web unless you’re protecting your property intellectually, but that’s for another day.
Selecting the “optimized” function in Photoshop, or selecting “None” in the Metadata dropdown, will further reduce your file sizes. It is often helpful when the image is only intended to be used as a design element, or your source attributions are coded into the website itself.
Scale Images and Retina Devices
You want to select the right image for the job, but you also want to make sure that you’re providing some flexibility for desktop, tablet, and mobile devices just the same. A desktop website view might have an image of 600 pixels x 800 pixels in size, but for a phone that might be overkill, especially on slower internet speeds or older phones.
WordPress provides the ability to display images for each browser size dynamically using the `srcset` property of an image. So the image that is loaded on mobile devices is different from the image on tablet or desktop devices. They are incrementally smaller to ensure a faster load time, all handled within the image call dynamically for you.
Apple devices and devices with higher DPI screens tend to expect higher quality images in order to render clearly. The general rule is to serve images up to two times the maximum display size on all devices—desktop, tablet, and mobile at 600 pixels x 400 pixels, 400 pixels x 300 pixels, or 300 pixels x 200 pixels, respectively. Make sure that all images are optimized for the device, but also not larger than the maximum use case.
As long as you never use an image that’s larger than you need, you should be a-okay. Imsanity, a plugin for WordPress, also provides the ability bulk size or resize images for your browser more efficiently, rather than having to update your theme or configure any servers.
Caching
If you’re running any site audit tool, you might see “Leverage Browser Caching” come up as something to address. Storing images within the browser to quickly grab and render when your website loads, instead of having to make a network request to retrieve it, will reduce the load times and page size exponentially. Browser caching is a bit more complicated or may require an engineer to help optimize as it typically needs a server configuration to handle Cache-Control headers and Expires headers.
If your images don’t change very frequently, or at all, caching your media would provide almost instant access to your assets without needing to make a full network request every time, and websites that continually changes or doesn’t get high volume traffic may not necessarily benefit much from this approach. Plugins like Leverage Browser Caching may provide a direct ability to edit your headers but should be used with caution. Keep in mind, that this plugin is only intended for use with Apache Servers. Several hosting companies out there rely on NGINX, like WPEngine, so this would require a more dev-centered-server-configuration approach.
Also remember, however, that when caching is enabled you may be continuously needing to ask your users or clients to “flush their caches” or need to flush site caches manually.
CDN
A Content Delivery Network (CDN) allows you to store cached content which serves up content directly to your users rather than waiting for requests from your website instantly. A CDN’s obvious benefit is speed for all users no matter where they might be on the planet. A CDN provides proxy servers with your content for quick and reliable access regardless of location. Without a CDN, a server in New York, for example, would load much faster to someone in Ohio than it would to someone in New Zealand. With a CDN, those proxy servers relay information based on location to ensure speed.
CDNs, along with speed and caching, provide additional security benefits which are especially helpful if your content is in any way sensitive.
Additional Services
There are many other services out there to help optimize images or serve them up more efficiently. Two good examples are Smush Image Compression and Kraken Image Optimizer. Both are paid services that allow you to compress and optimizes images already in your WordPress media library, as well as those uploaded thereafter.
For optimization on-the-fly, there is Cloudinary, which allows you to upload, manage, optimize, and store images. Images are delivered via CDN and provide responsive assets as needed automatically. Cloudinary also allows you to modify, define image sizes, add effects, or change alignment on-the-fly by using URL query string options, which is a nice additional feature but not always necessarily related to image optimization.
Don’t Forget the Frontend
I’ve been talking about image optimization in a technical sense, but we can also think about optimization in the sense that organizing images, calling them correctly, and using best practices for the web can improve website visibility for SEO and avoid potential accessibility pitfalls. Ensure all images have unique alt text, something that is almost always neglected in my experience but is one of the more critical aspects for accessibility and SEO.
All unique file names should then have unique alt text. If an image is decorative, the proper way to present them is as a background image in your CSS, but if it must be inline and is purely decorative, it should at least define the alt tag as empty with the role attribute of presentation.
<img role="presentation" alt="" />
An alt tag should directly reference the image that is being displayed. If an image src is broken or unavailable, or a visually impaired individual is using your website, they should know what they’re looking at by its description. image-1 is an unacceptable alt text.
If you find yourself needing to provide an additional explanation about the image, you may use the longdesc="" attribute and give a location or file for reference, which is helpful for diagrams, etc.
Summation
It’s not the easiest thing in the world to assess and optimize your media, but you will find that once you do, your users will thank you by staying on your website longer. After all, a large percentage of website visitors will up and leave if they don’t get the information they need from in under three seconds. That alone makes WordPress website image optimization worth the effort. However, if you still need help, contact us for assistance.