netlify-plugin-inline-source icon indicating copy to clipboard operation
netlify-plugin-inline-source copied to clipboard

Handle `inlineImages` option

Open Shy opened this issue 3 years ago • 1 comments

Hey Tom. Really helpful library. I'm grabbing and setting a background image from imgur. Is there a way to get that inline? Is this something the combination of your last css inline repo and this one would resolve?

        <style>
            body {
                background: linear-gradient(rgba(10, 10, 10, 0.6), rgba(0, 0, 0, 0.9)),
                    repeating-linear-gradient(
                        0,
                        transparent,
                        transparent 2px,
                        black 3px,
                        black 3px
                    ),
                    url("https://i.imgur.com/someIDThatChangesOnEachPage.jpg");
                background-size: cover;
                background-position: top;
                z-index: 1;
            }
        </style>

Shy avatar Apr 10 '23 15:04 Shy

inline-source can inline remote files/images but only when linked through an <img> tag.

critical has an inlineImages option, so if that CSS really is critical (above the fold), it would get inlined into base64. Sadly my Netlify plugin doesn’t handle that option yet. Contributions are welcome though! critical relies on this PostCSS plugin, for what it’s worth.

Tom-Bonnike avatar Apr 11 '23 09:04 Tom-Bonnike