High resolution images for Featured Images on front page

Thanks for your reply. I have resisted turning off responsive images. It might cause a nasty spike in bandwidth for someone with limited cellular data.

I modified the .hbs and .json files to include more thumbnail sizes but it didn’t work as I expected. For example, I added a Group variable but the processor balked. Would a max-width of 6000px be the cause of a problem?

To compound the issue I am unclear on the logic. Take the code snippets below:

"sizes": {
                    "hero": "(max-width: 1600px) 100vw, 1600px",

"xl": {
    "width": 1360,
    "height": "auto",
    "group": "hero"
}

 
Where a viewport of greater than or equal to 1360px is detected, does the code/server provide an image greater or equal to 1360px width, and always less than 1600px?

How does the code supply high resolution image files to high resolution displays?

If one creates an entry for xxl with a width of 1600, and xxxl for widths greater than 1600px, does the code create the scaled-down images and detect the device display to serve the relevant image? I appreciate any advice you can provide.

Thanks. I’ve read both articles and others to fill in the gaps. That clears up responsive images.

The question remains, how to implement high resolution using “featuredImages” in Publii?

When Frontpage layout is set to 1 column the photos are low resolution. If you view the website, you’ll see there’s a low resolution issue when set to 2 columns. 1 col results are worse when viewed on a desktop monitor.

You say, “if you still want to use the responsive images you can add more thumbnail sizes by modifying the config.json file.”

Yet my reading of the page, “How images work in Publii,” provides examples of necessary modifications to the Handlebars markup;

{{#featuredImage}} 
  {{#if url}} 
    <img 
         src="{{url}}" 
         {{responsiveImageAttributes 'featuredImage' srcset.hero sizes.hero}}
         height="{{height}}" 
         width="{{width}}" 
         alt="{{alt}}"> 
  {{/if}} 
{{/featuredImage}}

If one adds a group variable to the json file, one uses it in the Handlebars file.

For example one might add “newgroup” to the .json file, and “srcset.newgroup sizes.newgroup” to the markup.

To return to the original question, to force the Frontpage layout to display high resolution photographs in the 1 column setting, should one only add more thumbnails sizes to the json file, or is creating a new group and editing both the json and the markup files the correct approach?

I have to say, I have tried both approaches without success so far. I would be grateful if you could provide a brief example based on those in “How images work in Publii,” to illustrate a correct json/Handlebars configuration for one high resolution at, say, 6000px?

"files": {
    "ignoreAssets": [
        "scss",
        ".DS_Store"
    ],
    "assetsPath": "assets",
    "partialsPath": "partials",
    "responsiveImages": {
        "contentImages": {
            "sizes": "(max-width: 1024px) 100vw, 1024px",
            "dimensions": {
                "xs": {
                    "width": 300,
                    "height": "auto"
                },
                "sm": {
                    "width": 480,
                    "height": "auto"
                },
                "md": {
                    "width": 768,
                    "height": "auto"
                },
                "lg": {
                    "width": 1024,
                    "height": "auto"
                }
            }
        },
        "featuredImages": {
            "sizes": {
                "cards": "(min-width: 75em) 25vw, (min-width: 56.25em) 33vw, (min-width: 37.5em) 50vw, 100vw",
                "post": "(max-width: 1600px) 200vw, 3000px",
                "amp": "(max-width: 768px) 100vw, 768px"
            },
            "dimensions": {
                "xs": {
                    "width": 300,
                    "height": "auto",
                    "group": "post,cards,amp"
                },
                "sm": {
                    "width": 480,
                    "height": "auto",
                    "group": "post,cards,amp"
                },
                "md": {
                    "width": 768,
                    "height": "auto",
                    "group": "post,cards,amp"
                },
                "lg": {
                    "width": 1024,
                    "height": "auto",
                    "group": "post,cards"
                },
                "xl": {
                    "width": 1360,
                    "height": "auto",
                    "group": "post,cards"
                },
                "2xl": {
                    "width": 1600,
                    "height": "auto",
                    "group": "post,cards"
                },
                "3xl": {
                    "width": 2000,
                    "height": "auto",
                    "group": "post,cards"
                },
                "4xl": {
                    "width": 3000,
                    "height": "auto",
                    "group": "post,cards"
                },
                "sm2": {
                    "width": 375,
                    "height": "auto",
                    "group": "post,cards"
                }
            }
        },
        "tagImages": {
            "sizes": "(min-width: 75em) 25vw, (min-width: 56.25em) 33vw, (min-width: 37.5em) 50vw, 100vw",
            "dimensions": {
                "xs": {
                    "width": 300,
                    "height": 255,
                    "crop": true
                },
                "sm": {
                    "width": 480,
                    "height": "auto"
                },
                "md": {
                    "width": 768,
                    "height": "auto"
                },
                "lg": {
                    "width": 1024,
                    "height": "auto"
                },
                "xl": {
                    "width": 1360,
                    "height": "auto"
                },
                "2xl": {
                    "width": 3000,
                    "height": "auto"
                }
            }
        },
        "optionImages": {
            "sizes": "(max-width: 1600px) 100vw, 1600px",
            "dimensions": {
                "xs": {
                    "width": 300,
                    "height": 255,
                    "crop": true
                },
                "sm": {
                    "width": 480,
                    "height": "auto"
                },
                "md": {
                    "width": 768,
                    "height": "auto"
                },
                "lg": {
                    "width": 1024,
                    "height": "auto"
                },
                "xl": {
                    "width": 1360,
                    "height": "auto"
                },
                "2xl": {
                    "width": 3000,
                    "height": "auto"
                }
            }
        },
        "galleryImages": {
            "sizes": "",
            "dimensions": {
                "thumbnail": {
                    "width": 3000,
                    "height": "auto"
                }
            }
        }
    }
},