{"id":1533749,"date":"2019-10-02T17:11:10","date_gmt":"2019-10-02T15:11:10","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=1533749"},"modified":"2024-03-07T12:35:49","modified_gmt":"2024-03-07T11:35:49","slug":"image-optimization-wordpress","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/image-optimization-wordpress\/","title":{"rendered":"How to Optimize Images for WordPress and Improve Your PageSpeed Score"},"content":{"rendered":"

Last update: July 2021<\/em><\/p>

Images are a crucial element of every website: they make posts and pages more interesting and appealing to read, but they can quickly become a burden for your performance and PageSpeed score. Google is always wary and ready to judge your moves when it comes to web performance, and you don\u2019t want to disappoint it, right?<\/p>

That\u2019s why we\u2019re here to provide you with all the insights about image optimization for WordPress!<\/p>

You\u2019re going to learn everything about how to resize and compress your images, maintain their quality, and how to choose the best online image optimizers. We\u2019ll dig even deeper recommending a very useful WordPress image optimization plugin, Imagify. Last but not least, you\u2019ll learn how to improve your site\u2019s performance even more through lazy loading.<\/p>

Ready to start the ball rolling? Let\u2019s go!<\/p>

Large Images Are One of the Biggest Drains on Load Time<\/h2>

Images are typically one of the biggest (and overlooked) performance issues. Even with caching and a CDN, an unoptimized image will still drag down your page loading time and affect the Largest Contentful Paint score<\/a>, one of the Core Web Vitals metrics. <\/p>

But, as the website owner, images are completely under your control. So, if you can get a handle on how to work with and optimize images, you can improve the speed of your site and optimize the Core Web Vitals\u2019 performance<\/a>.<\/p>

Based on our experience with WP Rocket customers, we know that one of the most common problems is related to heavy pages, which sometimes come packed with high-resolution pictures, photo widgets, and hefty image sliders.<\/p>

To give you an idea: images contribute, on average, about 30% of the total page load time<\/strong>. Often this is the single largest factor of the loading time. In extreme cases, it could be closer to 60% of the loading time.<\/p>

Here\u2019s an example of what un-optimized images will do to your site:<\/p>

\"Pingdom
Example of un-optimized images<\/figcaption><\/figure><\/div>

The load time is 12 seconds, and the size of the page is 8MB. Of those 8MB, images account for 6.7MB. This is out of control! <\/p>

The number of HTTP requests<\/a> is commonly cited as a factor in load time, and while it is important, ultimately, it\u2019s the page size that is the real indicator of speed or slowness<\/strong>. You can have a small number of HTTP requests, but you will have a problem with your hands if those requests summon giant images.<\/p>

\ud83d\ude80 Reducing page size by reducing image size is a simple and effective strategy for improving load time. And it can be a real game-changer for your WordPress site performance.<\/td><\/tr><\/tbody><\/table><\/figure>

File Size Matters: Why You Should Resize and Compress Images<\/h2>

Understanding image dimensions and file sizes<\/h3>

The dimensions of the image, i.e., how much space on the screen an image takes up, are measured in pixels, and while they do not 100% dictate file size, they are related. The larger the dimensions of your image, the larger the file size.<\/p>

The file size is measured in kilobytes (KB) and megabytes (MB)<\/p>

1MB = 1000KB<\/p>

To give you a point of reference, the main content column of this blog is 796 pixels wide.<\/p>

If you take a photo with your smartphone, depending on your settings, that photo could be in the region of 2500 pixels wide (or even more) with a file size of 3MB (or 3000KB). If I were to take a photo with my phone and upload it to this blog without any editing, I\u2019m going to be uploading a file that is about 3 times as big as it needs to be \u2013 a total waste of resources and a drag on page load.<\/p>

So while snapping phone pics and uploading to your blog might be simple, it creates a real problem if you want a fast site by adding tons of unnecessary weight.<\/p>

Before you upload that photo, you need to do two things: resize it<\/strong> and compress it<\/strong>. Here\u2019s how.<\/p>

How to Resize Images Online<\/h2>

So the first thing you need to do is resize your images<\/strong><\/a> to the correct size for your site. For blog images, figure out how wide your blog\u2019s content area is, and never upload an image wider than that. If it\u2019s going to be used in a slider, make sure you first determine the slider\u2019s dimensions.<\/p>

How Do You Know How Wide Your Content Area Is?<\/h3>

If you know how to use the developer tools built into Chrome or Firefox, you can use that. But if that sounds scary, there are simpler tools available.<\/p>

If you\u2019re on a Mac, there is a screen capture tool, Grab, already built-in, and when you outline an area on the screen, it will tell you the pixels.<\/p>

Or you can install the easy Page Ruler add-on for Chrome.<\/strong><\/a><\/p>

Once you\u2019ve figured out what dimensions your images should be, you can use any of the below tools to resize your images accordingly:<\/p>

Resizing Applications and Tools<\/h3>