https://github.com/romdim/svelte-progressive-image

Progressive image component using Svelte (granted that you already have the images)
https://github.com/romdim/svelte-progressive-image

component progressive-image svelte

Last synced: about 1 month ago
JSON representation

Progressive image component using Svelte (granted that you already have the images)

• Host: GitHub
• URL: https://github.com/romdim/svelte-progressive-image
• Owner: romdim
• License: other
• Created: 2020-09-05T10:38:58.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-09-11T16:26:18.000Z (over 3 years ago)
• Last Synced: 2024-12-04T04:47:33.897Z (about 2 months ago)
• Topics: component, progressive-image, svelte
• Language: TypeScript
• Homepage: https://romdim.github.io/svelte-progressive-image/
• Size: 4.96 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-progressive-image

Progressive image component using Svelte (granted that you already have the images).

[Demo](https://romdim.github.io/svelte-progressive-image/)

## Installation

Run `yarn add -D svelte-progressive-image`.

Then use it in your svelte files like that:

```svelte

  import Image from "svelte-progressive-image";

  let name = 'image-name';

```

## Result

The result looks like:

```html

  

  

  

```

## API

Check the `Image.svelte` for the exported variables, their types and defaults.

These include:

- The `name` of the image

- The `widths` that are used to create the srcSet attribute.

- The `defaultWidth` of the img to be shown if nothing else works.

- The `sizes` that makes the max-width media query for the screen-image.

- The `largestImageSize` which is the image size for the max window size.

- The `alt` attribute for alternative text for the image.

- The `imageClass` for any class that we need to style our component.

### Based upon

- [Opinionated Svelte Component Template](https://github.com/romdim/svelte-component-template)

- [Unsplash Svelte image by Ferenc Almasi](https://unsplash.com/photos/fhAfLtHToCs)

- [Practical HTML for responsive images in 2019 by Greg Ochab](https://highlandsolutions.com/blog/practical-html-for-responsive-images)