How to fix blurry images on WordPress?
Ever came across an auto-resized image or a blurry image while drafting your post on WordPress? Did it frustrate you? Are the images you insert into the post are resizing to a specific size? Does the image gets blurred out on the website after they are published?
Here is what you need to check.
Why do images get blurry?
The most common possible answer is that the uploaded image gets auto resized. This can happen either due to the device and browser or due to the user itself. You might wonder how are the high-resolution image is getting auto resized. So let’s assume that you have uploaded an image of size 1200×800. But when you open your post on different devices, on each device it appears slightly different.
This mainly happens because
- Some browsers auto resize the images to load faster.
- Each device has its own specific size. The images get resized to match the device’s resolution.
When the original image is of 1200×800, and it gets resized to let’s say 600×400. As the number of pixels reduces, the image loses its clarity and vice-versa.
Now let’s see how the user is responsible for the blurry images. The reasons can be
- You might have resized the original image and uploaded it to the media.
- You or the administrator have already set up some custom sizes in media settings.
For the first reason, the answer is again the same. The image got blurry as the number of pixels got altered.
For the second reason, you can solve this. It is very simple. All you need to do is change a few settings. If the custom sizes are set by the administrator, inform to change it to default. But sometimes it happens that you really don’t need to change these settings in every post and you need it in only one post. In such situations, you can follow the following few steps to resolve this.
- So as you can see here in the below screenshot, the image I’ve uploaded in the post is smaller and blurry. Just click on the image. This will allow you options to align the image and edit it.
- Select the Edit option.
- When you select the edit, it will display the image details. The display settings were set to a custom size 300×146. The original image size is quite larger than this. The number of pixels got altered and so the image got blurry. Now let’s change it.
- Change the image size to “full size” and click “Update”.
As you can see here that image is no more blurry.
You can see the same changes on the website too.
Hence, no more blurry images. Just make sure that whenever you set custom settings regarding the image sizes, you need to upload a clear original image of that size itself to avoid any further blurry images on your awesome website. Hope this helps.