GTmetrix scaled image alerts

How to Serve Scaled Images on Your WordPress Website

Did you indicate that you should only run a Web site through a performance test tool to “provide an enlarged image”? By default, the tool will tell you that you need to resize the image to match how it will be displayed on your site.

Fortunately, WordPress has some useful tools. You can use the image optimization plugin to automatically deliver a scaled image, or you can use several techniques to adjust the image yourself. This will go a long way in optimizing page load time and improving bounce rate.

This section explains why it's important to serve resized images correctly. Then we provide a convenient solution to make the process as easy as possible.

Why You Should Provide Extended Images

Expanded images are basically resized to the exact size you are using. On the one hand, too small and enlarged images are blurry. On the other hand, the browser shrinks images that are too large, but unnecessarily increases the file size of the page.

Also, large images will make the browser spend time and resources instead of loading the page itself as soon as possible. This can significantly slow page load times and negatively impact the performance of your website. For example, if your theme shows an image of 100 x 100 pixels, you want to load an image that is exactly 100 x 100 px. When you load an image that's 50 x 50 pixels in size, it looks blurry when resized to up to 100 pixels. On the other hand, if I load an image that is 200 x 200 pixels, the image looks good but still only displays at 100 pixels, so there is no need to increase the page size.

Of course, slow pages keep visitors away. Not only can you promote a user experience (UX) that your users don't like, but it can also boost your bounce rate when users get frustrated and click on your site.

Almost all performance testing tools provide scaled images:

WordPress helps provide scaled images Being 3 plugins

The good news is that the easiest way to correctly deliver scaled images is to use a plugin to help. The following options can help you optimize heavy images and clean up inflated pages. Let's see!

1. Optimole

The first product is Optimole. This handy plugin will optimize your image and provide it in the right size for various devices. This not only helps to provide the resized image, but also automatically resizes to the optimal size according to the user's device.

Has a minimal setup process, great for when you need maximum quality with minimal hassle. In addition to resizing and compressing images, Optimole also delivers images from the Global Content Delivery Network (CDN) provided by Amazon CloudFront to reduce load times around the world.

The free plan allows you to optimize and expand unlimited images for up to 5,000 visits per month. After that, the paid plan starts at $ 9 per month.

2. Smush

Another plugin that can be used to serve extended images is Smush. This is a highly rated and widely used choice for scanning each image, removing unnecessary data, and then setting the ideal size to optimize the image. When finished, each image is saved in the media library .

To resize your image, you can have it automatically resize your image to fit your site's requirements.

In addition, the plugin has the ability to & # 39; squeeze up to 50 images at a time and can be set to automatically optimize the image every time it is loaded. You can also set it to compress images in any directory, including directories stored in cloud services.

Because of this, the free version is a good place to start and you can optimize unlimited images, but individual images can't exceed 5MB. size.

3. ShortPixel

The final recommendation is ShortPixel. This plugin is the perfect choice for those looking for a high quality image compression and scaling solution that fits their budget. You can optimize up to 100 images for free per month. It's also simple and easy to use.

Especially with ShortPixel, WordPress images can be automatically resized when uploading to the size you specify.

ShortPixel also comes with lossless image compression for JPEG JPEG PNG GIF Image – PDF can also be optimized. Provides the option to automatically convert or manually process images (including WebP) when uploading.

The free version above allows you to optimize up to 100 images per month. In addition to that, the paid plans start at up to $ 4.99 per month, optimizing up to 5,000 images per month.

How to serve resized images in WordPress without using a plugin (3 ways)

There is a plugin, another way. For example, you can crop an image from the media library, adjust the image in managed media settings, or use an image editor such as open source GIMP or Photoshop.

However, before discussing how to provide a resized image without using it, the plugin should mention the basic functionality that comes with WordPress called srcset . This key feature allows the image to respond to different screen sizes. If you give the browser three options, it will use the one most optimized for that user. Of course this helps somewhat on page load time, but scaling the image can provide more performance.

If you talk about this, let's take a look at the first method, how to crop an image in WordPress.

1. Cropping an image in the media library

The first port to achieve this method is to head to the WordPress backend. Click on the image you want to resize in one of your posts or pages and select Edit Image :

 Start by selecting the & # 39; Edit Image & # 39; button in WordPress.

From there you need to go to the Media Library screen, select the image and click on the Edit Image link. The next screen has an option to resize the image.

 How to manually provide a resized image in the WordPress dashboard

Origin is displayed Size and There is a box where you can enter a new resized size. However, file names are often stored as additional strings, which can affect if you use certain image SEO strategies.

2. Settings> Media Resizing an Image on the Screen

You can also resize an image by directly adjusting the settings in WordPress. To do this, go to WordPress and then go to Settings> Media :

 WordPress Settings> Media Options. "width =" 1376 "height =" 470 "/> [19659044] WordPress Settings> Media Options" width = "1376" height = "470" /> </noscript><noscript><img class=

You can change the width and height of thumbnail, medium, and large image sizes here.

WordPress automatically uses this size to create a scaled version of each image. In the WordPress editor, you can choose the size to insert.

However, some settings can improve page load times with these settings, but not all images are fully optimized. situation. For this, you can consider the last manual method.

3. Use an image editor (like GIMP or Photoshop).

Of course, the last way to manually resize an image is to use the offline image editor. This is the most efficient method, but you can think of it as the most obvious. For example, go to the image in the toolbar in Photoshop and resize the image with : :

 to change the image size

A pop-up screen appears with the default dimensions of the image. Then you can resize the image as you want before uploading it to WordPress.

 How to serve scaled images in Photoshop

There are other options for width and height. For example, you can increase or decrease the resolution of the image as needed (72 PPI is usually a web standard).

Conclusion

Another way to optimize performance whether your website runs slowly or simply looks, it is essential to learn how to effectively deliver extended images. With complete specifications, you can quickly run the lights on your site.

This article explained how to manually resize an image and provided three useful plugins. In summary:

  1. Optimole : This plugin provides a set and forgotten method for serving resized images.
  2. Smush : A popular and highly evaluated solution for image optimization.
  3. ShortPixel : This plugin works best for users who prefer a lightweight option.

What does it mean to provide a reduced image or to provide a scaled image? Ask in the comments section below!

Free Guide

5 Essential Tips
WordPress Site

Reduce Loading Time 50-80% with Simple Tips

Check Also

Download Free Appside v1.0.1 – Responsive App Landing WordPress Theme - Download Free Themes

Download Free Appside v1.0.1 – Responsive App Landing WordPress Theme – Download Free Themes

Download free Appside WordPress theme v1.0.1 Appside v1.0.1 is the perfect app Landing and showcase …

Download Free Suga v1.1 – Responsive Magazine & Blog WordPress Theme - Download Free Themes

Download Free Suga v1.1 – Responsive Magazine & Blog WordPress Theme – Download Free Themes

Download free Suga WordPress theme v1.1 Suga v1.1 is an indispensable news & magazine WordPress …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.