srcset support

[strarsis]

This plugin should correctly add the native attachment/image markup -
or at least provide a srcset and sizes.
Currently the image of maximum available size is used which causes
incredible load times and bandwith usage.

[robneu]

Featherlight does not do anything in particular with regard to this. WordPress core creates the images and the links to images, we simply handle whatever they provide.

[strarsis]

@robneu: The plugin generates HTML without srcset, which WordPress would do otherwise when wp_get_attachment_image() is used instead. - This is independent from the Featherlight plugin.

When the image is shown in Lightbox with a specific width, e.g. full width of viewport,
the sizes-attribute should be adjusted to 100vw so the browser can correctly pick the right image file:

echo wp_get_attachment_image($attachment_id, 'full', false, array('sizes' => '100vw'));

In case the Lightbox CSS adds a margin or padding, this can also be easily taken into account, e.g.:

echo wp_get_attachment_image($attachment_id, 'full', false, array('sizes' => 'calc(100vw - 20px)'));

Breakpoints are also possible, but the Lightbox layout looks very simple from mobile to desktop.

This will dramatically improve loading time and bandwidth usage.
This will also immediately add perfect retina/hidpi support (all Smartphones, Apple Screens, Tablet screens).
srcset/sizes is very well supported now and best practice, offering maximum performance.

https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

[robneu]

The plugin does not generate HTML, it handles what is output by WordPress core, themes, and other plugins. Any HTML generated is created by the Featherlight script as it copies existing markup into its lightbox area.

If you can find some area of the script that needs improvement, I'll review any pull request you submit but I'm not sure what we would need to do in this situation because we're not actually interacting with WP at all other than to enqueue some JS.

[strarsis]

Thank you for the clarification.
Then this appears to be a shortcoming in featherlightjs,
I created a new issue for this: noelboss/featherlight#337