Sign in

Responsive images are always served at the same (reduced) size.

  • This topic has 4 replies, 2 voices, and was last updated 1 month, 1 week ago by .
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #8081
    Avatar photopfelipm

    Hi!

    I am on Publii v.0.38.3 (build 14238) + Simple 2.3.0.0. Lazy load and responsive images are enabled (60% quality, I recall it is the deafult value).

    I’ve noticed that images inside posts (not externally hosted or of the GIF type) are always served at medium size (-md, 768px), regardless the viewport width. This makes some of them appear rather blurry, especially when choosing the wide image class. Featured images work as expected, though.

    Example post: https://pablofelip.online/coda-webhooks-love-apps-script

    I’ve not modified themes/simple/config.json at all:

    "responsiveImages": {
                "contentImages": {
                    "sizes": "(max-width: 48em) 100vw, 768px",
                    "dimensions": {
                        "xs": {
                            "width": 300,
                            "height": "auto"
                        },
                        "sm": {
                            "width": 480,
                            "height": "auto"
                        },
                        "md": {
                            "width": 768,
                            "height": "auto"
                        },
                        "lg": {
                            "width": 1024,
                            "height": "auto"
                        },
                        "xl": {
                            "width": 1360,
                            "height": "auto"
                        },
                        "2xl": {
                            "width": 1600,
                            "height": "auto"
                        }
                    }
                },

    What might I be missing?

    Thanks in advance.

     

    #8085
    Avatar photoBob

    It works very well for me, content images are displayed at the sizes specified in config.json (see the attached screenshot below). Overall, the browser ultimately decides what image size is best for the user.

    screenshot-2022-08-18-at-08.42.56

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #8088
    Avatar photopfelipm

    Thanks for testing, Bob.

    The problem I see is that

    "sizes": "(max-width: 48em) 100vw, 768px"

    is capping the width of my images to 768px when viewport > 48em (which is even a little less than the full width of posts when using this template). And if the css wide image class is chosen, 768px images are displayed inside a 1000px (in my setup) width area, causing a lot of blurriness.

    I have changed that to

    "sizes": "(max-width: 48em) 100vw, 1024px"

    and now I am getting -lg versions of pics instead, which is good enough for me, pics are much sharper now.

    I am not well acquainted with responsive design techniques, so I am afraid this is all I dare to try 😅, even though I understand this is rather suboptimal and probably very hacky.

    #8089
    Avatar photoBob

    It is quite hard to determine the correct image size when we have the possibility to change the width of the page, post entry, etc … that’s why our settings of the responsive images are quite general.

    In terms of your case, what version of the Simple them are you using? In the recent version, there has been a change in the size attribute.

    However, if you have already set up your website, I recommend using the Lint Images – https://github.com/ausi/RespImageLint – it’s a really cool tool.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #8090
    Avatar photopfelipm

    I am still on Simple 2.3.0.0, will check latest version.

    I didn’t know RespImageLint, thanks for the suggestion. Getting this thing totally right seems very hard indeed.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.