How to shrink images on your WordPress site - You ran the website through a performance testing tool just to know that you need to change the scaled images. It basically tells you how to resize images to fit the way they are displayed on your website.
Luckily, WordPress has great tools to help you. You use image optimization plugin to automatically have images scaled or scale images by a number of different techniques. This will optimize page load time and reduce bounce rate.
We will explain why image reduction is so important. After that, there will be helpful solutions to make the process as easy as possible.
This is why you need to serve thumbnail images
A scaled image is basically sized to fit the exact size you use. On the one hand, an image that is too small and zoomed out will be blurred. On the other hand, images that are too large will add the file size of the page when not needed.
Moreover, large images make the browser spend a lot of time and resources downloading them. This slows down page load time and negatively affects performance.
For example, if your theme displays images at 100 x 100 px, then you want to load an image that is exactly 100 x 100 px. If you upload a 50 x 50 px image, it will look blurry when it is scaled up to 100 px. On the other hand, if the image is 200 x 200 px, it will look great, but you don't need to increase your page size as it will still only display at 100 px.
Of course, slow pages will annoy visitors. Not only does it make the experience (UX) less favorable, but it also increases bounce rates when users become frustrated and leave your site.
That's why every performance testing tool highlights the need to scale images.
Three plugins to help you shrink images in WordPress
The great news is that one of the easiest ways to optimize scaled images is to use a plugin to help you. The following options simplify to optimize heavy images and clean up your bulky pages.
- Optimole
The first plugin is Optimole. This handy plugin optimizes images and leaves them in the perfect size for different devices. So it not only helps you serve scaled images, but also automatically scales them to the optimal size based on the device.
It has a minimal setup process, if you need maximum quality.
In addition to shrinking and compressing Optimole images, they also serve them from CDNs provided by Amazon CloudFront, which helps increase download times around the world.
With the free plan, you will optimize and scale the image unlimited for up to ~ 5,000 monthly visits. After that, paid plans start at just $ 9 per month.
- Smush
Another plugin you use for serving scaled images is Smush. This is a highly recommended and popular option that optimizes images by scanning them one by one, removes unnecessary data, then sets the ideal size. When finished, each image will be saved in your Media Library.
To scale images, let it automatically resize images on certain sizes to fit the website's requirements.
Additionally, the plugin has the ability to 'blur' up to 50 images at a time, and you set it to automatically optimize each image when loaded. Moreover, you will set it up to compress images in any folder, including images stored on cloud services.
For this reason, the free version is a great place and will optimize unlimited images, although single images cannot exceed 5 MB.
See more : Build a Website with WordPress
- ShortPixel
The final proposal is ShortPixel. This plugin is a solution to compress and shrink quality images according to budget. It can optimize up to 100 images per month for free and it is very simple and easy to use.
Specifically, ShortPixel automatically scales WordPress images when uploading them to the sizes you specify.
ShortPixel also comes with lossless and lossy image compression for JPEG, PNG, and GIF - you also optimize PDFs. It gives you the option to automatically convert images (including WebP) when you upload them or handle them manually.
As mentioned above, the free version lets you optimize up to 100 images per month. In addition, paid plans start at $ 4.99 per month to optimize up to 5,000 images per month.
How to shrink images in WordPress without using plugins (3 methods)
If you want to shrink images without a plugin, there are other ways. For example, you crop images in your media library, adjust them in administrative media settings, or use an editor like GIMP or open source Photoshop.
Using the plugin, we should mention a native feature that comes with WordPress called srcset. This core feature makes your images react to different screen sizes. It works by giving the browser three different options, then selecting the one that is most optimized. Of course, this helps somewhat with page load time, but scaling the image will yield even higher performance.
Speaking of which, let's see the first way - cropping images in WordPress.
- Crop images in your media library
To achieve this method is directed to your WordPress back end. In one of your posts or pages, start by clicking on the image you want to scale and select Edit image:
From there, you'll need to go to the Media Library screen, select your image, and click the Edit image link. On the next screen are the image scaling options:
You will be presented with the original dimensions for the image and a box to enter your new scale sizes. However, note that filenames are often saved with an additional string of characters, which will affect you if you are having a specific image SEO strategy.
- Adjust the image size in the Settings> Media screen
You also scale your images by adjusting the settings in WordPress directly. To do this, navigate to WordPress, then visit Settings> Media:
It will take you to the Media installation page. Here, you will set the maximum size to use when uploading images to WordPress, giving the three options that it will display to the browser (as we discussed above regarding srcset):
Here you can change the width and height for thumbnails, medium sizes and large image sizes.
WordPress will create scaled-down versions of each image using these dimensions. You choose the size you want to insert from the WordPress editor.
However, sometimes you can improve page load time with these settings, but they will not optimize images in all cases.
- Use an image editor (like GIMP or Photoshop)
Of course, our last method to replicate your images manually is the offline image editor. You think this method is the most obvious, although it is arguably the most effective option available. For example, in Photoshop, you can go to Image on the toolbar and choose Size:
A pop-up screen will appear with your basic size. You will then scale the image the way you want it before uploading it to WordPress.
Apart from width and height, you also have some other options here. The resolution of the image is set higher or lower according to your needs (72 PPI is usually the standard for web).
See more : Create Web
Conclusion
Whether the website is running slowly or you are simply looking for another way to optimize performance, learning how to shrink images is a way you need to know. With the perfect specifications, the site has very fast loading speed.
We discussed how to scale images manually and three useful plugins to do that. In summary, they are:
Optimole: This plugin has a setting method to optimize and shrink images.
Smush: A popular and appreciated solution for image optimization.
ShortPixel: For those who prefer a lightweight option, this plugin is the perfect choice.
Post a Comment
Post a Comment