There's a number of reasons that images may look different when editing your post in the WordPress admin, to pushing it live. A few possible causes to troubleshoot include:
- Image compression. If you're using a CDN or a caching plugin, these could be "optimizing" the live versions of your image to save on bandwidth.
- Image hosting. Tangentially related to image compression, if you're hosting images off-site, the host may be compressing the images as well to save on disk space and bandwidth.
- CSS styling. A number of CSS features exist that can modify an image on-the-fly to intentionally or unintentionally change the way it looks. These include opacity, contrasts, transforms and simply resizing. Styling is often only applied to the website's front, and not the back end.
- Using one monitor (or laptop) to edit and publish, and another screen or monitor to view the finished post. Screen resolutions, contrast ratios and color depth all vary. Compare both copies in the same screen.
At the end of the day, it's your decision to make whether the differences are severe enough to warrant further action. This may involve:
- Tweaking the image compression settings or disabling them altogether. Be careful with this, as the slight image quality loss may in fact be helping your website load faster, which is a better user experience, and preferred by search engines.
- Changing image hosting, or changing the settings with your image host.
- Custom edits to your CSS files to remove unwanted transforms and filters.
Changing the quality settings in particular has a performance trade-off. You want it to be clear, but don't need it to be crystal clear if the size jumps from 200 kb to 2 mb. The reduction in page speed load time (especially on mobile, you are monitoring your mobile traffic right?) can cause far more harm than benefit.
Changing image hosting services and CSS filters can have unintended consequences across your entire site. Links may break or images lost forever if not transitioned properly. Images that previous looked fine can look off after changing CSS filters.
Image Optimization Plugins
We recommend the use of image optimization plugins to do the hard work for you. The two we use are:
- ShortPixel Image Optimizer
- Regenerate Thumbnail
Unless you're an image gallery or a photographer who sells their photographs, trying to figure out the optimal balance between quality and file size isn't the best use of your time and has next to nothing to do with the success of your blog.
Here's a great podcast with ShortPixel's founder: https://www.foodbloggerpro.com/podcast/simon-duduica/