Problem with scaled image resolution – help me please

  • christophecanard

    (@christophecanard)


    8 years, 10 months ago

    Hello team,

    I installed the adaptive images plugin and all seems to work well.
    Before to start, you can see settings below:

    “Debug info
    ✔ PHP GD library is installed.
    ✔ Image cache directory has been created.
    /homepages/13/d653043252/htdocs/prod/wp-content/cache/adaptive-images => drwx—r-x
    ✔ Installation .htaccess file is setup OK.
    /homepages/13/d653043252/htdocs/prod/.htaccess => -rw-r–r–
    ❖ Adaptive images settings dump:
    array(14) {
    [“resolutions”]=>
    array(4) {
    [0]=>
    int(1024)
    [1]=>
    int(640)
    [2]=>
    int(480)
    [3]=>
    int(462)
    }
    [“landscape”]=>
    bool(true)
    [“hidpi”]=>
    bool(true)
    [“cdn-support”]=>
    bool(true)
    [“cache-directory”]=>
    string(21) “cache/adaptive-images”
    [“watched-directories”]=>
    array(2) {
    [0]=>
    string(18) “wp-content/uploads”
    [1]=>
    string(17) “wp-content/themes”
    }
    [“jpeg-quality”]=>
    int(100)
    [“sharpen-images”]=>
    bool(true)
    [“watch-cache”]=>
    bool(true)
    [“browser-cache”]=>
    float(180)
    [“version”]=>
    string(6) “0.6.62”
    [“sanitized”]=>
    bool(true)
    [“wp-content-dir”]=>
    string(47) “/homepages/13/d653043252/htdocs/prod/wp-content”
    [“wp-content-url”]=>
    string(33) “https://canard.co/prod/wp-content”
    }”

    Plus I use these 2 plugins:
    – WP rocket
    – CDN cloudfare

    When I am testing your plugin, It seems to work well.

    But there is something I don’t understand with this url:
    https://canard.co/prod/

    When I am testing it in to GT Metrix, I got this message:
    “https://canard.co/prod/wp-content/uploads/2017/08/body-en-dentelle-pour-femme-sexy.jpg is resized in HTML or CSS from 1000×1000 to 462×461. Serving a scaled image could save 22.2KiB (78% reduction).”

    When I am using the inspecting element, I have this url below with the query string “?resolution=1440,1”:
    https://canard.co/prod/wp-content/uploads/2017/08/body-en-dentelle-pour-femme-sexy.jpg?resolution=1440,1

    Why do I have this resolution while I defined a 462 resolution in the plugin settings ?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Takis Bouyouris

    (@nevma)

    8 years, 10 months ago

    Hello, there, and thank you for using our plugin.

    This is an interesting observation you have made here, and there is an explanation for it:

    First of all GTMetrix, as it appears, simply reads your HTML and it probably doesn’t run any Javascript on it. So, it sees an image that could be scaled down and reports this. Nothing strange here.

    Of course, you are using a CDN and you have correctly enabled the “CDN support” option in the Adaptive Images settings page. (Let me make a quick reminder here that this feature is still a bit experimental due to the nature in which CDNs work – but this is besides my point.) In this case and with this setting enabled the Adaptive Images plugin runs on page load and tries to change your image urls as fast as possible, before the browser downloads them in full size, so that it can instruct the browser to download the images in a size that fits the user screen.

    In order to do this, the Adaptive Images plugin adds the ?resolution=1440,1 part to the url of your images. In this specific example, the “1440” breakpoint has been chosen as best fitting the request that was made.

    To conclude, this is expected and natural behaviour for the Adaptive Images plugin when working in CDN support mode.

    Let me know if you need anything further!

    Cheers,
    Takis

    Thread Starter christophecanard

    (@christophecanard)

    8 years, 10 months ago

    Hello Takis and thanks a lot for your quick answer.

    From what I read from your reply, can I consider that your plugin is running correctly for my website ?

    Because, I was expecting from your plugin different images to serve different devices.
    For example, running on both desktop and mobile, the original image “image-1.jpg” would be served as 2 different images:
    – image-1.jpg for desktop
    – image-1-mobile.jpg for mobile

    And when I am looking at the image served with your plugin, here is what I see:
    https://canard.co/prod/wp-content/uploads/2017/08/Laps_photo-ambiance-2.jpg?resolution=667,2 (mobile)
    https://canard.co/prod/wp-content/uploads/2017/08/Laps_photo-ambiance-2.jpg?resolution=1024,2 (tablet)

    If it is the natural behavior, then I would like to say that I am very satisfied with your plugin.

    The CDN mode is still experimental. Do you have more information on stable release ?

    Wish you a good day,
    Christophe

    CDN experimental

    Plugin Author Takis Bouyouris

    (@nevma)

    8 years, 10 months ago

    Hello, Christophe,

    Our plugin works like a “filter” or a “pipe” for images. It makes the browser think that the same image has different sizes when requested by different devices. But it does this totally transparently, which means that the names of the images remain unchanged! Maybe this is too transparent for one to understand, but it usually works nicely.

    So, yes, what you see is indeed expected and normal behaviour!

    Now, about the “CDN mode” it is experimental in the fact that some of the images might still get downloaded in their original size and not resized. So, fortunately, nothing breaks, but you might not always get the full benefits of the plugin.

    Unfortunately the way CDNs work and their many intricacies have not allowed us to uniformly overcome this problem in a stable way. We are working on it, but we are not exactly sure when we will come up with a final solution. Sorry about that!

    Cheers,
    Takis

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Problem with scaled image resolution – help me please’ is closed to new replies.

Tags