Upload image without going through Jetpack
-
Hello guys,
Would you like to know how to upload an image to my site without going through Jetpack?
Some images that I upload on my site is for creating landing pages, so the images have to have good resolution. But when you upload these images, the Jetpack compresses each one of them and the quality drops a lot, leaving the images dazzled.
So I was wondering if this Jetpack option does not work (compress data) a certain image I want.
I thank you.
Rodrigo
-
The image upload process is entirely controlled by WordPress, and by image optimization plugins you may use on your site. Jetpack doesn’t touch your images as they are being uploaded to your site.
That said, Jetpack does come into play later, when the images are being displayed on your site, and if you use Jetpack’s Photon service. The Photon service only applies lossless image compression by default, but you may have found a bug on your site, maybe via a custom color profile or a custom image format that Photon doesn’t manage properly yet.
Could you go to Jetpack > Settings > Appearance in your dashboard, and deactivate the Photon module? If the single images displayed on your site then start looking better, we’ll know the problem is caused by Photon. Could you then give me a few examples of the images that are dazzled so I can take a closer look and see what we could do to fix things?
If, however, the images don’t look better when you deactivate Jetpack’s Photon module, it means the problem isn’t caused by Jetpack. I would then recommend that you deactivate all other plugins that may interact with your images on upload. If that doesn’t help, you’ll need to investigate further, with different image types and by maybe contacting your hosting provider to ask them about the image processing library currently available on your server.
Let me know how it goes!
Hi Jeremy,
I use the Smush plugin to compress the images. So I saw with Smush people a way to upload certain images without going through the Smush plugin. And now I can upload without compression. But even so, when uploading, on the page I’m creating (landing page), the images are shown as the Jetpack URL and this leaves the images with poor quality. See below:
Uncompressed image: http://idiomas.proddigital.com.br/wp-content/uploads/sites/4/capa-guia-landing_page.png
Image on your server: https://i2.wp.com/idiomas.proddigital.com.br/wp-content/uploads/sites/4/capa-guia-landing_page.png?w=640
Notice that the image on your server loses its quality.
I’m creating a landing page (http://idiomas.proddigital.com.br/guia-ingles-winner/) and the images need to have good quality. Of course, having light images is good for fast landing page loading, but the problem is that if you prioritize the lightness of the images, the quality is lost a lot and this for landing page does not look good for the user.
on the page I’m creating (landing page), the images are shown as the Jetpack URL
That will indeed happen as long as the Photon module is active under Jetpack > Settings in your dashboard. When the module is active, each one of the images displayed in your posts and pages goes through the Photon service as soon as it is loaded on the page.
this leaves the images with poor quality. See below:
Uncompressed image: http://idiomas.proddigital.com.br/wp-content/uploads/sites/4/capa-guia-landing_page.png
Image on your server: https://i2.wp.com/idiomas.proddigital.com.br/wp-content/uploads/sites/4/capa-guia-landing_page.png?w=640
Notice that the image on your server loses its quality.
Photon maintains 89% of the original image quality; we’ve opted for that default setting as it applies a compression that is not visible. Bringing the quality downer starts making visible changes to the images’ quality.
I can indeed notice a loss in quality with that image, though. I believe it’s most likely linked to the image format, that makes compressing without losing quality a bit more difficult. That said, you can use a code snippet to overwrite the default quality settings of Photon and force it to maintain a quality similar to the original:
add_filter('jetpack_photon_pre_args', 'jetpackme_custom_photon_compression' ); function jetpackme_custom_photon_compression( $args ) { $args['quality'] = 100; return $args; }You can paste in your theme’s functions.php file, or in a functionality plugin like this one.
I hope this helps!
Perfect Jeremy! Improved quality now.
I’m just seeing something weird. I am using the Smush plugin to optimize the images, and I created a command whereby inserting a parameter “landing_page” (without quotes) into the image URL, this image will not be passed by the Smush plugin and will not be compressed.
The image http://idiomas.proddigital.com.br/wp-content/uploads/sites/4/capa-guia-landing_page.png it has the lading_page parameter and so it has not been compressed. Its size is 163kb, and through the Jetpack it is with a size of 96kb (https://i2.wp.com/idiomas.proddigital.com.br/wp-content/uploads/sites/4/capa-guia-landing_page.png?w=640&quality=100).
Now, the strange thing I’m seeing is that the other images that have passed and been compressed by the Smush plugin (does not have the landing_page parameter), have a smaller weight than the Jetpack. For example:
Normal picture: (94,2kb)
http://idiomas.proddigital.com.br/wp-content/uploads/sites/4/aprender-ingles-online.jpgPicture with Jetpack: (345kb)
https://i1.wp.com/idiomas.proddigital.com.br/wp-content/uploads/sites/4/aprender-ingles-online.jpg?w=1024&quality=100Normal picture: (44,4kb)
http://proddigital.com.br/wp-content/uploads/sites/4/Estudando-Ingl%C3%AAs-Online.jpgPicture with Jetpack: (166kb)
https://i2.wp.com/proddigital.com.br/wp-content/uploads/sites/4/Estudando-Ingl%C3%AAs-Online.jpg?quality=100Why that? As it is, it looks like the Jetpack is leaving the images heavy.
Since you’re adding the 100% quality parameter, you’re indeed removing all compression from Photon. Loading the same image without that parameter would yield different results, for example:
https://i2.wp.com/proddigital.com.br/wp-content/uploads/sites/4/Estudando-Ingl%C3%AAs-Online.jpg -> 22.6kb
I’m not sure that parameter is really needed, in fact. I personally don’t see any difference in quality between those 2 images:
http://proddigital.com.br/wp-content/uploads/sites/4/Estudando-Ingl%C3%AAs-Online.jpg
https://i2.wp.com/proddigital.com.br/wp-content/uploads/sites/4/Estudando-Ingl%C3%AAs-Online.jpgThe problem is not quality. Well now the quality is ok when accessed with 100%. The problem is the size of the image generated by Jetpack.
As I’ve seen in the examples above, images that have a KB size reduced by the compression of the Smush plugin, when accessed by the URL of the Jetpack with 100% quality is getting a much larger size.
Normal picture: (94,2kb)
http://idiomas.proddigital.com.br/wp-content/uploads/sites/4/aprender-ingles-online.jpgPicture with Jetpack: (345kb)
https://i1.wp.com/idiomas.proddigital.com.br/wp-content/uploads/sites/4/aprender-ingles-online.jpg?w=1024&quality=100Normal picture: (44,4kb)
http://proddigital.com.br/wp-content/uploads/sites/4/Estudando-Ingl%C3%AAs-Online.jpgPicture with Jetpack: (166kb)
https://i2.wp.com/proddigital.com.br/wp-content/uploads/sites/4/Estudando-Ingl%C3%AAs-Online.jpg?quality=100Drag the images to your computer and you will see the size of each one.
If Jetpack is accessing the images at a much larger size, will it do so as it hurts the loading of the pages, makes them heavier?
I see what you mean. I’ll ask one of our Photon experts to take a look, and I’ll get back to you as soon as I have some news!
My colleague ran some tests, and the problem appears to be limited to Google Chrome. When checking the file sizes in Firefox, you won’t get that bigger file size.
This is most likely because of the custom WebP file format Photon uses in browsers that support it, like Chrome. You can read more about it here:
https://developer.wordpress.com/2015/06/25/photon-webp-image-support/WebP appears to increase file size in some cases, as explained here:
https://developers.google.com/speed/webp/faq#can_a_webp_image_grow_larger_than_its_source_imageThat’s probably not something worth worrying about though, since the images are served from our CDN, quite quickly.
I hope this clarifies things a bit.
Hello Jeremy,
I understand the issue of the Chrome browser not recognizing the format. But the strange thing is that before the format was also WebP and even then it was compacting normally.
After I put the code to increase the quality to 100% it is that generated this increase in WebP file size. And notice that the only thing that changed was the quality and not the file format.
But anyway … it seems to me that the page takes a little more time to load, but not much (little difference), so up to here seems to have no problem at all.
Now, I use the Smush plugin to make compression of the images, and then comes the Jetpack and transforms into WebP with a much larger size. In that case is there no need for me to use the Smush plugin to compress? Because Smush slows down and Jetpack increases.
Does it make any difference if I’m using the compression plugin? WebP images on the Jetpack server appear to load quickly. Now, if I do not pass these images through Smush compression, will the images also be fast being accessed by the Jetpack server?Jeremy, as the images seem to be loading fast, so there’s no problem on my side. But I just question it above to see if there will be any other problems whatsoever, or if in that case the Smush plugin is working unnecessarily.
Thanks and patience and information.
Att,
RodrigoAfter I put the code to increase the quality to 100% it is that generated this increase in WebP file size.
Yes, that’s to be expected. The 100% quality setting is a special case. When you choose such a setting, we output lossless WebP images:
https://code.trac.wordpress.org/browser/photon/class-image-processor.php#L359notice that the only thing that changed was the quality and not the file format.
If the images are loaded via Chrome, Photon serves WebP images. You can see by checking the
content-typesetting in your network tab:
http://i.wpne.ws/jfg1then comes the Jetpack and transforms into WebP with a much larger size
That’s really only because you added the 100% quality setting. I’m not sure you really need that setting. If you remove it, the image sizes outputted by Jetpack will be a lot smaller, and I personally can’t notice any difference in quality when compared with the original image:
http://proddigital.com.br/wp-content/uploads/sites/4/Estudando-Ingl%C3%AAs-Online.jpg
https://i2.wp.com/proddigital.com.br/wp-content/uploads/sites/4/Estudando-Ingl%C3%AAs-Online.jpgI would recommend that you remove that setting, and keep using the Smush plugin.
The topic ‘Upload image without going through Jetpack’ is closed to new replies.