Title: Image optimization Published: 27 May 2024 Last modified: 17 July 2024 --- [Home](https://learn.wordpress.org)[Courses](https://learn.wordpress.org/courses/) [Intermediate WordPress User](https://learn.wordpress.org/course/intermediate-wordpress-user/) Image optimization [ Exit Course ](https://learn.wordpress.org/course/intermediate-wordpress-user/) 1. a. [ User management ](https://learn.wordpress.org/lesson/user-management/) [Preview](https://learn.wordpress.org/lesson/user-management/) 2. 1 lesson 3. a. [ Migrating your site Part 1: Changing to a new host and domain ](https://learn.wordpress.org/lesson/migrating-your-site-part-1-changing-to-a-new-host-and-domain/) [Preview](https://learn.wordpress.org/lesson/migrating-your-site-part-1-changing-to-a-new-host-and-domain/) b. [ Migrating your site Part 2: Changing your host but keeping your domain ](https://learn.wordpress.org/lesson/migrating-your-site-part-2-changing-your-host-but-keeping-your-domain/) [Preview](https://learn.wordpress.org/lesson/migrating-your-site-part-2-changing-your-host-but-keeping-your-domain/) 4. 2 lessons, 2 quizzes 5. a. [ Differentiating between homepage display settings and various templates ](https://learn.wordpress.org/lesson/differentiating-between-homepage-display-settings-and-various-templates/) [Preview](https://learn.wordpress.org/lesson/differentiating-between-homepage-display-settings-and-various-templates/) b. [ Personalizing your 404 template ](https://learn.wordpress.org/lesson/personalizing-your-404-template/) [Preview](https://learn.wordpress.org/lesson/personalizing-your-404-template/) c. [ Customizing the search results template ](https://learn.wordpress.org/lesson/customizing-the-search-results-template/) [Preview](https://learn.wordpress.org/lesson/customizing-the-search-results-template/) d. [ Customizing your single posts template ](https://learn.wordpress.org/lesson/customizing-your-single-posts-template/) [Preview](https://learn.wordpress.org/lesson/customizing-your-single-posts-template/) e. [ Creating a custom template ](https://learn.wordpress.org/lesson/creating-a-custom-template/) [Preview](https://learn.wordpress.org/lesson/creating-a-custom-template/) f. [ Adding and customizing a category template ](https://learn.wordpress.org/lesson/adding-and-customizing-category-template/) [Preview](https://learn.wordpress.org/lesson/adding-and-customizing-category-template/) g. [ Styling your site with Global Styles ](https://learn.wordpress.org/lesson/styling-your-site-with-global-styles/) [Preview](https://learn.wordpress.org/lesson/styling-your-site-with-global-styles/) h. [ Using the Style Book ](https://learn.wordpress.org/lesson/using-the-style-book/) [Preview](https://learn.wordpress.org/lesson/using-the-style-book/) 6. 8 lessons, 4 quizzes 7. a. [ Taking advantage of query loops ](https://learn.wordpress.org/lesson/taking-advantage-of-query-loops-2/) [Preview](https://learn.wordpress.org/lesson/taking-advantage-of-query-loops-2/) b. [ Using the Comments block ](https://learn.wordpress.org/lesson/using-the-comments-block/) [Preview](https://learn.wordpress.org/lesson/using-the-comments-block/) c. [ Designing with the Columns block ](https://learn.wordpress.org/lesson/designing-with-the-columns-block/) [Preview](https://learn.wordpress.org/lesson/designing-with-the-columns-block/) d. [ Using the Group block ](https://learn.wordpress.org/lesson/using-the-group-block/) [Preview](https://learn.wordpress.org/lesson/using-the-group-block/) e. [ Designing with Row and Stack blocks ](https://learn.wordpress.org/lesson/designing-with-row-and-stack-blocks/) [Preview](https://learn.wordpress.org/lesson/designing-with-row-and-stack-blocks/) f. [ Uncovering the Cover block ](https://learn.wordpress.org/lesson/uncovering-the-cover-block/) [Preview](https://learn.wordpress.org/lesson/uncovering-the-cover-block/) g. [ Advanced WordPress block layouts ](https://learn.wordpress.org/lesson/advanced-wordpress-block-layouts/) [Preview](https://learn.wordpress.org/lesson/advanced-wordpress-block-layouts/) h. [ Building a page with only patterns ](https://learn.wordpress.org/lesson/building-a-page-with-only-patterns/) [Preview](https://learn.wordpress.org/lesson/building-a-page-with-only-patterns/) i. [ Creating your own custom synced and non-synced patterns ](https://learn.wordpress.org/lesson/creating-your-own-custom-synced-and-non-synced-patterns/) [Preview](https://learn.wordpress.org/lesson/creating-your-own-custom-synced-and-non-synced-patterns/) j. [ Organizing your Media Library ](https://learn.wordpress.org/lesson/organizing-your-media-library/) [Preview](https://learn.wordpress.org/lesson/organizing-your-media-library/) 8. 10 lessons, 4 quizzes 9. a. [ SEO strategies ](https://learn.wordpress.org/lesson/seo-strategies/) [Preview](https://learn.wordpress.org/lesson/seo-strategies/) b. [ What is accessibility, and why is it important? ](https://learn.wordpress.org/lesson/what-is-accessiblity-and-why-is-it-important/) [Preview](https://learn.wordpress.org/lesson/what-is-accessiblity-and-why-is-it-important/) c. [ Testing your content for accessibility ](https://learn.wordpress.org/lesson/testing-your-content-for-accessibility/) [Preview](https://learn.wordpress.org/lesson/testing-your-content-for-accessibility/) 10. 3 lessons, 2 quizzes 11. a. [ Tools: Export and Import ](https://learn.wordpress.org/lesson/tools-export-and-import/) [Preview](https://learn.wordpress.org/lesson/tools-export-and-import/) b. [ Tools: Site Health ](https://learn.wordpress.org/lesson/tools-site-health/) [Preview](https://learn.wordpress.org/lesson/tools-site-health/) 12. 2 lessons, 1 quiz 13. a. [ Managing Settings: General ](https://learn.wordpress.org/lesson/managing-settings-general-2/) [Preview](https://learn.wordpress.org/lesson/managing-settings-general-2/) b. [ Managing Settings: Writing ](https://learn.wordpress.org/lesson/managing-settings-writing-2/) [Preview](https://learn.wordpress.org/lesson/managing-settings-writing-2/) c. [ Managing Settings: Reading ](https://learn.wordpress.org/lesson/managing-settings-reading-2/) [Preview](https://learn.wordpress.org/lesson/managing-settings-reading-2/) d. [ Managing Settings: Discussion ](https://learn.wordpress.org/lesson/managin-settings-discussion/) [Preview](https://learn.wordpress.org/lesson/managin-settings-discussion/) e. [ Managing Settings: Media ](https://learn.wordpress.org/lesson/managing-settings-media/) [Preview](https://learn.wordpress.org/lesson/managing-settings-media/) f. [ Managing Settings: Permalinks ](https://learn.wordpress.org/lesson/managing-settings-permalinks/) [Preview](https://learn.wordpress.org/lesson/managing-settings-permalinks/) g. [ Managing Settings: Privacy Policy ](https://learn.wordpress.org/lesson/managing-settings-privacy-policy/) [Preview](https://learn.wordpress.org/lesson/managing-settings-privacy-policy/) 14. 7 lessons, 2 quizzes 15. a. [ Website optimization ](https://learn.wordpress.org/lesson/website-optimization/) [Preview](https://learn.wordpress.org/lesson/website-optimization/) b. [ Image optimization ](https://learn.wordpress.org/lesson/image-optimization/) [Preview](https://learn.wordpress.org/lesson/image-optimization/) 16. 2 lessons, 2 quizzes 17. a. [ Domain management: Understanding DNS records ](https://learn.wordpress.org/lesson/domain-management-understanding-dns-records/) [Preview](https://learn.wordpress.org/lesson/domain-management-understanding-dns-records/) 18. 1 lesson, 1 quiz 19. a. [ Essential security plugin features and settings ](https://learn.wordpress.org/lesson/essential-security-plugin-features-and-settings/) [Preview](https://learn.wordpress.org/lesson/essential-security-plugin-features-and-settings/) 20. 1 lesson ### Optimization # Image optimization ## Transcript ### Introduction This lesson is all about image optimization. But you might be asking what image optimization is all about. Image optimization maintains the balance of image quality while reducing file size. It is the process of delivering high-quality images in the ideal format, size, and resolution to increase user engagement. It also involves accurately labeling images so search engines can read and understand the page content. ### Advantages Before proceeding, let’s briefly discuss the advantages of image optimization. Image optimization will help you improve page loading speed, user experience, and SEO, and it doesn’t require any development skills. Image optimization clearly has a domino effect. If your images load quickly, they will increase user engagement and then lead to improved search engine rankings. ### File name and alt text So how do we optimize images? Firstly, we need to change the file name of an image before uploading and then add alternative text. Secondly, make sure you choose the correct image type. Then, we can scale or crop an image and compress the image file. So make sure you change the file name of an image before uploading it to your media library. Remember to add the alt text. When you add an image to your media library, you can open it up, and at the top-right, it says Alternative text. The alt tag is simply a brief text description of an image, but it explains the content of images to website users when a graphic can’t be loaded. It also allows search engines to crawl better and rank your website and helps visually impaired users understand the content of a page. It is also important to note image SEO starts with the file name. You want a search engine to know the image without looking at it. So use a focused key phrase. ### Image format WordPress lets you upload images in several formats. Images are usually saved as JPEG, PNG, WebP or AVIF. JPEG is typically used for photographs and images of people and objects. PNG is suitable for graphics, illustrations, and images with transparency, while WebP and AVIF are excellent choices for optimizing website performance, especially for non-vectorized assets like photos and animations due to their superior compression capabilities. I would also recommend avoiding GIFs as they present accessibility challenges. ### Plugin Lastly, we are going to look at three methods to optimize images. Firstly, you can use a WordPress plugin, or you may decide to use a web-based tool or an image editor. Let’s start with plugins. To add a plugin, let’s make our way to Plugins, click on Add New, and then type “Image optimization” in the search block. Now you will notice there are many different plugins to choose from. Some plugins worth exploring are Modern Image Formats, Image Optimization by Optimal, Smush, or Imagify. Please note that depending on the plugin, some features might only be supported by the Pro version. You might want to consider using modern image formats for new image uploads on your site. This plugin has been created and is managed by the WordPress performance team. It converts images to more modern formats such as WebP or AVIF during upload. I will install and activate the EWWW Image Optimizer plugin in this example. Once activated, we can go to Settings and see an option that says “Optimize Local Images”. And if you scroll down, you will see more options with the premium package. But if we make our way to media, we can click Bulk Optimize and scan for unoptimized images. We can see we have 184 images to optimize, and more options are on the right. ### Web-based tools Next, let’s explore some web-based tools where you can optimize the image before uploading it to your WordPress site. Some options worth considering are tinypng. com, tinyimg.com, kraken.io and squoosh.app. Let’s see how Squoosh works. It’s open source and supports all image formats. Once you add an image from your computer, you can edit or compress it. Firstly, I will click on Resize and then change the height of the image. You will notice the width automatically updates. Next, I will go to Compress and save the image as a WebP file. In the bottom right, we can see that this file size has been reduced by 97%. ### Image editors Finally, you also have the option to use image editors such as Pixlr, Photopea, Gimp, or Canva. ### Optimal size You might be asking what is an optimal size for use in WordPress? Well, it depends on how you will use that image. 1200 by 628 pixels is a good size for header images. For other images, an optimal size is at least 640 by 480 and around 1024 by 768 pixels. ### Conclusion I trust this information has been helpful and that you will find the right method that works for you. This is a preview lesson Register or sign in to take this lesson. [ Take course ](https://learn.wordpress.org/course/intermediate-wordpress-user/) [ Sign in ](https://login.wordpress.org/?redirect_to=https%3A%2F%2Flearn.wordpress.org%2Flesson%2Fimage-optimization%2F&locale=en_US) ## Suggestions Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/).