Picture quality issues when using ShortPixel

If you’re unhappy with how the images look on your website after you optimized them with ShortPixel, don’t despair! Most of the time, a fix can be quickly found.

1. Over-compression
   1. Your images are served through a third-party service that also does image compression. These services do their own compression on the already compressed images and this can turn out to be too aggressive so the solution is to simply disable the image compression service of the other component. For example:
      • To disable JetPack’s Site Accelerator, go to JetPack > Settings > Performance and disable the “Enable site accelerator” option.
      • To disable SiteGround Optimizer image optimization, go to SG Optimizer > Media > Image Compression and disable it. Note that you will probably need to restore your images from there.
   2. If your images were previously compressed, either locally or with a different image optimization plugin, then we recommend you use the Glossy or Lossless method instead of Lossy. If you used ShortPixel in the first place, then:
      1. Restore all the images.
      2. Select Lossless or Glossy compression method in your ShortPixel plugin settings (Settings > ShortPixel). Make sure you save the settings after you make the change.
      3. Bulk process your images (Media > Bulk ShortPixel) to optimize the images with the new compression type.
   3. Most thumbnail regeneration plugins corrupt and/or delete our logs from the WordPress database. In some cases, this could trigger a re-compression of the images. Use the reGenerate Thumbnails Advanced plugin instead, which is compatible with ShortPixel Image Optimizer plugin.
      
2. Artistic pictures that need a softer image optimization method
   We recommend that you test all the optimization methods before bulk processing your images. Picture quality is subjective, and even if Lossy is the preferred method for most cases, we set the Glossy compression algorithms for situations when quality is paramount. 
   
3. Images served via mobile networks
   If you notice that your images look better on desktop than on mobile devices, then it is possible that your ISP severely optimizes the resources for faster delivery. Some mobile providers use a transparent proxy to help reduce the traffic and they indiscriminately compress all the thumbnails. That being said, the resulting thumbnails will look bad, but only while viewed on a mobile connection.
   
4. Using SPIO and SPAI simultaneously (or our image CDN from Autoptimize)
   If you have both ShortPixel Image Optimizer and ShortPixel Adaptive Images active on your WordPress site, we recommend setting the latter to Lossless/Glossy: I already used SPIO for image optimization, what settings should I use with SPAI?
   
5. PNG compression is not always adequate
   The PNG image format is very good for logos, drawings, icons, and other similar graphics, but it is a suboptimal format for regular pictures, such as a picture with people in it. PNG optimization (both Lossy and Glossy) tries, among other things, to reduce the number of colors while maintaining the visual aspect. For regular pictures, it will cause quality issues. The best approach for such images is to convert PNGs to JPEGs and this should result in good-looking JPEG files that are much smaller than the original PNG files.
   
6. Thumbnails used instead of main images
   WordPress creates several smaller versions of your images. These are called thumbnails, and often you use them without realizing it. Their URL looks like this (note the 150x150 at the end): https://shortpixel.com/wp-content/uploads/2023/02/image-150x150.jpg. Since they’re usually small, it’s normal for them to look bad, especially if the placeholder you put them on is larger than the thumbnail itself; the thumbnail then needs to be stretched. To solve the problem, edit your page and find an option to use the full-size image instead of a thumbnail.
   
7. Aspect ratio when using SPAI
   As you probably know, ShortPixel Adaptive Images (SPAI) resizes the images to the exact size required. It does this by taking the width of the placeholder and keeping the aspect ratio of the image. This can become a problem if the width of the image is bigger than its height, but the width of the placeholder is smaller than its height. Here’s an example:
   —– 1. Say an image is originally 1420×799. SPAI recognizes that the image is displayed in a 270px wide placeholder.
   —– 2. Therefore, SPAI resizes the image to the width of 270px and keeps the aspect ratio, so the height drops to 152px.
   —– 3. However, the height of the placeholder is 406px.
   —– 4. This means that the website must take a smaller image than the placeholder and fill the entire placeholder. To do this, the image must be stretched, which results in it looking blurred.
   The solution is to crop your images manually before uploading them to WordPress so that the vertical side is larger than the horizontal side and not the other way around. Remember to only do this for those images that need to be vertical.