Retina support lost with caching, blurred thumbnails

  • Resolved anna123ca

    (@anna123ca)


    6 years, 11 months ago

    I have jpeg quality set to 100. The gallery type is the default one. The thumb size is set to 320×240. And I have all the checkboxes for retina support checked.

    Then I clear the thumbs cache (on the gallery edit page), press Update for the gallery.

    Then I refresh my website page where the gallery is included. And the thumbs get cropped correctly and display in high res and look great. If I save a thumb image, its size is 960×720 (I presume the retina support works here – I’m testing this on a 4K screen).
    And when I reload this page all the thumbs get blurred. And it stays blurred for all subsequent reloads until I clear the cache again. If I save one of the blurred thumbs images, the image size is now the 320×240 (what I have set for the thumb size on the gallery edit page), not the 3x that like on the very first load after clearing the cache. On a reload, as I understand, these thumb images came from the cache.

    So it looks like the images are probably pulled from the cache without taking the screen resolution into account. Or maybe they are saved in the cache only in the default size without the retina factor.

    My workaround, for now, is to force using the original images for thumbs, but I don’t really like it very much as I have to edit all of them to make all of them have the same aspect ratio, and that doesn’t look as nice as the cropped thumbs.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author bradvin

    (@bradvin)

    Hi

    All image sizes are generated for the gallery when it is first rendered.

    It is then up to the browser which image is shown based on the pixel density of the client. You can see the different retina images and their source url’s if you inspect the page source and look at the thumbnail img tag.

    Can you post a link to your page and I can have a closer look

    Thread Starter anna123ca

    (@anna123ca)

    Hi, thanks for your reply.
    Well, I have a workaround as I wrote, and don’t want to reconfigure it back to the faulty version.

    What I noticed with my screen and all the settings, is that it is only the 1st time when the gallery is displayed (after clearing the thumbs cache) the thumb images are crisp and high quality. And on this 1st time, the actual image returned from the server (if I save it from the browser) is 3x the configured size of the thumbnail on each side. All subsequent page reloads and navigating website links back and forth brings up a slightly (but noticeably) blurred view, with the thumb image size equal to my size settings (again if I save it from the browser). And once I clear the thumb cache in WordPress, the next 1st refresh of the gallery page brings up the crisp good images again. And all subsequent reloads are blurry again until the cache is cleared, etc.

    So I presume that is not the browser or not only the browser that causes the blurred thumbs. The very first rendering of the gallery when the cache is empty, the images returned to the browser are higher resolution.
    Why would it not return same image size/resolution on a reload unless I have cleared the thumbs cache on the server before doing the reload?

    Plugin Author bradvin

    (@bradvin)

    can you post a link to your gallery please

    Thread Starter anna123ca

    (@anna123ca)

    ok, I’ve created a temporary page with a gallery set up so that the thumbs are blurred after reloading from the cache: https://goo.gl/sSkmQN

    and this is the good one with the thumbs forced to be the originals: https://goo.gl/wXqckC

    Thread Starter anna123ca

    (@anna123ca)

    I think I forgot to mention. I see the issue when testing on all 3 devices: 4k laptop screen, and high res phone and tablet.

    Plugin Author bradvin

    (@bradvin)

    Thanks for posting that link, which helped us find the problem.

    You have a custom CSS stlye:

    
.fg-item.fg-loading{display:none}

    Which is loading from https://alabinskaya.com/wp-content/uploads/shapla/css/customize-style-5aaee18398bb2.css?ver=1521410435 which is causing our retina image logic to not work as expected.

    Please remove that custom css.

    Thread Starter anna123ca

    (@anna123ca)

    Great, thanks a lot! That did help.

    Then what would be a proper way to hide those pre-loading boxes / image placeholders? I would like to make them invisible or all white to have them blend with the white background.

    Plugin Author bradvin

    (@bradvin)

    You can set the loading icon to none on the appearance tab.

    To make the background white, you can set the background color using some custom CSS

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Retina support lost with caching, blurred thumbnails’ is closed to new replies.