Sharpen Resized Images in WordPress

Sharpen Resized Images in WordPress

Online by JSC0d3
September 22, 2017 | | | 1324 recognitions

Are you finding issues in managing the image quality for your WordPress powered website/blog? If your answer is a “Yes” then this is a post just for you. Here, I’ve jotted down a list of few important pointers which allow you to reduce or even eliminate image blurring. I’m sure by the end of this post, you’ll be all geared up for handling image blurring in your WordPress posts and pages.

Reasons behind image blurring

Before proceeding ahead, let’s have a quick look at key reasons behind image blurring in WordPress

1. You, accidentally uploaded a blurry image
If you’ve chosen to upload an image via your camera, there are chances that the uploaded image might look blurry on your device’s LCD screen.

2. WordPress resized the uploaded image, just to make it look blurry
There are chances that WordPress might have deliberately resized an image via the WordPress Media Manager or Edit Media Page. This re-sized image might not look as sharp as the original one.

3. Your browser might have re-sized the image
As one of the most prominent consequences of responsive web design, your browser might resize all the large images to be viewed perfectly on all smaller screens.

How to improve blurry images in WordPress

Now, coming to the pointers that need to be considered for improving blurry images in WordPress posts and pages


1. Choose to re-size images as per your specific purpose
It’s not unknown that large images take time to load. Hence, it is recommended to resize the images in accordance to your sole purpose. You need to measure the content that is to be included into the WP posts and pages. Once you’re done with the same, opt for re-sizing images in a manner that they “fit” the content.

2. Check the image quality before uploading it to WordPress
If you’ve opted for uploading the image directly from your camera, then I recommend you examining the same on your desktop screen prior to uploading it to your WordPress posts/pages. There are situations when images may look sharp on camera’s LCD screen but inaccurate on the computer screen.

Here, you need to find appropriate answers to specific questions such as: Is there a similar image that can turn to be more suitable? Does the image include a blur simply because the photographer’s hand was probably shaking while clicking the picture? Etc.

Ensure that the image you’re planning to display on your WordPress site is sufficiently sharp. Also, make sure to be vigilant about the right use of colors for the images. Determine whether the colors included within an image truly represent the message that you’re trying to convey to the end users. You can use the “Auto Color” option available in Photoshop for auto-correction of color used in a particular image.

3. Try fixing the image blurriness using a powerful WordPress plugin
Specially applicable in case of images which have already been published and/or the ones which need to be published in spite of blurriness; a renowned WordPress plugin like WP Resized Image Quality plugin works as the right tool for minimizing the unwanted imperfections in images.

On installing this plugin in your WordPress site/blog, the compression level of all your JPEG images will be modified as to improve their quality by huge bounds and leaps. Additionally, there is the ImageMagick Sharpen Resized Images plugin which offers the open source ImageMagick image editing flexibility to your WordPress setup.

That means, you can use the tool for sharpening the edges of images that you’ve already uploaded to the WP site/blog. It is with the help of this WordPress plugin that you can correct-correct your images and improve the “not too blurry, but could be sharper” images that have already been published in specific posts and pages.

Realize the significance of applying the best practices

Now that you’re well familiar with the leading practices for getting rid of image blurriness; its time to follow the same strictly. Make it a point to think them as the most integral steps in your website image publishing process.

We have often witnessed that images become blurred after uploading them on wordpress either while writing a post, a page or uploading it directly into the media library in wordpress.

This tutorial will help your images get sharpened after uploading them into wordpress. We would insert a block of code that is a method which will automatically perform this function for us.

By default the images show up blurry and their detail is a bit rough as compared to the sharpened image where the details of the image is more prominent. So lets look how easy it is to force wordpress to sharpen the images that you upload.
First of all you need to open up your theme’s function.php file. You can find it after logging into the wordpress admin panel and then navigate to Appearance > Editor. Click to open functions.php file:
 function js_sharpen_resized_files( $resized_file ) {
    $image = wp_load_image( $resized_file );
    if ( !is_resource( $image ) )
        return new WP_Error( 'error_loading_image', $image, $file );
    $size = @getimagesize( $resized_file );
    if ( !$size )
        return new WP_Error('invalid_image', __('Could not read image size'), $file);
    list($orig_w, $orig_h, $orig_type) = $size;
    switch ( $orig_type ) {
        case IMAGETYPE_JPEG:
            $matrix = array(
                array(-1, -1, -1),
                array(-1, 16, -1),
                array(-1, -1, -1),
            $divisor = array_sum(array_map('array_sum', $matrix));
            $offset = 0;
            imageconvolution($image, $matrix, $divisor, $offset);
            imagejpeg($image, $resized_file,apply_filters( 'jpeg_quality', 90, 'edit_image' ));
        case IMAGETYPE_PNG:
            return $resized_file;
        case IMAGETYPE_GIF:
            return $resized_file;
    return $resized_file;
add_filter('image_make_intermediate_size', 'js_sharpen_resized_files',900);

Wrapping it all up

Go ahead with following all the strategies explained above and you could start with publishing beautiful and absolutely stunning images which aren’t blurry and look great on all types of screens.

JSC0d3's Logo
About JSC0d3

JSC0d3 is an entrepreneur, online marketer, and an employee of an IT company. When not building websites, creating content, or helping customers improve their online business, spend time with their wife and two beautiful children. Although he still feels new in WordPress, he enjoys sharing what he has learned with all of you! If you want to get in touch with him, you can do this through this website.

On the same idea

Posted by | February 9, 2019

How fast your website loads can have a direct effect on whether you turn visitors into new customers and fans When your site is delivered to...

Posted by | February 9, 2019

With today’s high-speed internet connections and advances in web development techniques, there is no reason that your website should be...

Posted by | February 9, 2019

WordPress' wp_link_pages() function, used for displaying page links in multi-page posts, lacks one big feature You can display a list of...

Previous PostBackNext Post

Leave here an impression