{"id":141002,"date":"2019-05-26T08:00:14","date_gmt":"2019-05-26T08:00:14","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=141002"},"modified":"2019-11-26T21:18:30","modified_gmt":"2019-11-26T21:18:30","slug":"image-optimization-guide","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/image-optimization-guide\/","title":{"rendered":"The Ultimate Guide to Image Optimization for WordPress"},"content":{"rendered":"<p>Images are one of the most important elements on your site and getting them right can be the difference between a popular site that provides an awesome user experience and one that doesn\u2019t get any traffic or conversions. But images are, well, <em>complicated<\/em>.<\/p>\n<p>There\u2019s a lot you need to do to get them perfect so you get the most benefit.<\/p>\n<p>In this ultimate WordPress Image Optimization guide, I\u2019m going to give you all the information you need to optimize your images. We\u2019re going to go through everything:<\/p>\n<ul>\n<li><a href=\"#prep-images\">How to prep your images before upload<\/a><\/li>\n<li><a href=\"#optimize-images\">How to optimize WordPress for your images<\/a><\/li>\n<li><a href=\"#seo-images\">How to identify images so they improve your SEO<\/a><\/li>\n<li><a href=\"#serve-images\">How to serve images efficiently<\/a><\/li>\n<\/ul>\n<p>We\u2019ll cover all the important subtopics and information we\u2019ve shared in our previous image optimization posts as concisely as possible (including our <a href=\"https:\/\/wpmudev.com\/blog\/seo-images\/\" target=\"_blank\" rel=\"noopener\">complete guide to SEO for images<\/a>), so you\u2019ll be a WordPress image optimizer in no time. If you\u2019d like a much more thorough explanation of these topics, I\u2019ve included links throughout this post to our in-depth tutorials.<\/p>\n<p><strong>Preparing Your Images<\/strong><\/p>\n<ul>\n<li><a href=\"#composing-images\">Composing Images<\/a><\/li>\n<li><a href=\"#sizing-cropping\">Sizing and Cropping Images<\/a><\/li>\n<li><a href=\"#scaled-images\">How to serve scaled images<\/a><\/li>\n<li><a href=\"#cropping-images\">Cropping Images<\/a><\/li>\n<li><a href=\"#image-formats\">Using the Right Image Format for the Job<\/a>\n<ul>\n<li><a href=\"#about-file-types\">About Image Files<\/a>\n<ul>\n<li><a href=\"#vector-images\">Vector images<\/a><\/li>\n<li><a href=\"#raster-images\">Raster images<\/a><\/li>\n<li><a href=\"#lossy-compression\">Lossy Compression<\/a><\/li>\n<li><a href=\"#lossless-compression\">Lossless compression<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#image-file-types\">Image File Types<\/a>\n<ul>\n<li><a href=\"#jpeg-image\">JPEG<\/a><\/li>\n<li><a href=\"#png-image\">PNG<\/a><\/li>\n<li><a href=\"#webp-image\">WebP<\/a><\/li>\n<li><a href=\"#svg-image\">SVG<\/a><\/li>\n<li><a href=\"#gif-image\">GIF<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#image-titles\">Image Titles<\/a><\/li>\n<li><a href=\"#bulk-image-editors\">Bulk Image Editors<\/a><\/li>\n<\/ul>\n<p><strong>Optimizing Your Images in WordPress<\/strong><\/p>\n<ul>\n<li><a href=\"#default-image-sizes\">WordPress Default Image Sizes<\/a><\/li>\n<li><a href=\"#responsive-images\">Responsive Images<\/a><\/li>\n<li><a href=\"#retina-images\">Retina Images<\/a><\/li>\n<li><a href=\"#next-gen-images\">Next-Gen WebP Files<\/a><\/li>\n<\/ul>\n<p><strong>Image SEO<\/strong><\/p>\n<ul>\n<li><a href=\"#title\">Image Title<\/a><\/li>\n<li><a href=\"#alt-text\">Alt Text<\/a><\/li>\n<li><a href=\"#image-caption\">Image Caption<\/a><\/li>\n<li><a href=\"#other-elements\">Other Elements on the Page Near the Image<\/a><\/li>\n<li><a href=\"#sitemaps\">Sitemaps<\/a><\/li>\n<li><a href=\"#social-media-tags\">Social Media Tags<\/a><\/li>\n<\/ul>\n<p><strong>Serving Images<\/strong><\/p>\n<ul>\n<li><a href=\"#lazy-loading\">Lazy Loading<\/a><\/li>\n<li><a href=\"#browser-caching\">Browser Caching<\/a><\/li>\n<li><a href=\"#cdn\">Content Delivery Networks, CDN<\/a><\/li>\n<\/ul>\n<p>If you&#8217;re wondering what the best WordPress image optimizer is, look no further than our very own Smush Pro. Combine it with Hummingbird and SmartCrawl SEO, as all three can dramatically improve the performance of your images. You can try all three on your site with a no-risk <a href=\"https:\/\/wpmudev.com\/\" target=\"_blank\">free trial<\/a>.<\/p>\n<p>Looking to optimize images on a low traffic, individual, or hobby site? We also have <a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\">a free version of Smush available on WordPress.org<\/a>.<\/p>\n<h2>How to Optimize Images<\/h2>\n<p>Before you ever upload an image to WordPress, you need to make sure that your image is the best it can be when you make it. You need to compose it properly, size it perfectly, use the appropriate image format and give it a descriptive file name.<\/p>\n<h3 id=\"composing-images\">Composing Images<\/h3>\n<p>The most important question when creating your images is the following:<\/p>\n<blockquote><p>Is this image necessary?<\/p><\/blockquote>\n<p>Images take a lot of resources to deliver to your visitors. They\u2019re \u201cexpensive\u201d site assets so you shouldn\u2019t use them just to fill a space. Create original images that enhance your content and use inexpensive assets, such as headings and text, instead of images to communicate and add style whenever possible.<\/p>\n<p>Never add text to your images. This practice doesn\u2019t follow accessibility best practices and if your images shrink down to be mobile-responsive, then the text will be smaller and harder to read. Plus, images with text need to be of much higher quality to preserve the fine detail of the letters. Don\u2019t waste resources, <a href=\"https:\/\/www.w3schools.com\/howto\/howto_css_image_text.asp\" rel=\"noopener\" target=\"_blank\">create the text over your images with CSS<\/a> instead, for better results.<\/p>\n<p>Giving up images is hard, I know. They can really make your site look great, but according to research on site performance, <a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-resources\/experience-design\/mobile-page-speed-load-time\/\" rel=\"noopener\" target=\"_blank\">sessions that convert users had 38% <em>fewer<\/em> images<\/a> than sessions that didn\u2019t convert, so more images don\u2019t add to the bottom line.<\/p>\n<h3 id=\"sizing-cropping\">Sizing and Cropping Images<\/h3>\n<p>When it comes to images, size matters! And bigger is not better. GTmetrix and Google PageSpeed Insights recommend <a href=\"https:\/\/wpmudev.com\/blog\/compress-resize-images-wordpress\/\" target=\"_blank\">scaling your images<\/a> to fit the container they will inhabit to improve performance.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/02\/GTmetrix.png\" alt=\"Screenshot of GTmetrix Serve Scaled Images Message\" width=\"600\" height=\"251\" \/><figcaption class=\"wp-caption-text\">If you do nothing else for image optimization, at the very least scale your images. It will make a huge difference if you&#8217;ve been doing it wrong.<\/figcaption><\/figure>\n<\/div>\n<p>Images that are oversized for their container need to be manually shrunk by the browser. This wastes time and data when loading your web pages, without providing any benefit in performance and quality.<\/p>\n<h4 id=\"scaled-images\">How to Reduce Image Size in WordPress<\/h4>\n<p>The first step is to use the developer tools in your browser to find out the different sizes of the image containers on your site.<\/p>\n<p>Watch our quick tutorial on how to detect incorrectly sized images in WordPress.<\/p>\n<p><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><span class=\"embed-youtube-lazy-id dev-hidden\">QO6mXR2WbLk<\/span><\/span><\/p>\n<p>Then use an image editor to resize the image to fit the largest container it will inhabit on your site. If you want to use Retina images on your site, you\u2019ll need double both the width and height of the largest container. <a href=\"#retina-images\">We\u2019ll talk more about Retina images below<\/a>.<\/p>\n<p>If you\u2019re scaling a new image for your site, then all that\u2019s left is to upload the image and use it in the container it was sized for. If you\u2019re correcting an existing image on the site, upload the image and replace the URL of the old image with the new one.<\/p>\n<p>Smush Pro can also resize your images automatically. So if you have a mature site with lots of images, let Smush take care of the scaling. <a href=\"https:\/\/wpmudev.com\/project\/wp-smush-pro\/\" target=\"_blank\">Try Smush Pro free<\/a>.<\/p>\n<h4 id=\"cropping-images\">Cropping Images<\/h4>\n<p>When cropping your images, try to create tighter crops and cut the excess detail and space from the image.<\/p>\n<p>4:3 and 16:9 ratios are better for image SEO, so if your goal is to <a href=\"https:\/\/wpmudev.com\/blog\/seo-images\/\" target=\"_blank\">get the image ranked in image search<\/a>, aim for an image that is not panoramic or tall and skinny.<\/p>\n<h3 id=\"image-formats\">Using the Right Image Format for the Job<\/h3>\n<p>Are you using PNGs for everything? Be honest. The best way to optimize images in WordPress without a plugin is to use the right image format.<\/p>\n<p><a href=\"https:\/\/wpmudev.com\/blog\/best-image-formats-png-vs-jpg-svg-gif-webp\/\" target=\"_blank\">Each file type was designed for a specific use case and has its own strengths and weaknesses<\/a>.<\/p>\n<p>Additional image file capabilities (such as transparency), unnecessary detail and too many colors all add bloat to your images. Sometimes, these are necessary and other times they\u2019re not.<\/p>\n<p>The key is to use the appropriate image file with the right capabilities to suit your needs.<\/p>\n<p>We put together a downloadable PDF cheat sheet for you to be able to refer to! <a class=\"wpmud-download-pdf\" href=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/02\/Smush-Guide-to-Image-formates.pdf\" target=\"_blank\" rel=\"noopener\" data-pdf-label=\"smush guide to image formats pdf\">Click here to get your copy<\/a><\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><a rel=\"lightbox&#091;141002&#093;\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/02\/Smush-Guide-to-Image-formates.pdf\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/02\/free-download-cheat-sheet.png\" alt=\"Image file format infographic\" width=\"600\" height=\"792\" \/><\/a><figcaption class=\"wp-caption-text\">Use the Smush guide to file formats to find the best file type for your images.<\/figcaption><\/figure>\n<\/div>\n<h4 id=\"about-file-types\">WordPress Image Resize Compression<\/h4>\n<p>There are two kinds of image graphics types, vector images, and raster images.<\/p>\n<p><strong id=\"vector-images\">Vector images<\/strong> are mathematically generated geometric shapes that can be resized without a loss of quality.<\/p>\n<p><strong id=\"raster-images\">Raster images <\/strong>consist of tiny blocks called pixels arranged on a grid. Raster images only appear high quality at the size they were meant to be displayed at or smaller. Otherwise, the image will appear pixelated.<\/p>\n<h4>WordPress Image Compression<\/h4>\n<p>Another thing to keep in mind when choosing your image file type is the type of <a href=\"https:\/\/wpmudev.com\/blog\/best-image-formats-png-vs-jpg-svg-gif-webp\/#jpeg-compression\" target=\"_blank\">image compression<\/a> that each one uses as this will affect the quality of the image when it is decoded and appears on your site.<\/p>\n<p><strong id=\"lossy-compression\">Lossy Compression<\/strong> permanently removes image data when the image is compressed. Some detail is imperceivable to the human eye, so this doesn\u2019t always create a visible loss of quality.<\/p>\n<p>Generally, lossy compression between 75-100% will maintain the integrity and high quality of the image, yet at 75% the image is half as large. Most social networks compress their images between the 70-85% range when you upload them.<\/p>\n<p><strong id=\"lossless-compression\">Lossless compression<\/strong> preserves all the data so nothing is lost and the image can be reproduced exactly with no loss in quality. The downside is a much larger file size. <a href=\"https:\/\/wpmudev.com\/blog\/best-image-formats-png-vs-jpg-svg-gif-webp\/#jpeg-ideal-use-case\" target=\"_blank\">Here\u2019s a comparison<\/a>.<\/p>\n<h4 id=\"image-file-types\">Image File Types<\/h4>\n<p><strong id=\"jpeg-image\">JPEG<\/strong><\/p>\n<p><a href=\"https:\/\/wpmudev.com\/blog\/best-image-formats-png-vs-jpg-svg-gif-webp\/#jpeg-section\" target=\"_blank\">JPEG images<\/a> are best for large photographs.<\/p>\n<ul>\n<li>JPEGS are the standard file type produced by consumer cameras and mobile devices.<\/li>\n<li>JPEGS can contain millions of colors and uses lossy compression to produce a small file size.<\/li>\n<li>They\u2019re supported in all major browsers.<\/li>\n<li>JPEGs don\u2019t support transparency or animation.<\/li>\n<\/ul>\n<p><strong id=\"png-image\">PNG<\/strong><\/p>\n<p><a href=\"https:\/\/wpmudev.com\/blog\/best-image-formats-png-vs-jpg-svg-gif-webp\/#pngs\" target=\"_blank\">PNG images<\/a> are best when preserving detail (such as screenshot text) is critical.<\/p>\n<ul>\n<li>PNGs utilize lossless image compression, so they\u2019re larger than comparable JPEGs.<\/li>\n<li>There are 3 kinds of PNGs:\n<ul>\n<li>PNG-8 supports 256 indexed colors and is like the GIF of PNGs.<\/li>\n<li>PNG-24 supports 24-bit colors to create a palette of millions of colors so it\u2019s more like a JPEG.<\/li>\n<li>PNG-32 supports 24-bit colors plus an extra alpha channel for advanced transparency capabilities.<\/li>\n<\/ul>\n<\/li>\n<li>All three PNG types support transparency, but they do so in different ways. You can get a full explanation of the different types of PNGs and how they handle transparency <a href=\"https:\/\/wpmudev.com\/blog\/best-image-formats-png-vs-jpg-svg-gif-webp\/#pngs\" target=\"_blank\">in this post<\/a>.<\/li>\n<\/ul>\n<p><strong id=\"webp-image\">WebP<\/strong><\/p>\n<p>WebP is Google\u2019s open-source image format that combines the best of JPEG and PNG, but with much smaller file size. They\u2019re close to being widely supported.<\/p>\n<p>There are two types of WebP image files<\/p>\n<ul>\n<li>The first is known simply as WebP and uses lossy compression. It\u2019s like the WebP version of a JPEG.<\/li>\n<li>The second type is known as WebP Lossless and it is more like the PNG equivalent because it uses lossless compression.<\/li>\n<\/ul>\n<p>If you&#8217;re wondering how to create WebP files for WordPress, you can use a plugin to do this for you. In fact, the\u00a0<a href=\"https:\/\/wpmudev.com\/project\/wp-smush-pro\/?icn=best_image_format_for_web&amp;ici=text-link_Smush_Pro_CDN_converts_images_to_WebP\" target=\"_blank\">Smush Pro CDN converts images to WebP<\/a>. If someone visits your site on a browser that supports WebP, Smush will convert your images and serve up WebP images. If they\u2019re on a browser that doesn\u2019t support WebP, they\u2019ll get your everyday JPEG or PNG.<\/p>\n<p><strong id=\"svg-image\">SVG<\/strong><\/p>\n<p>SVG is an XML-based markup language that allows you to create two-dimensional shapes to create vector graphics. It\u2019s best suited for simple shapes such as logos, graphs, flags, icons, and geometric shapes.<\/p>\n<ul>\n<li>SVGs don\u2019t work well for photographs.<\/li>\n<li>They\u2019re compatible with all browsers.<\/li>\n<li>Since they\u2019re technically a markup language, WordPress doesn\u2019t allow SVGs by default to prevent malware injection. You should only allow trusted users who understand the risks of using SVGs the ability to use them on your site.<\/li>\n<\/ul>\n<p><strong id=\"gif-image\">GIF<\/strong><\/p>\n<p>GIFs are great for animating dumb memes and not much else.<\/p>\n<ul>\n<li>GIFs produce exceptionally large file sizes, especially if the image includes animations. For animations, MP4s or WebM files have a smaller file size.<\/li>\n<li>GIFs have a limited color palette of 256 colors and support transparency.<\/li>\n<li>They\u2019re compatible with all browsers.<\/li>\n<li>There\u2019s no consensus on how to pronounce them so who needs \u2018em.<\/li>\n<\/ul>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/02\/Infographic.png\" alt=\"diagram summarizing capabilities for JPEG, SVG, PNG, WebP and GIF.\" width=\"600\" height=\"561\" \/><figcaption class=\"wp-caption-text\">Here&#8217;s a quick functionality recap.<\/figcaption><\/figure>\n<\/div>\n<h3 id=\"image-titles\">Image Titles<\/h3>\n<p>Once you\u2019ve selected the right format in which to save your image, you need to change the default image title generated by your camera.<\/p>\n<p>Give your images succinct and descriptive titles. Use your keywords if they appropriately describe the image. If your keywords don\u2019t describe your image, don\u2019t use them in the image title. I\u2019ll show you a more appropriate place for them in the <a href=\"#seo-images\">SEO section of this post<\/a>.<\/p>\n<h3 id=\"bulk-image-editors\">Bulk Image Editors<\/h3>\n<p>Creating a batch of images for a new site or going back to fix all the issues with the images currently on your site can take a lot of time. Luckily, there are several tools that can help you <a href=\"https:\/\/wpmudev.com\/blog\/bulk-edit-images\/\" target=\"_blank\">process your image in bulk<\/a>.<\/p>\n<p><strong>Lightroom Classic <\/strong>was designed to manage non-destructive edits to your images. Use it to bulk scale, crop or rename the JPEG images from your camera.<\/p>\n<p><strong>Photoshop<\/strong> can help you bulk edit PNGs or JPEGs. Use the image processor or create custom Photoshop Actions to record a complex sequence of edits and then apply them to other images.<\/p>\n<h2 id=\"optimize-images\">Optimizing Your Images in WordPress<\/h2>\n<p>Preparing your images correctly can prevent a lot of problems before they begin. Once you\u2019ve got your images ready, then WordPress has some awesome features to help you manage your images and make them look their best.<\/p>\n<h3 id=\"default-image-sizes\">WordPress Default Image Sizes<\/h3>\n<p>Every time you upload an image into the WordPress media library, <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-image-sizes\/\" target=\"_blank\">WordPress creates the following additional image size by default<\/a>:<\/p>\n<ul>\n<li>Thumbnail<\/li>\n<li>Medium<\/li>\n<li>Medium Large<\/li>\n<li>Large<\/li>\n<\/ul>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/04\/WordPress-Image-Sizes-Settings.png\" alt=\"Screenshot of WordPress Media settings.\" width=\"600\" height=\"536\" \/><figcaption class=\"wp-caption-text\">The default WordPress image sizes, except for medium large which is hidden by default.<\/figcaption><\/figure>\n<\/div>\n<p>If your theme specifies additional image sizes for your archive page, the home page, etc. WordPress creates those as well. WordPress also preserves the original size you upload and names it\u00a0<em>Full<\/em>\u00a0as in full-size.<\/p>\n<p>To do less work manually resizing your images for the different containers on your site, you can adjust the defaults in the\u00a0Media &gt; Settings\u00a0section or add custom sizes so you\u2019ll have more options to choose from. Just avoid going overboard and creating images for every conceivable purpose or else you\u2019re going to burn through the disk space on your hosting server.<\/p>\n<p>When you make a change to the way that WordPress creates additional images, then it doesn\u2019t update the images that are already in your media library. To change the images you\u2019ve already uploaded, you\u2019ll have to use the popular\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/regenerate-thumbnails\/\" target=\"_blank\">Regenerate Thumbnails\u00a0plugin<\/a>.<\/p>\n<p>You\u2019ll need to regenerate thumbnails if you\u2019re doing any of the following:<\/p>\n<ul>\n<li>modifying the WordPress default image sizes<\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-image-sizes\/\" target=\"_blank\">adding custom image sizes<\/a> or<\/li>\n<li>switching over to a new theme that has different custom sizes.<\/li>\n<\/ul>\n<h3 id=\"responsive-images\">Responsive Images<\/h3>\n<p>One of the uses for all the varying image sizes is so WordPress can serve responsive images.<\/p>\n<p>Responsive image functionality was introduced in WordPress version 4.4 and is enabled by default. It works by using the <code>srcset<\/code>\u00a0attribute to give the browser a list of multiple images at various sizes to choose from.<\/p>\n<p>Instead of downloading and serving the largest image file every time, the browser loads the appropriate size file for the device. If the visitor is using a mobile device, they\u2019ll receive a smaller image in the\u00a0<code>srcset<\/code>. If they\u2019re visiting your site on a desktop Retina device, then they\u2019ll\u00a0receive the huge full-size Retina-ready file.<\/p>\n<p>WordPress writes the <code>srcset<\/code> code and adds images to the set automatically, but it\u2019s still a good idea that nothing in your theme or plugins is interfering with this process as a part of your image optimization audit.<\/p>\n<h3 id=\"retina-images\">Retina Images<\/h3>\n<p>Retina and other high definition screens have 4x as many pixels. To preserve the detail and sharpness of your images on high definition screens, you need to <a href=\"https:\/\/wpmudev.com\/blog\/make-images-retina-ready\/\" target=\"_blank\">create Retina images<\/a> with enough data to fill all those new pixels and then only serve them to Retina devices.<\/p>\n<h4>How to serve Retina images in WordPress<\/h4>\n<p><strong>Step 1: Produce images with double the pixel dimensions<\/strong><\/p>\n<p>To produce Retina images in WordPress with enough data for every pixel, you need to double the pixel dimensions for every image you upload.<\/p>\n<ul>\n<li>If you have a large hero image that is 1600px wide and 400px tall, you need to produce an image that is 3200px wide and 800px tall.<\/li>\n<li>If the width of your blog is 800px, then the images for your blog posts will have to have a width of 1600px and so forth.<\/li>\n<\/ul>\n<p>You only need to double the pixel dimensions for the\u00a0largest\u00a0possible size that your image will display at. You do NOT need to create images with double dimensions for every possible responsive size.<\/p>\n<p><strong>Step 2: Serve Retina Images to Retina devices<\/strong><\/p>\n<p><strong>Option 1:<\/strong> One of the better ways to serve Retina images is by using the\u00a0<code>srcset<\/code> attribute. You simply add Retina images to the source set that WordPress uses to generate responsive images.<\/p>\n<p><strong>Option 2:<\/strong> Install and Configure the free <a href=\"https:\/\/wordpress.org\/plugins\/wp-retina-2x\/\" target=\"_blank\">WordPress Retina 2x plugin<\/a>.<\/p>\n<p><strong>Step 3: Upload your Retina Images to WordPress and Use Them on Your Site<\/strong><\/p>\n<p>When you use the Retina image on your site, use the image variation that is half the width and height of the full size.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/03\/Use-retina-images-on-site.png\" alt=\"Screenshot of media library.\" width=\"600\" height=\"552\" \/><figcaption class=\"wp-caption-text\">The image has a width of 1200px, but I&#8217;ll need to use the version that is 600px in order to get Retina quality.<\/figcaption><\/figure>\n<\/div>\n<h3 id=\"next-gen-images\">Next-Gen WebP Files<\/h3>\n<p>Since next-generation images such as WebP are not widely supported, we can also use <code>srcset<\/code> to <a href=\"https:\/\/wpmudev.com\/blog\/serve-images-next-gen-formats-webp\/\" target=\"_blank\">serve WebP images for compatible browsers<\/a>.<\/p>\n<p>First, you\u2019ll need to use a WebP converter to convert existing images in your media library as well as future uploads. Then you need to determine if the visitor\u2019s browser supports WebP images.<\/p>\n<p>Finally, you can use <code>srcset<\/code> or a different method to serve WebP images if they are supported or a legacy file format like PNG or JPEG if they aren\u2019t.<\/p>\n<p>Smush Pro can convert the images that use the <img alt=\"Post image\" \/ aria-hidden=\"true\"> tag on your site to WebP and serve them to compatible browsers with her CDN. You&#8217;ll need to use a different method for CSS background images though. <a href=\"https:\/\/wpmudev.com\/project\/wp-smush-pro\/\" target=\"_blank\">Get a free trial<\/a> and see what a difference it makes for your site.<\/p>\n<p>Check out the video below for an example of how to use a WordPress image optimizer to serve next-gen images.<\/p>\n<p><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><span class=\"embed-youtube-lazy-id dev-hidden\">gjBv2YfTwCU<\/span><\/span><\/p>\n<h2 id=\"seo-images\">Image SEO<\/h2>\n<p><a href=\"https:\/\/wpmudev.com\/blog\/seo-images\/\" target=\"_blank\">Image SEO<\/a> has gained importance recently and there\u2019s a lot of opportunities to drive traffic with images. Unlike written content, where duplicate content is penalized, with images, the best-optimized image will \u201cwin\u201d in search results and be the best ranked.<\/p>\n<p>Properly identifying your images using the right HTML attributes can help your images be discovered in image search, not to mention improving web accessibility, which is very important.<\/p>\n<p>Here are the important images attributes you need to fill out for every image.<\/p>\n<h3 id=\"title\">Image Title<\/h3>\n<p>The image title in WordPress is different from the file name title. The file title you add when creating an image in Photoshop or other image editor is more important than the image title field in the WordPress media library. The former contributes to SEO, that latter can be left out entirely.<\/p>\n<h3 id=\"alt-text\">Alt Text<\/h3>\n<p>Alt text isn\u2019t just important for SEO, it\u2019s also important for accessibility.<\/p>\n<p>To write an effective alt tag for your image, you\u2019ll want to write a succinct description that communicates what the image contains or is trying to convey to someone who can\u2019t see the image, either because they\u2019re using a screen reader, or can\u2019t download the image. Additionally, the alternative text used in the\u00a0<code>Alt Text<\/code> attribute depends on the type of image being used in your content.<\/p>\n<p>Read our <a href=\"https:\/\/wpmudev.com\/blog\/image-alt-tags-wordpress\/\" target=\"_blank\" rel=\"noopener\">comprehensive guide to writing image alt tags in WordPress<\/a> to get the balance of SEO and accessibility just right.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/03\/WordPress-image-block.png\" alt=\"Screenshot where to add alt text in image block.\" width=\"600\" height=\"369\" \/><figcaption class=\"wp-caption-text\">Add your alt text here.<\/figcaption><\/figure>\n<\/div>\n<h3 id=\"image-caption\">Image Caption<\/h3>\n<p>Captions and the other text surrounding your image, give your image context. They also help Google understand what the image is about. Not all images need a caption, but captions function similarly to call outs in the body text. Because they\u2019re set apart from the rest of your text and highlighted,\u00a0they\u2019re four times as likely to be read.<\/p>\n<h3 id=\"other-elements\">Other Elements on the Page Near the Image<\/h3>\n<p>Google also takes the whole page into account when trying to understand your images. What is the page title? What is the URL? Even though these are not related to your image directly, Google uses them as a ranking factor. Include your keywords and related phrases in your page title, page URL and image URL if possible.<\/p>\n<h3 id=\"sitemaps\">Image Sitemaps<\/h3>\n<p>In order to make sure that Google indexes all your images, you need to create an image sitemap. Sitemaps are especially important if you update your content frequently, have an eCommerce site or if you have a new site and want Google to index your images as quickly as possible.<\/p>\n<p>If you want an easy solution, you can\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/smartcrawl-seo\/?icn=ultimate_guide_image_optimization&amp;amp;ici=text-link_use_smartcrawl_to_generate_a_sitemap\" target=\"_blank\">use SmartCrawl to generate a sitemap<\/a>.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/03\/Include-Images-in-Sitemap.png\" alt=\"Screenshot SmartCrawl advanced settings, activate include images.\" width=\"600\" height=\"318\" \/><figcaption class=\"wp-caption-text\">Flip the switch to include images in the sitemap SmartCrawl generates.<\/figcaption><\/figure>\n<\/div>\n<h3 id=\"social-media-tags\">Social Media Tags<\/h3>\n<p>Social media tags are a way for you to label your content, so when someone shares it on a social network, they share what you want them to share. Facebook, Twitter, LinkedIn, and Pinterest all support Open Graph, which is Facebook\u2019s social media tags language. Twitter has its own meta tags but will recognize Open Graph data if Twitter social media tags aren\u2019t available.<\/p>\n<p>The important Open Graph tag for your images is\u00a0<code>og:image<\/code> and\u00a0allows you to specify what image you want Facebook and other social networks to display when someone shares your post.<\/p>\n<h2 id=\"serve-images\">Serving Images<\/h2>\n<p>The last thing you need to pay attention to when optimizing images is how your images are delivered. There are several tools you can use in WordPress to improve image optimization and PageSpeed. Smush Pro has lazy loading and her own CDN. <a href=\"https:\/\/wordpress.org\/plugins\/hummingbird-performance\/?icn=ultimate_guide_image_optimization&amp;amp;ici=text-link_hummingbird_can_help_with_browser_caching\" target=\"_blank\">Hummingbird can help with browser caching<\/a>. Get a no-risk membership <a href=\"https:\/\/wpmudev.com\/\" target=\"_blank\">free trial<\/a>\u00a0and try the pro versions of both on your site.<\/p>\n<h3 id=\"lazy-loading\">Lazy Loading<\/h3>\n<p><a href=\"https:\/\/wpmudev.com\/blog\/lazy-load-wordpress\/\" target=\"_blank\">Lazy loading<\/a> is a technique for improving initial page speed and payload by deferring the loading of non-critical assets that are not currently in the browser viewport. To defer offscreen images in WordPress basically means to wait to load the images we can\u2019t see yet.<\/p>\n<h3 id=\"browser-caching\">Browser Caching<\/h3>\n<p><a href=\"https:\/\/wpmudev.com\/blog\/top-wordpress-caching-plugins\/\" target=\"_blank\">Caching<\/a> is a reliable way to improve site speed for your visitors by storing assets in a cache for faster retrieval. With HTTP caching, the browser stores a copy of assets (such as images) downloaded via\u00a0HTTP\u00a0by the user in its cache so it will be able to retrieve them without making an additional trip to the server. This dramatically improves performance for repeat visitors when done properly.<\/p>\n<h3 id=\"cdn\">Content Delivery Networks, CDN<\/h3>\n<p>Instead of only serving your images from your web server in a single location, &#8211; CDNs have locations all over the globe so the data transfer required to load your images happens much more quickly.<\/p>\n<p>One thing to keep in mind if you\u2019re using a CDN to serve your images is you\u2019ll want to avoid changing CDNs or activating a CDN and deactivating. This will change the image URLs and can negatively impact your image SEO.<\/p>\n<h2>Additional Resources<\/h2>\n<p>For more detailed tutorials on image optimization, check out our other posts on the topic:<\/p>\n<ul>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/compress-resize-images-wordpress\/\" target=\"_blank\">How to Properly Resize and Serve Scaled Images with WordPress<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/best-image-formats-png-vs-jpg-svg-gif-webp\/\" target=\"_blank\">Best Image Formats for Websites Compared! PNG, JPG, GIF, and WebP<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/serve-images-next-gen-formats-webp\/\" target=\"_blank\">How to Serve Images in Next-Gen Formats with WordPress<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/make-images-retina-ready\/\" target=\"_blank\">How to Make Retina-Ready Images That Don&#8217;t Slow Down WordPress<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-image-sizes\/\" target=\"_blank\">Default WordPress Image Sizes and How to add Custom Sizes<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/seo-images\/\" target=\"_blank\">The Complete Guide to SEO for Images<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/lazy-load-wordpress\/\" target=\"_blank\">How to Defer Offscreen Images in WordPress With Lazy Loading<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/6-lazy-load-plugins-to-make-your-wordpress-site-faster\/\" target=\"_blank\">6 Lazy Load Plugins to Make Your WordPress Site Faster<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/bulk-edit-images\/\" target=\"_blank\">Bulk Photo Editing for WordPress<\/a><\/li>\n<\/ul>\n<h2>That&#8217;s All There is to WordPress Image Optimization<\/h2>\n<p>There&#8217;s a lot to image optimization, so the smartest way to get started is to audit your site and see where your images stand. Focus on the most important things first, scaling images and adding alt text are two things that are time intensive, but can help you make a dramatic improvement.<\/p>\n<p>Other image optimization tactics such as enabling lazy loading, using browser caching, adding a CDN, creating an image sitemap, using next-gen images can be done in one fell swoop with a WordPress image optimizer like Smush Pro. So if you don&#8217;t have a lot of time or are managing a bunch of sites, using a WordPress automatic image compression plugin is good places to start.<\/p>\n<p>Lastly, using powerful bulk image editors such as Lightroom and Photoshop can help you with improving individual images much more quickly.<\/p>\n<p>If you&#8217;re serious about improving your image optimization game, look no further than WPMU DEV&#8217;s optimization trifecta: Hummingbird, SmartCrawl and the crazy popular Smush Pro. Smush Pro is the best WordPress image optimizer because it does it all.\u00a0You can try all three on your site with a <a href=\"https:\/\/wpmudev.com\/\" target=\"_blank\"> free trial<\/a>. If you&#8217;ve never taken image optimization seriously, you&#8217;re going to be pleasantly surprised by how much your site&#8217;s performance will improve.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mastering the art and science of image optimization is key to running a lean and efficient WordPress site. Our detailed guide covers everything you need to know to ensure your images are performing their best.<\/p>\n","protected":false},"author":774618,"featured_media":176418,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4,263],"tags":[11085,11084,10854,10973,16,10756,10981],"tutorials_categories":[],"class_list":["post-141002","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","category-tutorials","tag-image-formats","tag-optimize-images","tag-wp-smush-pro","tag-image-optimization","tag-images","tag-retina","tag-webp"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/141002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/774618"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=141002"}],"version-history":[{"count":60,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/141002\/revisions"}],"predecessor-version":[{"id":178319,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/141002\/revisions\/178319"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/176418"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=141002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=141002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=141002"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=141002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}