Uploaded images lose quality or look pixelly

Troubleshooting  Last Updated: Time to Read: 1 minute

WordPress reduces image quality on upload when processing, and creates three copies of your image using the dimensions and rules you set under SettingsMedia.

Layers templates and widgets are designed to use a specific copy of your uploaded image that is scaled or cropped (or both) for the best fit and most efficient load time. If the layout the image appears in is not jiving with the image version used, the copy may look stretched, far reduced in quality, cropped or too small for the space. For example, if your “medium” image size in WordPress is set to 300×400 with crop, and you have a layout with the Content Widget set to four columns, landscape aspect ratio but a full-width layout, the images may not be big enough.

To resolve most sizing issues, ensure your Media settings are as follows:

  • Thumbnail: 300 x 300 and uncheck “Crop thumbnail to exact dimensions (normally thumbnails are proportional)”
  • Medium: 600 x 9999
  • Large: 1024 x 9999

This allows you to set a limit on the max width of the images, but allow for either landscape or portrait images in height so they are not cropped. The template or widget can now take care of cropping or ratios.

If you want to prevent WordPress from compressing files or increase how much it compresses files, you can make a change to functions.php in a child theme, or install a plugin to manage the compression level such as WP Smush.it (recommended if you do not have WordPress development experience)

If you have a child theme and want to build the change in permanently, the following code can be added to the child theme functions.php file:

The 80 noted above is the percentage of compression. You can turn this up to 100 if you wish, but then it is doubly important your images are optimized for the web prior to upload to avoid slow load times.

Note that this change will not affect images you have already uploaded. To regenerate all images using the new rules, you will need to download and run the Regenerate Thumbnails plugin.