Images not resizing

  • Client site: https://spurlocklaw.com/

    Debug info:

    ? PHP GD library is installed.

    ? Image cache directory has been created.

    (hid some of the folders for security purposes)/wp-content/cache/adaptive-images => drwxr-xr-x

    ? Installation .htaccess file is setup OK.

    (hid some of the folders for security purposes)/public_html/spurlocklaw.com/.htaccess => -rw-r–r–

    ? Adaptive images settings dump:

    array(12) {
    [“resolutions”]=>
    array(9) {
    [0]=>
    int(1024)
    [1]=>
    int(768)
    [2]=>
    int(640)
    [3]=>
    int(480)
    [4]=>
    int(420)
    [5]=>
    int(400)
    [6]=>
    int(360)
    [7]=>
    int(340)
    [8]=>
    int(320)
    }
    [“landscape”]=>
    bool(true)
    [“cache-directory”]=>
    string(21) “cache/adaptive-images”
    [“watched-directories”]=>
    array(3) {
    [0]=>
    string(18) “wp-content/uploads”
    [1]=>
    string(17) “wp-content/themes”
    [2]=>
    string(29) “wp-content/themes/slaw/images”
    }
    [“jpeg-quality”]=>
    int(65)
    [“sharpen-images”]=>
    bool(true)
    [“watch-cache”]=>
    bool(true)
    [“browser-cache”]=>
    float(30)
    [“hidpi”]=>
    bool(false)
    [“cdn-support”]=>
    bool(false)
    [“version”]=>
    string(6) “0.6.41”
    [“sanitized”]=>
    bool(true)
    }

    System info (for security and confidential purposes, I will only show certain info):

    Web Server: Apache/2.4.10 (Unix) OpenSSL/1.0.1e-fips mod_bwlimited/1.4
    Document Root:5.5.19
    PHP Time Limit: 0
    PHP Memory Limit: 256M
    PHP Post Max Size: 10M
    PHP Upload Max Size: 10M
    PHP Max Input Vars: 1000
    PHP Display Errors: No
    PHP Error Log: error_log
    MySQL: 5.6.27

    The cache directory exists. I have no idea if the site uses a CDN. I don’t think it does and the option to support CDN is unchecked. I’m optimizing for the following resolutions: 1024, 768, 640, 480, 420, 400, 360, 340, 320 But in the cache folder, only 1024, 768, and 640 are created. Any ideas? The images are not resizing.

    https://www.ads-software.com/plugins/adaptive-images/

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

    (@nevma)

    Hi, there, my friend!

    First of all the plugin seems to be working alright in your website. I do see the images being resized properly. But, now some explanations:

    Firstly, you do not need to set so many breakpoints. For instance, the difference between 420 and 480 is so tiny that you really won’t gain much to make so many optimisations. You will end up with too many images in the cache. It is sufficient to set 3-5 breakpoints. But this is your decision, of course.

    Secondly, you have the “landscape” option enabled. This causes the plugin to take into account the landscape orientation of each device. This is the wider dimension of each device. So this explains why you do not see any cache images being created for the smallest breakpoints.

    Thirdly, indeed it seems that you do not have a CDN set up, so you do not need this option!

    Let me know if you need anything more,
    Cheers,
    Takis

    Thread Starter Zardon

    (@zardon)

    But if I shrink my browser, I do not see the images resizing, which it should. If I use a mobile test emulator (eg: mobiletest.me), I don’t see see the images being resized.

    Plugin Author Takis Bouyouris

    (@nevma)

    Well, shrinking your browser will not do the trick! This is because even with a smaller browser window the browser still reports its original screen width. In order to test it you must be in device mode in developer tools or some kind of actual device or device emulator. (I am not sure how mobiletest.me works though.)

    Thread Starter Zardon

    (@zardon)

    what device emulator would you recommend?
    how do you go into device mode in developer tools? I use firebug in firefox.

    Plugin Author Takis Bouyouris

    (@nevma)

    I recommend Firefox developer tools responsive design view https://developer.mozilla.org/el/docs/Tools/Responsive_Design_View/ or Chrome developer tools device mode https://developer.chrome.com/devtools/docs/device-mode/. These two are more than enough for testing. I do not recommend any device emulator. Nor do I discourage you to use one if you wish. However, I do recommend a service like https://www.webpagetest.org/ for performance testing.

    Thread Starter Zardon

    (@zardon)

    Thanks for the advice and replies! Will use the developer tool more often. Didn’t know the browser still reports its original screen even if you resize it. Cuz there are some sites where the image moves to the next row or shrinks if you resize your browser.

    Plugin Author Takis Bouyouris

    (@nevma)

    You are welcome! ??

    Well, when you resize the browser window, all the responsive CSS is active indeed, but the Javascript reported screen width remains the one of the original screen, unless you go into device mode. We could have used the width of the page body, instead of the width of the screen, but then we would be in danger of serving small images to desktop devices, if their users had accidentally set a small browser width.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Images not resizing’ is closed to new replies.