Jetpack’s Photon module is able to replace images added by WordPress on your site, but your theme seems seems to use its own custom function to grab the images and add them to your home page via some inline CSS. Photon won’t be able to detect images added like this, I’m afraid.
If you’re the theme author, you can read more about how to implement Photon in your theme here:
http://jetpack.me/2013/07/11/photon-and-themes/
Thread Starter
Erick
(@dperezr)
Is it working now? I contacted my developers.
Yes, that seems a lot better now, all thumbnails on your home page are served through Photon.
If you’re looking to improve things even more, I’d suggest using the resize parameters outlined in the post I post earlier to serve smaller images when possible. Right now, each one of your thumbnail calls the full version of the image, and that’s not the best thing to do if you’re looking to improve your site’s loading time.
Thread Starter
Erick
(@dperezr)
I asked my developers and they said by doing so, it “will look blurry on HiDPI screen”. basically the smaller an image is the more pixelated it’ll be. What do you think?
Jetpack actually includes a library, devicepx, that will automatically handle Retina and HiDPI devices by changing the Photon image size to fit each device. That library is activated by default on your site as soon as you enable Jetpack, so if your developers specify a size in the Photon parameters, Jetpack will handle the rest!
Thread Starter
Erick
(@dperezr)
Well I let my developers know this, just waiting to hear back from them. In the meanwhile I had another question regarding image size and quality. When I used to serve my own images I will try to reduce the image to the space the image was going to use in my website. Eg. Feature image can only be 750px wide in my website. So I will always crop the image to that size. Now how will that work with proton? Can I use a bigger image without affecting speed of the website say 1000px width? and can I also increase the image size (not for fun but to make the quality better)?
Feature image can only be 750px wide in my website. So I will always crop the image to that size.
Photon does that too. It serves a small, resized version of the image that matches the requested size.
Can I use a bigger image without affecting speed of the website say 1000px width? and can I also increase the image size (not for fun but to make the quality better)?
I’d recommend uploading images that closely match the displayed size on Retina / HiDPi devices. In practice, you can aim for an image that’s twice as large as your site’s content width for example.
Thread Starter
Erick
(@dperezr)
I’d recommend uploading images that closely match the displayed size on Retina / HiDPi devices
what is the displayed size on retina / HiDPi?
In practice, you can aim for an image that’s twice as large as your site’s content width for example.
– and this will not affect the speed of the website? So a 2000px image will render at the same time a 800px image does?
what is the displayed size on retina / HiDPi?
That depends on the device, as you can see here:
https://en.wikipedia.org/wiki/Retina_Display#Models
In general, I’d recommend uploading an image that’s twice as large as your content width.
and this will not affect the speed of the website? So a 2000px image will render at the same time a 800px image does?
Since 4.4, WordPress actually manages this for you, so you don’t need to worry about this. You upload a large image, and WordPress will include multiple image sizes in the image tags it creates when you insert an image into a post or page. Each device then picks the image size that’s the closest to what it needs. You can read more about it here:
Responsive Images in WordPress 4.4
Thread Starter
Erick
(@dperezr)
But what if the image is 1MB, you sure it wont affect the speed. Example
http://i2.wp.com/www.ultrabodymind.com/wp-content/uploads/2016/02/1.png?resize=800%2C800
http://i2.wp.com/www.ultrabodymind.com/wp-content/uploads/2016/02/1.png?w=800
Now I see what you say about the image resizing, but if I download any of the images into my computer it will still be 1MB of size.
The way I understand it is that the smaller your website is in size, the fastest to load?
Thread Starter
Erick
(@dperezr)
For example how well will it handle say 10 images in the same post using 2mb each
and would you recommend that kind of practice, or is it better using smaller images, say 100kb.
does SPEED gets affected when using proton? or because I am not serving those images from my server, speed remains the same
would proton help me serve a 100kb website page size at the same speed it will serve a 100mb site?
The way I understand it is that the smaller your website is in size, the fastest to load?
That’s correct. And you’re right to care about this. In the end, you’ll need to make a choice: is the quality of your images for Retina device users more important than the speed gain you could get from serving smaller images? I’m afraid I can’t decide for you; that depends on your site, on how important good images are for your readers, and on how tech savvy your readers are; if only a very small percentage of your readers uses Retina devices, it might be okay to ignore them for now, for example.
does SPEED gets affected when using proton? or because I am not serving those images from my server, speed remains the same
It does get affected. Regardless of where the images are hosted, more images, or bigger images, will load slower.
I hope this clarifies things a bit.
Thread Starter
Erick
(@dperezr)
It does thank you so much!
I have another issue that I believe could be linked to proton. Basically my favicon does not work anymore. It was working fine till recently. I am not sure if it stopped working when I activated proton. But there is a strange bug because the favicon works well in every tab in the admin panel but stops working in the front end. I’ll attach a picture.
https://goo.gl/photos/mct2xLhf6Jdi5yxs7
As you can see the homepage has a weird blue favicon with words that I cannot see, and the settings and dashboard located in the admin section works fine.
It seems you’ve added the following to your site’s head:
<a href="https://plus.google.com/+Ultrabodymind/" rel="publisher"></a>
You’ll need to remove this tag, as you can’t add link tags outside of the body tags. I’d recommending moving that link inside the body, like in your footer.
Once you remove the link, elements inserted after that link (like the favicons) will start working again.
Thread Starter
Erick
(@dperezr)
oh!!! Yes I added it about the same time I activated proton. Thank you so much Jeremy!
