• Resolved richieps

    (@richieps)


    Hi,

    I’m having an issue with images not displaying on my homepage when viewed on an iPad. Having done some research online it looks as if this could be because Safari (the browser of choice on iPads) doesn’t support webp images.

    However, I thought that the whole idea of webp and browsers that don’t support the format was that there should then be a fallback to a jpg or png image instead.

    The images are optimised, and webp versions produced, by ShortPixel. In LSC I have Image WebP Replacement and WebP For Extra srcset set to On. The webp images are displaying correctly on my desktop using both Firefox and Chrome.

    Any suggestions?

    Thanks ??

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support qtwrk

    (@qtwrk)

    Hi,

    Could you please provide the report number ?

    Best regards,

    Thread Starter richieps

    (@richieps)

    Hi qtwrk,

    The report number is VQFJEMZJ

    Thanks

    Thread Starter richieps

    (@richieps)

    Hi,

    I have no idea why (I haven’t changed anything) but the images now show on the iPad.

    Is this some sort of caching/timing issue perhaps?

    Thread Starter richieps

    (@richieps)

    OK, I take it back – images have gone again! ??

    It’s weird, the images (also webp) on other pages seem ok.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    I noticed one thing , you have cloudflare cache on

    which means , probably , when Chrome user visited this page and got webp images, then next time a Safari user accessed again , with CF cache that has webp content in it , then it shows webp image to safari which it doesn’t support.

    I also noticed you have

    cache-control set on main home page, this is not a good practice unless your site content rarely change.

    Best regards,

    Thread Starter richieps

    (@richieps)

    Hi,

    Yes, I do use CloudFlare. I see what you mean about the webp images being cached with CF. Is there any way around this? Or should I just abandon using webp?

    I’m afraid I don’t follow the second point (this is all pretty new to me). Would you mind providing a little more detail and suggest what I should be doing instead?

    Thanks ??

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    root@test:~$ curl -I -XGET https://richiesroom.com/
    HTTP/2 200
    date: Mon, 20 Apr 2020 18:31:14 GMT
    content-type: text/html; charset=UTF-8
    set-cookie: __cfduid=d70be12bed4e21cff9fcdb563d59ea5591587407474; expires=Wed, 20-May-20 18:31:14 GMT; path=/; domain=.richiesroom.com; HttpOnly; SameSite=Lax; Secure
    x-ua-compatible: IE=edge
    link: <https://richiesroom.com/wp-json/>; rel="https://api.w.org/"
    link: <https://richiesroom.com/>; rel=shortlink
    x-litespeed-cache: hit
    vary: Accept-Encoding,User-Agent
    alt-svc: h3-27=":443"; ma=86400, h3-25=":443"; ma=86400, h3-24=":443"; ma=86400, h3-23=":443"; ma=86400
    x-turbo-charged-by: LiteSpeed
    cache-control: max-age=259200
    cf-cache-status: HIT
    age: 3252
    expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    server: cloudflare
    cf-ray: 5870f0e98d9dd65d-MAD
    cf-request-id: 023a74e5f20000d65d1e832200000001

    In this HTTP response header, there are 2 things you need to check

    cache-control: max-age=259200
    cf-cache-status: HIT

    for cf-cache-status , I believe you have understood why this happens , as if Chrome user accesses it first, CloudFlare will cache page with webp image and then Safari user accesses it , it received webp link , and page broken.

    So at this point , you only have 2 options.

    1. Disable CloudFlare cache which is the more appropriate approach , unless you have plugin that controls CF purge , that purges your cache when you update/publish post , otherwise your user will see out-dated content as the cache is still being served if you didn’t purge it.

    2. disable webp replacement.

    Second thing

    cache-control: max-age=259200

    this header, will instruct browser to cache your page for 3 days

    Which means , if you post/edit your site , user won’t be able to see the new content in 3 days (unless this is new user who never visited your site , or who force browser cache to be disabled or cleaned it.)

    Ideally , for a dynamic CMS site like WordPress, the page should have to be no-cache , as this post , it gives cache-control: no-cache, must-revalidate, max-age=0 header, so user’s browser won’t cache the page.

    Best regards,

    • This reply was modified 4 years, 10 months ago by qtwrk.
    • This reply was modified 4 years, 10 months ago by qtwrk.
    Thread Starter richieps

    (@richieps)

    Hi,

    Thank you so much for taking the time to explain this to me, I appreciate it ??

    In light of the information that you provided, I made some adjustments at CloudFlare. The images now appear on the homepage when looking at it on an iPad.

    I have to confess, I don’t fully understand why the scenario only applied to the homepage and not all of the other pages with images (also in webp format) but at least it is working for now.

    Thanks again.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    Well , a piece of advice is that , when you have some kind of issue , or any kind of issue.

    try disable CDN first , and check on origin site, so this way you can know where the issue come from

    Best regards,

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Images not showing on iPad’ is closed to new replies.