Astro Hackathon Showcase

🔌 Integrations

astro-infinity

by alteredorange

GitHub npm

README.md

Astro Infinity logo

Prerequisites

Before you add astro-infinty, you need to have an astro project with the nodejs adapter enabled:

npm create astro@latest
npx astro add node

Install

npm install astro-infinity

This will also create a [...images].ts file inside your pages/images/ directory, as well as the public/infinity directory.

Demo

There is a demo application inside /demo that you can play with as well.

git clone https://github.com/alteredorange/astro-infinity astro-infinity
cd astro-infinity/demo
pnpm i //or npm i, yard add
pnpm run dev

Usage

Import the image component into any astro page:

import {Image} from "astro-infinity"

Use the Image component with the options below. If you use the preload option, images will be put in the public/infinity folder (so don’t delete it) and be served from there.

options

ParamDescriptionOptions/Examples
srcThe local path or full URL of an image/assets/large.jpg, https://image.com/1.jpg
widthThe desired width of your image400, 150
heightThe height of your image600, 250
fitThe resizing strategycover, contain, fill, inside, outside (default: inside)
positionWhen resizing, you can use position OR gravity OR strategy to focus on certain areas of the imagetop, right top, right, right bottom, bottom, left bottom, left, left top
gravityWhen resizing, you can use position OR gravity OR strategy to focus on certain areas of the imagenorth, northeast, east, southeast, south, southwest, west, northwest, center (default: center)
strategyWhen resizing, you can use position OR gravity OR strategy to focus on certain areas of the image. Strategy only works when fit=cover.entropy, attention (only usable when fit=cover)
qualityQuality of image from 1-10050, 25 (different defaults depending on image format)
rotateHow many degrees do you want to rotate your image45, 90
styleThe class names to pass back to the image (useful if using Tailwind)ml-10, p-20, mt-5
flipFlip your image on the vertical y axis, defaults to falsetrue, false
flopFlip your image on the horizontal x axis, defaults to falsetrue, false
animatedIf the image is animated, but not a gif (i.e. animated webp), set this to truetrue, false
preloadwhether or not the image should save to disk (mainly for static sites), defaults to falsetrue, false
altThe alt tag of the image, strongly recommended to add this!To infinity and beyond!

Examples

A source image that’s located in the assets folder, rotated 45 degrees, with a margin-left of 10px, and padding of 10px (using tailwind):

<Image
	src='/assets/large.jpg'
	width='400'
        height='400'
        rotate='45'
        alt='To Inifinity and Beyond'
        style='ml-10 p-10'
/>

A remote image set to generate all images to file (for a purely static site)

<Image
        src='https://images.pexels.com/photos/87009/earth-soil-creep-moon-lunar-surface-87009.jpeg'
        width='400'
        height='400'
        alt='shoot for the stars'
        style='ml-10'
	preload=true
/>

Limitations

Currently, this addon only words in SSR mode and with the node adapter. Currently Astro has issues bundling sharp (and other image processors) in a way that’s compatible with Vercel and Netlify. Please let me know if you have any fixes for this!

Ideal Use Case

I imagine the ideal use case for this plugin would be some sort of content or ecommerce site with lots of images. You would also be using something like Cloudflare infront of your site. That way, as each image is requested, it would be cached by Cloudflare, and subsequent requests would be served from cache.

About

Astro Infinity is an <Image /> component for Astro sites. By default it will generate images on the fly as users request them using a server side function. You can also tell Astro Infinity to prebuild an <Image /> component so all the files will be available for a static site.

Open the index.astro file to see how the <Image /> component is being used. It will automatically select the best image format, and resize the image according to the width and height set in the component.

I intentionally did not look into any other image components (i.e. astro-imagetools) for a few reasons:

  1. As this is for the Astro Hackaton, I didn’t think it would be fair to get a head start by using other work.
  2. I wanted to see what I could come up with on my own.
  3. I didn’t want to be biased by seeing how other people might be solving the same problem (and just doing what they did).

Please open an issue for any questions and/or bugs, thanks!

Description

Demo available in Github repo. “Your image is so big, it’s curving space time!”