search

zerodevx / svelte-img

High-performance responsive/progressive images for SvelteKit
https://zerodevx.github.io/svelte-img/
ISC License
300 stars 11 forks source link

Configurable Breakpoints #14

Closed AaronNBrock closed 11 months ago

AaronNBrock commented 1 year ago

For images which only cover a small portion of the view port, it would be useful to be able to define breakpoints as opposed to the breakpoints always the width of the rendered image on this line.

I'm happy to help contribute, but I'm not sure the best way to implement this. It could be as simple as adding an exported field on the SvelteImg component:

<SvelteImg src={MyImg} breakpoints=[480, 720, 1080] />

or adding as an import option:

import testBasic from '../cat01.jpg?breakpoints=480;720;1080&run'

or something else, would love your thoughts @zerodevx

I'm happy to help contribute, but I'm not sure the best way to implement this.

zerodevx commented 1 year ago

Hey, apologies for the late reply. Stoked that you're able to help! I'm also wondering what the best way to handle this is. I'm bit apprehensive for svelte-img to handle art direction - kinda think it should focus on solving the most common cases.

AaronNBrock commented 1 year ago

Thanks for the art direction link ~ I hadn't even thought of that!

In my use case I'm not trying to change the variants that are generated but when they are displayed. Specifically I have an image which only takes up about 10% the width of the page, but at the moment by default when the screen is 1920px wide svelte-img will display the image with 1920w even though the image is only 1/10th that width. I'd like to be able to configure that.

zerodevx commented 11 months ago

So the recommended way is to use the sizes attribute as described here. I'll add an example into the docs.

zerodevx commented 11 months ago

This has been added to the docs.