Posted by Aimee Cozza on January 31st, 2018

I just went through an interesting couple of hours. On top of being a web developer, social media manager, and general many-hatted SEO adventurer, I’m also a freelance illustrator. Anyone who is an illustrator, photographer, or visual artist knows that image quality is really, really important — especially when displaying portfolios and the like. It’s with this in mind when I’m developing for visually creative clients that I keep quality in my thoughts always (as well as compression optimization keeping the page load speed in mind).

I ran into something very curious, though. I noticed on my own portfolio website, that there was a dramatic drop in image quality in my galleries. While some compression is to be expected even in a 12 quality Photoshop jpg save, I was seeing some very noticeable compression. It seemed to come on all of a sudden, so I immediately thought about WordPress’ new quality change from a 90 to an 82.

Some of the images it was extremely noticeable on:

(Left was what was being served, and right was the original image, which was lacking in a lot of my details. Even the colors were drastically different)

In theory, the quality change only affects images that are automatically created by WordPress (thumbnails and such) or anything edited in the WordPress built in editing software. It shouldn’t affect any full size images. WordPress themselves have stated that WordPress simply creates images off of the full size images and does not modify the full size uploads.

Curious as to what was causing this drastic image quality loss, I tried a few things:

First, I tried checking any caching plugins I had installed and active. There are no settings in W3 Total Cache for images, I noticed, so that was out. Nevertheless, I deactivated the caching plugin while I could sort out what was happening.

The next step was trying this line of code in my functions.php and replacing an image to see what happened:

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

This line of code is supposed to stop WordPress from compressing your files… But since WordPress only compresses thumbnails and other created sizes, it shouldn’t matter, right? I refreshed, the image quality was the same.

The next thing I tried was uploading images via FTP directly to my WP uploads directory, overriding anything currently in it. Refreshing the page, no luck. Garbage.

So at this point I thought it might have been something to do with how Chrome was rendering the jpgs, because it’s not in the theme, it’s not in WP, and it’s not helping me to upload via FTP. I thought I was going to have to reupload every severely affected image as a PNG, which was doubling my file sizes. Sigh. Not great for page speed, but I guess to save some of my vibrant images, I’ll take it.

I uploaded two images this way before I noticed something…

My files from a gallery were being served from i1.wp.com, i10.wp.com, or i2.wp.com. Not sure why, I sent the URL through Google and…

As is often with my site, Jetpack was the culprit.

I have a love/hate relationship with Jetpack. I really, really love the tiled mosaic gallery function. I think it’s something that should be built into WP to begin with as it’s the best tiled mosaic gallery out there. It actually resizes images appropriately and aligns them both top and bottom, which a lot of mosaic galleries can’t seem to get down. Usually, I just use the Tiled Gallery without Jetpack plugin so I can ditch all the excess garbage that comes with Jetpack (such as having to connect to WordPress.com, etc). At one point I was using Jetpack for the social share feature too, but spammers took control of the “share” feature and started utilizing it to send out spam emails — but that’s a different story entirely. For whatever reason the Tiled Gallery without Jetpack plugin wasn’t working on my site, so I was relegated to Jetpack.

Jetpack uses this system called “Photon” to “optimize” your images. They’ll host them on the i1, i2, or i10 servers and serve them from there. At first glance in the Jetpack settings, you cannot disable Photon optimization and utilize the mosaic galleries. But there’s got to be some sort of code to kill off Photon and still use the mosaic gallery, right?

So here it is! The solution!

Kill it with Fire

Visit this URL:

And click “deactivate” next to the Photon module.

There. Now your full sized images inside of a tiled gallery environment won’t look like trash!

I hope this helps you chase down any image quality problems you may have. Got a question? Go ahead and leave a comment and we’ll be happy to help!

Edit: It has come to my attention that the URL above may not work anymore (it does still for me but may not for others). You’re going to want to use this code in your functions.php from wpmayor.com:

/* Remove Photon on this site */

$photon_removed = remove_filter( 'image_downsize', array( Jetpack_Photon::instance(), 'filter_image_downsize' ) );

// Call wp_get_attachment_image(), wp_get_attachment_image_src(), or anything else that ultimately calls image_downsize()

if ( $photon_removed )
	add_filter( 'image_downsize', array( Jetpack_Photon::instance(), 'filter_image_downsize' ), 10, 3 );