How To Optimize Your Images For WordPress
There are many reasons why you would (and should) include images in your WordPress posts and articles. Mainly, you love your site visitors. Images are a necessary way to break up long pieces of content and improve SEO, keeping the reader engaged and drawing new audiences in.
Unfortunately, images are probably the largest asset on a web page that must be loaded. Just a two-second delay in load time can result in page abandonment rates of up to 87 percent. The biggest culprit? Image load time.
Images and media files take up a hefty 63 percent of bandwidth on modern websites. Therefore, it’s super important to optimize any image you upload to your site for speed. Image optimization is really about two things: optimizing the number of bytes used to encode each image pixel and optimizing the total number of pixels.
Read on to get a further explanation of why large images might be dragging your site down, how to effectively compress your media files, and fundamental image optimization tips to improve your site’s SEO.
Optimizing Your Images for WordPress
It’s time to cut the bloat. Delivering scaled images is one of the simplest and most effective ways to optimize your images. Why so effective? Image scaling will ensure you’re not shipping any more pixels than needed to display the asset at its intended size in the browser.
Many sites ship large, unscaled images and rely on the browser to resize them which results in the use of extra CPU resources and slower site speed. If the image’s natural size is 820×820 pixels and it is displayed by the browser as 400×400 pixels…that’s 32,400 unnecessary pixels!
The clarity and speed at which a page loads has a lot to do with the device with which the image is displayed (mobile, desktop, etc). While a 4k image may look nice on your 27 inch monitor, one thing to consider is when a visitor loads a page with that image, the browser will render the file at its full resolution FIRST and THEN scale it down to fit on their screen, which may be in a browser of a mobile device not capable of anything larger than 400 pixels.
Best practices when exporting your images would be to keep your image’s file sizes under a couple hundred kilobytes. Typically you can reduce the size well below this threshold by saving your images as “web optimized” JPEGs or PNGs. It’s also important to understand that when your files are optimized for the web, it will save them at a resolution of 72 dots per inch (dpi), which is the web standard.
You can use Photoshop, Lightroom or a similar editor to reduce the image size to around 1,500 pixels or less in width (likely smaller if you aren’t aiming to display sharp and vivid photos on a larger monitor).
The featured image isn’t inserted into the body of the WordPress post but is used structurally throughout your theme as a thumbnail next to a post title or in the header when viewing a particular post.
Most themes and widgets rely on featured images, so it’s not something you are going to want to skip out on. Featured images allow for greater customization; you will have the ability to display unique custom header images for specific posts and pages or set thumbnails for special features of your theme.
Once you’ve decided on the size you want your featured image to be, that size will remain set for all future featured images. The size you should select depends on the theme of your WordPress site and the layout of your posts. Featured images are usually large in width, ranging anywhere from 500-900 pixels wide. It’s also best to choose a high-resolution image and not one that’s pixelated (aka a lossless JPEG image that’s been stripped from the web).
Pro-tip: To control the media that’s displayed whenever a post or page is shared to Facebook or Twitter, install Yoast SEO. You’ll not only be able to customize the title and description, but also upload the correct image sizes for each social channel.
Image compression is defined as minimizing the size in bytes of the graphics file without degrading the quality of the image to an unacceptable level. High-resolution images that are unnecessarily large in file size can dramatically affect page speed, yet optimized images are 40 percent lighter than normal ones.
There are two different ways to compress images: lossless and lossy compression. Lossless will preserve all the data from the original file without sacrificing quality. On the other hand, lossy removes some of the data in order to create a reduced file size.
With lossless compression, you are typically breaking a file into a “smaller” form for transmission or storage and then putting it back together on the other end so it can be used again. Lossless compression is often used for simple graphics and is recommended over lossy if you have space.
Whatever compression you choose, remember to consider the WordPress theme you have chosen and the correct image dimensions associated with that theme.
Image Compression Plugins
Fast loaded images mean a speedier site and better SEO. Here are some various image optimization plugins to help you with image compression.
Smush Image Compression and Optimization
Smush’s image compression plugin works to resize, optimize and compress all of your images for the web so they load faster than before. If your site is photo-rich, then this plugin is a must-have!
ShortPixel Image Optimizer
ShortPixel’s Image Optimizer plugin works to compress all past and future images and PDFs uploaded to your media library. The plugin provides both lossy and lossless compression for most file types. For photographers, you might opt to choose their glossy JPEG compression, which uses a high-quality lossy optimization algorithm.
Compress JPEG & PNG images
Looking to just optimize JPEGs and PNGs? This plugin uses image compression services TinyJPG and TinyPNG to help you with image compression. On average, JPEG images are compressed by 40-60 percent and PNG images by 50-80 percent without visible loss in quality.
Optimizing Images for Search Engines
When you properly optimize your images by formatting them accordingly and tilting them based on related content, it will be easier for them to show up in related image search results via search engines. This will increase the visibility and accessibility of your brand, as well as traffic to your site by having your site’s images listed more frequently in Google Image searches. Image optimization takes very little time and can make a huge difference in your site traffic. Here are just a few additional tips to help your images rank higher.
Alt text or alternative text is an attribute added to an image tag in HTML. Alt text will help search engines understand what your image is about by describing what’s on the image and what is its function on the page. If you have an image that is used to buy a product, the alt text would say “button to buy product X.” Google relies on alt text to determine what the image is and its surrounding text.
WordPress allows you to add alt text to your images when you upload them using the built-in media uploader. You can also add alt text to an image by visiting Media » Library and then click on the Edit link below the image.
Pro-tip: It’s important to note that while Alternative Text can help your images and content rank higher, Title Text does not affect SEO.
Title tags are similar to Alt Tags, but they are for human readers, not the search engine bots. Good title tag optimization can help visually impaired users access your website.
XML Image SITEMAPS
If you’re on WordPress, these plugins can help you create a sitemap: Google XML Sitemaps, Yoast SEO, All-in-One SEO Pack, and Udinra All Image Sitemap. For non-WordPress sites, there are many tools that can assist in creating a sitemap, including Screaming Frog, Dynomapper, and more. Once you’ve created a sitemap, you’ll then want to submit it through Google’s (or other search engine’s) webmaster tools.
The placement of visuals within a blog post or web page can make a significant impact on how it ranks on Google. If you place an image closer to the search text, it is likely to rank better. Also, note that adding a keyword rich caption to your image counts as search text and can help with better image SEO. Just don’t overdo it on captions, unless it adds extra value to the image.
If you want to improve the user experience and increase your site visitors, it is very important you optimize your images with these tips in mind. Not only will your site visitors be happier, you will dramatically improve SEO which is great for your brand’s visibility and accessibility.
At WP Engine, we have created a specialized managed WordPress hosting environment that guarantees ultimate WordPress optimization. We will ensure that your all your pages and media load quickly, keep your site secure and stable, ultimately improving the user experience. WP Engine takes the worry out of making sure all aspects of your site are fully optimized, giving you time to focus on other aspects of your business. Check out our various plans that cater to businesses of all sizes.