vue-responsive-image

Make every Image Responsive to Shrink your Bundle Size

📖 Release Notes

Intro

DEMO

Vue Responsive Image helps you in making every image on your website responsive. Inspired by tailwindcss breakpoints it always scales the image down to fit the current breakpoint but still leaves you the flexibility to scale it down even further.

Requirements

Nothing, just go for it.

Setup

1. Add @teamnovu/vue-responsive-image as a dependency to your project

yarn add @teamnovu/vue-responsive-image

# or npm install @teamnovu/vue-responsive-image

2. Add the following code to your main.js

import ResponsiveImage from '@teamnovu/vue-responsive-image'

Vue.component('ResponsiveImage', ResponsiveImage)

Usage

Just use the <ResponsiveImage /> component where you would have a normal <img /> tag and pass in the props as follows.

<ResponsiveImage
  src="https://source.unsplash.com/random/{w}x1000"
  :screens="{
    xs: '360px',
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px'
  }"
  :max-width="3000"
  sizes="w-90vw md:w-60vw xl:w-50vw"
/>

Available Props

| Option | Type | Default | Options | Description | |------------ |---------- |------------------------------------------------------------ |------------------------------------ |-------------------------------------------------------------------------------- | | src | String | none | width: {w} | The source to be used for the image with {w} where the width should go. | | maxWidth | Number | 2560 | Any Number | The maximum width used to calculate the image width on the biggest breakpoint. | | screens | Object | { sm: '640px', md: '768px', lg: '1024px', xl: '1280px' } | An key pixel value pairs | The breakpoints to be used. | | sizes | String | 100vw for each breakpoint | Any vw value for each breakpoint | Viewport-width to further shrink image on each breakpoint. |

Development

1. Clone this repository
2. Install dependencies using yarn install
3. Start development server using yarn dev

Release

1. yarn release
2. npm publish

Features Planned

• [ ] Image Ratio
• [ ] Breakpoints from tailwindcss config

License

MIT License

Copyright (c) teamnovu