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.
Perspective
As creatives, we're often harder on ourselves and more critical of the work we put out than anybody else will be. That doesn't mean you should be sloppy or lower your standards, but keep the bigger picture (pun not intended) in mind.
With images in food posts and recipes in particular, visitors will be looking at the ingredients in the picture, and then scrolling past within seconds to get the recipe. The 30 minutes you spent prepping the picture and 40 minutes editing it? That took care of 99% of the work. Don't get hung up on the remaining 1% that nobody but you will notice. Use that time instead to promote it and interlink from your other recipes, or do some keyword research.
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/