Docs

[TaverasJose]

I’m having 2 issues with my site:
Doctablet.com

I’m trying to optimize my images so my PageSpeed score can go up. I’ve tried
doing this, reducing their size significantly, all the way before quality becomes an issue.
Yet, google calls the need to ‘Optimize Images’ on my site.
here is a screenshot:
https://www.dropbox.com/s/1h70h649wjoua92/1.png?dl=0

The pictures are linked through the Jetpack link, as they use the photon optimizer but still, even without that
on google calls the same flag.
I called on Jetpack support and they examined the site, suggest I give you a ring as they see a problem with the
“how those sizes are being calculated” they think is an issue with the theme; and are recommending I change X.
To what I reply: you must me on drugs.

The second issue is some of my pictures ONLY ONE post don’t display well, I’ve tried everything and the error still occurs. You can see an example of it here;
https://www.doctablet.com/blog/2016/12/15/insulin-pens/
I’ve attached the image: im referring to the black line that appears.
I’ll submit another post with credentials to log in.

[TaverasJose]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

I think what google is suggesting is, to optimize it for a specific view/device. Which isn’t totally possible since the theme is responsive. Example, you have any image of 700×700, and yet displayed on 300×300 box, then google is suggesting that you should compress it and resize it to 300×300 to match the containing element. That works for that view, for the desktop.

But how about devices like tablets and mobile where layout collapses to 1 column, which means 1 column = device-width. If you view your compressed image to 300×300 and viewed in mobile (767px) or tablet (979px) then it’s blurry if stretched.

The purpose of X theme is to make the site responsive and images should work on all devices. Now, imagine your 300×300 image is displayed on a retina display, it will be more blurry. Retina requires double the size of the image to make the look crispier.

X theme generates the sizes according to layout size and the target devices, but it’s mostly 767px, 979px, or above. There are many standards, it’s up to you which to follow and X theme follows the responsive standard. But, you can always follow google and upload their required image size. Example, upload the exact and small size so X theme and WordPress won’t generate any copies of it. Images are only resized and cropped if it’s greater than the layout size.

I also noticed that the image size is 120kb, I’m not sure why it still need to reduce it by 99%. It’s like close to nothing.

About the black lines, it’s part of the image https://i2.wp.com/www.doctablet.com/wp-content/uploads/2016/12/ScrewingOn.png?w=859&ssl=1. You should upload a jpg image, if you upload a PNG image and WordPress process it, then any transparency will turn to black.

Thanks.

[Author]

Posts