{"id":25746,"date":"2019-10-17T12:19:52","date_gmt":"2019-10-17T09:19:52","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=25746"},"modified":"2023-10-27T20:13:24","modified_gmt":"2023-10-27T17:13:24","slug":"serve-scaled-images-wordpress","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/serve-scaled-images-wordpress\/","title":{"rendered":"How to Serve Scaled Images on Your WordPress Website"},"content":{"rendered":"\n

Have you run your website through a performance testing tool only to be told you need to “serve scaled images”? Basically, the tool is telling you that you need to resize your images’ dimensions to match how they’re being displayed on your site.<\/p>\n\n\n\n\n\n\n\n

Fortunately, WordPress has some great tools to help you out. You can use an image optimization plugin to automatically serve scaled images – or scale images yourself using a number of different techniques. Doing this will go a long way towards optimizing your page loading times and improving your bounce rates.<\/p>\n\n\n\n

In this piece, \ud83e\udde9 we\u2019ll first explain why it’s so important to serve scaled images<\/a> properly.<\/p>\n\n\n\n

\n
\n

Then, we\u2019ll share three plugins you can use to get the job done<\/a>. But, like a late-night infomercial – that’s not all!<\/em> We’ll also give you three additional non-plugin methods<\/a> that will let you serve scaled images like a pro.<\/p>\n\n\n\n

Let\u2019s get to it!<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tIs a #speedtest telling you to serve scaled #images on your site? \ud83d\uddbc\ufe0f The solution is here \ud83d\udca1<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Here’s why you need to serve scaled images<\/h2>\n\n\n\n

A scaled image is essentially one that has been sized to fit the exact dimensions you\u2019re using it for. On one hand, an image that’s too small and scaled up will be blurry. On the other hand, while a browser will shrink an image that is too large, it adds to the page’s file size unnecessarily.<\/p>\n\n\n\n

Furthermore, large images cause the browser to spend time and resources to load them instead of loading the page itself as fast as possible. This can significantly slow your page loading times and negatively affect the performance of your website.<\/p>\n\n\n\n

For example, if your theme displays an image at 100 x 100 px, then you’d want to load an image that is exactly 100 x 100 px. If you load an image that’s 50 x 50 px, it will look blurry when it’s scaled up to 100 px. On the other hand, if you load an image that’s 200 x 200 px, it will look great, but you’re unnecessary increasing the size of your page because it’s still only displaying at 100 px.<\/p>\n\n\n\n

Of course, slower pages can drive visitors away<\/a>. Not only can they promote a less-than-favorable user experience (UX)<\/a>, but they can also increase your bounce rate<\/a> as users become frustrated and click away from your site.<\/p>\n\n\n\n

\ud83d\udc49 That’s why almost every performance testing tool<\/a> highlights the need to serve scaled images:<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n
<\/div>\n\n\n\n

Three plugins to help you serve scaled images in WordPress<\/h2>\n\n\n\n

The great news is that one of the easiest ways to properly serve scaled images is to use a plugin to help you. The following options make it simple to optimize your heavy images<\/a> and clean up your bloated pages. Let’s take a look!<\/p>\n\n\n\n