In this article, we\u2019ll look at why large images might be dragging your site down. Then we\u2019ll explore how to effectively compress your media files, along with some fundamental image optimization tips that can improve your site\u2019s SEO.<\/p>\n\n\n\n\n\n
Why You Should Be Optimizing Your Images for WordPress<\/h2>\n\n\n\n
Images are a valuable and important piece of any content strategy. However, they can also be one of the main causes of slow page loading times. <\/p>\n\n\n\n
A slow website is a problem, because it can drive users away. In fact, pages that take five seconds or more to load see on average a 90 percent increase<\/a> in the probability of a user bouncing (leaving after only viewing a single page).<\/p>\n\n\n\n While there are multiple factors that can slow down your site, images and media files take up a hefty 63 percent<\/a> of bandwidth on modern websites. Consequently, it\u2019s important to optimize the images you upload to your site. <\/p>\n\n\n\n It\u2019s also worth noting that site speed is a Google ranking factor<\/a>. This means that how fast or slow your page loads will dictate, to some extent, how well it ranks in search results. There are many factors that influence your PageRank<\/a>, and images fall under the \u201cUsability of web pages\u201d category. <\/p>\n\n\n\n Image optimization is really about improving two things: <\/p>\n\n\n\n In other words, optimizing means you are getting the best quality you can out of the least pixels and bytes. This reduces your media file sizes, and can have a significant impact on your site\u2019s speed overall.<\/p>\n\n\n\n Ultimately, the best case scenario for your website is that you optimize your images<\/a> before you upload them. This is so you don\u2019t end up with duplicates or multiple versions of one image. That would defeat the purpose of lightening your website\u2019s load through image optimization. <\/p>\n\n\n\n With that in mind, let\u2019s look at some of the considerations you\u2019ll need to make when deciding how to optimize your site\u2019s media.<\/p>\n\n\n\n To get started, let\u2019s take a look at the various kinds of image formats that exist. Understanding how each of them is different and when it\u2019s best to use them can help you build towards a more streamlined use of images. <\/p>\n\n\n\n The two most common image formats<\/a> used online are JPEGs and PNGs. Both of these formats are made up of pixels. Pixels stretch when you change the size of an image, which can sometimes make it blurry. However, these image types have different strengths and weaknesses. <\/p>\n\n\n\n JPEG files are a good choice for both print and web content. This kind of image file uses what\u2019s called a \u2018lossy\u2019 format<\/a>. When a larger image is converted to a JPEG, some of the information contained in its file is lost. <\/p>\n\n\n\n That information isn\u2019t needed for simply displaying the image. However, what it does mean is that converting to a JPEG results in a smaller file size, but there can be some sacrifice in overall image quality. Fortunately, the reduction in quality isn\u2019t too noticeable, especially for smaller images.<\/p>\n\n\n\n PNG files are also useful for web content, just like JPEGs, but in a different way. Since PNGs can have transparent backgrounds, for example, they are more versatile and handy for designing web graphics.<\/p>\n\n\n\n PNGs use a \u2018lossless\u2019 file format. This means that all the information about the image is retained when the file is compressed. As a result, they tend to be of higher quality, but offer a smaller improvement in file sizes and page speeds. They\u2019re a good option for graphics and icons, and for very high-quality images.<\/p>\n\n\n\n It\u2019s time to cut the bloat. Delivering scaled<\/em> images is one of the simplest and most effective ways to optimize your images. Why so effective? Image scaling will ensure that you\u2019re not shipping any more pixels than needed to display the asset at its intended size in the browser.<\/p>\n\n\n\n Many sites try to deliver large, unscaled images and rely on the browser to resize them, which results in the use of extra resources and slower site speed. If the image\u2019s natural size is 820\u00d7820 pixels, and it is displayed by the browser as 400\u00d7400 pixels\u2026that\u2019s 32,400 unnecessary pixels!<\/p>\n\n\n\n The clarity and speed at which a page loads has a lot to do with the device on which the image is displayed (mobile, desktop, etc). For example, a 4k image may look nice on your 27 inch monitor. <\/p>\n\n\n\n However, 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. If they are using a mobile device not capable of anything larger than 400 pixels, they\u2019ll likely miss out on your content. <\/p>\n\n\n\n With that in mind, some best practices when exporting your images include: <\/p>\n\n\n\n You can use Photoshop<\/a>, Lightroom<\/a>, or a similar editor to reduce the image size to around 1,500 pixels or less in width. In Photoshop, simply go to Image > Image Size<\/em> to manually adjust the dimensions and resolution of your image. You can also go to File > Export > Save for Web<\/em> to optimize your images for web upload : <\/p>\n\n\n\n If you\u2019re not aiming to display sharp and vivid photos on a larger monitor, you can size the image down even further. <\/p>\n\n\n\n If working with Lightroom, go to File > Export<\/em> to manually adjust the image size upon exporting it:<\/p>\n\n\n\n Image size and resolution are just one part of the puzzle. When it comes to optimizing your images, you\u2019ll also want to understand compression and use it effectively. <\/p>\n\n\n\n In a nutshell, image compression<\/a> is a way of minimizing the size (in bytes) of a graphic file, without degrading the quality of the image to an unacceptable level. As we\u2019ve discussed, high-resolution images that are unnecessarily large in file size can dramatically affect page speed.<\/p>\n\n\n\n On the other hand, optimized images are 40 percent lighter<\/a> than unoptimized images on average. As a general rule, you\u2019ll want to optimize all images and other media that you upload to your website, either before or during the upload process.<\/p>\n\n\n\n As we mentioned earlier, JPEGs and PNGs use two different types of image compression. Lossless compression preserves all of the data from the original file, without sacrificing quality.<\/p>\n\n\n\n With lossless compression, you are typically breaking a file into a \u2018smaller\u2019 form for transmission or storage. Then the information is put back together on the other end, so it can be used again. <\/p>\n\n\n\n On the other hand, lossy compression removes some of the data contained in the image file. This can result in a larger drop in quality, but also a more significant improvement in page speeds. You can even customize the amount of compression, in order to achieve a balance between quality and performance.<\/p>\n\n\n\n Fast loaded images mean a speedier site and better SEO. Here are some various image optimization plugins to help you with image compression.<\/p>\n\n\n\n Smush\u2019s image compression plugin<\/a> 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.<\/p>\n\n\n\n ShortPixel\u2019s Image Optimizer<\/a> plugin compresses all past and future images and PDFs uploaded to your media library. The plugin provides both lossy and lossless compression for most file types. If you\u2019re a photographer, you might opt for the glossy JPEG compression, which uses a high-quality lossy optimization algorithm.<\/p>\n\n\n\n Looking to just optimize JPEGs and PNGs? This plugin<\/a> 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 a visible loss in quality.<\/p>\n\n\n\n EWWW Image Optimizer<\/a> does double-duty. It both optimizes existing images on your site, and takes care of new ones you upload as well. In addition, it provides you with a lot of control over how (and how much) your images are compressed.<\/p>\n\n\n\n Last but not least, Kraken.io Image Optimizer<\/a> is also handy for optimizing both new and existing media. It supports lossless and \u2018intelligent\u2019 lossy compression, making it easier to achieve high-quality images with lower file sizes.<\/p>\n\n\n\n The featured image<\/a> isn\u2019t inserted into the body of a WordPress post, but is used structurally throughout your theme. It may appear as a thumbnail next to the post\u2019s title, for example, or in the header when viewing a particular post.<\/p>\n\n\n\n Most themes and widgets rely on featured images, so it\u2019s not something you\u2019ll 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.<\/p>\n\n\n\n Once you\u2019ve 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.<\/p>\n\n\n\n Featured images are usually wider than then are high, ranging anywhere from 500 to 900 pixels wide. It\u2019s also best to choose a high-resolution image and not one that\u2019s pixelated.<\/p>\n\n\n\n Pro-tip:<\/strong> To control the media that\u2019s displayed whenever a post or page is shared to Facebook or Twitter, install the Yoast SEO<\/a> plugin. You\u2019ll not only be able to customize the title and description, but also upload the correct image sizes for each social channel.<\/p>\n\n\n\n We do recommend optimizing your images prior to uploading them. However, if that\u2019s not possible, or you want to optimize the images that are already on your site, you can still do that. There are a few methods that can help you optimize your live content.<\/p>\n\n\n\n Normally when someone visits a web page, all of its content begins to load. This means that, for a content-heavy page, it can take a while for everything to show up.<\/p>\n\n\n\n \u2018Lazy loading\u2019 involves tweaking the way your site loads content. It instructs your site to focus on first loading the text, images, and other elements that are immediately visible. Only after that will it start to load content that\u2019s only accessible by scrolling down the page. This is a great way to speed up your site and improve your visitors\u2019 experience.<\/p>\n\n\n\n The easiest way to add lazy loading to your site is through a plugin such as Lazy Load<\/a>.<\/p>\n\n\n\n This is a tool from WP Rocket that helps to reduce the volume of requests sent to your site\u2019s web server at one time. It even substitutes placeholder images for YouTube videos, so that the actual video will only load as needed. <\/p>\n\n\n\n Another way to improve speed on your site is via \u2018caching\u2019. This involves saving some of your site\u2019s data in a place that\u2019s easier and quicker for a visitor to access,- often either on a third-party server closer to where they\u2019re located, or in their browser.<\/p>\n\n\n\n There are a lot of ways to accomplish caching through coding, plugins, and other tools. Here at WP Engine, we implement robust caching<\/a> on all of our sites by default. This is beneficial for reducing the impact all of your content has on page speeds, not just your images.<\/p>\n\n\n\n EXIF data<\/a> is stored as part of an image file, and contains information about where and how a picture was taken. It\u2019s automatically added to images by cameras, and isn\u2019t generally necessary for your web files.<\/p>\n\n\n\n Therefore, removing this data from your images can speed up your pages, although the impact isn\u2019t likely to be huge. There are currently no updated plugins that can help you do this, unfortunately. So if you use a lot of photographs on your site and are concerned about EXIF data, you\u2019ll want to reach out to a developer for help.<\/p>\n\n\n\n Finally, another element that can slow down your pages is when your images are causing redirects. This most commonly happens when they\u2019re linking somewhere else.<\/p>\n\n\n\n For that reason, you should avoid embedding images from external sources on your site. Instead, save and upload each image or peice of media directly to your site if possible. You may also want to ensure that your images don\u2019t link out to anything, such as a separate media page.<\/p>\n\n\n\n Formatting image titles is another important step in image optimization. This means the image file name is relevant to its content. When you do this, it\u2019s more likely that they\u2019ll show up in related image search results via search engines. <\/p>\n\n\n\n This will increase the visibility and accessibility of your brand, as well as traffic to your site by having your site\u2019s images listed more frequently in Google Image searches. Image optimization takes very little time and can make a huge difference in your site\u2019s traffic. <\/p>\n\n\n\n Here are a few additional tips to help your images rank higher.<\/p>\n\n\n\n Alternative text<\/a>, otherwise known as \u2018alt text\u2019 or an \u2018alt tag\u2019, is an attribute added to an image in HTML. Alt text helps search engines understand what your image is about, by describing what it includes and what its purpose is. <\/p>\n\n\n\n Google relies<\/a> on alt text to determine what an image is since all it \u2018sees\u2019 is what\u2019s in the HTML tag. When you use strong, descriptive alternative text for your images, you\u2019re more likely to see your site listed appropriately in search results. <\/p>\n\n\n\n In WordPress, you can add alt text to your images two ways. First, you can add it to images that have been placed in posts, by clicking on the image and using the Image Settings<\/em> option on the right side of the screen.<\/p>\n\n\n\n Alternatively, you can also add alt text to an image by visiting Media > Library<\/em> and choosing the image you want. Then, simply add your alt text to the Alternative Text<\/em> field for that image. <\/p>\n\n\n\n Title tags are similar to alt tags, but they are for human readers, not search engine bots. Good title tag optimization can help visually-impaired users access your website.<\/p>\n\n\n\n Another way to get your images noticed by Google is to create a sitemap and submit it<\/a>. This is a good option for images that can\u2019t be crawled by search engines. <\/p>\n\n\n\n We\u2019re talking about images loaded by JavaScript, for example. Sitemaps give search engines more information about the images available on your site, so they can understand and index your content more accurately. <\/p>\n\n\n\n In WordPress, the following plugins can help you create a sitemap: <\/p>\n\n\n\n For non-WordPress websites, there are also tools that can assist in creating a sitemap, including Screaming Frog<\/a>, Dynomapper<\/a>, and more. Once you\u2019ve created a sitemap, you\u2019ll then want to submit it through Google\u2019s webmaster tools<\/a>.<\/p>\n\n\n\n Last but not least, let\u2019s look at the placement of visuals within a blog post or web page. Where you put your images within a post can have a significant impact on how it ranks on Google. <\/p>\n\n\n\n For example, if you place an image closer to your keyword phrases<\/a>, 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. <\/p>\n\n\n\n\n
Optimize Images for WordPress Before Uploading to Your Site<\/h2>\n\n\n\n
Image File Formats<\/h3>\n\n\n\n
When to Use JPEGs<\/h4>\n\n\n\n
When to Use PNGs<\/h4>\n\n\n\n
Image Size<\/h3>\n\n\n\n
\n
![\"Optimizing](\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/07\/wordpress-image-optimization-2-1024x504.png\")
<\/figure>\n\n\n\n![\"Optimizing](\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/07\/lightroom-image-optimizaiton-1024x378.png\")
<\/figure>\n\n\n\nImage Compression<\/h3>\n\n\n\n
Lossy vs Lossless Compression<\/h4>\n\n\n\n
Image Compression Plugins<\/h4>\n\n\n\n
Smush Image Compression and Optimization<\/a><\/strong><\/h5>\n\n\n\n
![\"WordPress](\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/07\/Smush-Image-Compression-and-Optimization.png\")
<\/a><\/figure>\n\n\n\nShortPixel Image Optimizer<\/a><\/h5>\n\n\n\n
![\"WordPress](\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/07\/shortpixel-image-optimizer.png\"){kind=tracking}
<\/a><\/figure>\n\n\n\nCompress JPEG & PNG images<\/a><\/h5>\n\n\n\n
![\"Enhance](\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/07\/Compress-JPEG-PNG-images.png\")
<\/a><\/figure>\n\n\n\nEWWW Image Optimizer<\/a><\/h5>\n\n\n\n
Kraken.io Image Optimizer<\/a><\/h5>\n\n\n\n
Featured Image<\/h3>\n\n\n\n
Optimize Images for WordPress After Uploading to Your Site<\/h2>\n\n\n\n
Lazy Load Images<\/h3>\n\n\n\n
Cache Images<\/h3>\n\n\n\n
Remove EXIF Data<\/h3>\n\n\n\n
Avoid Image URL Redirects<\/h3>\n\n\n\n
Optimizing Images for Search Engines<\/h2>\n\n\n\n
Alt Text<\/h3>\n\n\n\n
Title Tags<\/h3>\n\n\n\n
Create XML Image Sitemaps<\/h3>\n\n\n\n
\n
Image Placement and Captions<\/h3>\n\n\n\n
Optimize Your Images and Your WordPress Site with WP Engine<\/h2>\n\n\n\n