npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ji-constructs/cdk-image-resize-behavior

v0.6.3

Published

This construct library is adapted from [https://github.com/nlopezm/aws-cdk-image-resize](https://github.com/nlopezm/aws-cdk-image-resize) which was inspired by [this blog](https://aws.amazon.com/blogs/networking-and-content-delivery/resizing-images-with-a

Downloads

26

Readme

AWS Image Resizer Construct Library

This construct library is adapted from https://github.com/nlopezm/aws-cdk-image-resize which was inspired by this blog from the AWS official website and this one from web.dev, and provides a way to easily setup the required arquitecture to start serving performant images.

Optimization

If the client is requesting an image and if the client supports avif or webp, this construct will take care of returning an optimized image (which is usually 80% lighter than the conventional jpg/png images).

Resizing

You might want to serve multiple image versions. Why would your mobile users pay the cost of loading the same big files desktop users need? Just pass width and/or height (in px) as query params and you will get original image cropped to the requested sizes.

This is how the client's code would look like:

<img
  srcset="https://cloudfront-url/path-to-your-image/image.ext?width=150 150w,
          https://cloudfront-url/path-to-your-image/image.ext?width=500 500w,
          https://cloudfront-url/path-to-your-image/image.ext?width=800 800w"
  src="https://cloudfront-url/path-to-your-image/image.ext"
>

Refer here for more information on this!

Image generation workflow

image generation workflow Source: AWS blog

  1. Two Lambda@Edge triggers namely Viewer-Request and Origin-Response which are associated to a CloudFront distribution.
  2. Amazon Simple Storage Service (Amazon S3) as origin.

Let’s understand what happens in these various steps 1 to 5

Step 1: The requested image URI is manipulated in the viewer-facing Lambda@Edge function to serve appropriate dimension and format. This happens before the request hits the cache. The URI should be the path to the original resource (e.g. /image.jpg). The manipulated URI will look something like this:

  1. /image.png, if no optimization or resize is possible
  2. /image.png;;.webp, if webp supported by the client
  3. /image.png;width=${width}&height=${height};.webp, in case width and/or height are supplied as query params

Step 2: CloudFront fetches the object from S3.

Step 3: If the required image is already present in the bucket, S3 returns the object to CloudFront. Otherwise it returns a 404 Not Found response.

Step 4: CloudFront returns the resulting image to the viewer.

Step 5: If the image is not present in the bucket, the original image is fetched, the resize and optimizations are applied and the resulting file is put into the bucket so subsequent requests return this image that is now already present in the bucket. If the original image could not be fetched, the 404 is passed onto the viewer.

Note: Step 2, 3 and 5 are executed only when the object is stale or does not exist in CloudFront cache. Static resources like images should have a long Time to Live (TTL) as possible to improve cache-hit ratios.

This step by step is also taken from AWS blog with some minor tweaks.

How to use

Default

import * as cdk from 'aws-cdk-lib/core';
import { ImageResize } from 'aws-cdk-image-resize';

export class MyStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const imageResize = new ImageResizeBehavior(this, 'ImageResize');
  }
}

BYOB (bring your own bucket... and cloudfront distribution)

import * as cdk from 'aws-cdk-lib/core';
import { ImageResize } from 'aws-cdk-image-resize';

export class MyStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const bucket = new Bucket(this, 'Bucket');

    const imageResize = new ImageResizeBehavior(this, 'ImageResize', {
      createDistribution: false,
      s3BucketOrProps: bucket,
    });

    const cloudfront = new Distribution(this, 'Distribution', {
      defaultBehavior: imageResize.behaviorOptions,
    });
  }
}

The construct is 100% customizable:

  • s3BucketProps: https://docs.aws.amazon.com/cdk/api/latest/docs/aws-s3-readme.html
  • originResponseLambdaProps: https://docs.aws.amazon.com/cdk/api/latest/docs/aws-lambda-readme.html
  • viewerRequestLambdaProps: https://docs.aws.amazon.com/cdk/api/latest/docs/aws-lambda-readme.html
  • cloudfrontDistributionProps: https://docs.aws.amazon.com/cdk/api/latest/docs/aws-cloudfront-readme.html

Resources created

This Construct will create

  • 1 Lambda@Edge function for the Viewer Request
  • 1 Lambda@Edge function for the Origin Response with permissions to write and read the S3 bucket. This lambda uses sharp library under the hood.
  • 1 Cloudfront Distribution (optional)
  • 1 S3 bucket (optional)

Roadmap

  • Add a way to keep the derrived images in a separate bucket and/or separate key prefix from the source images, apply Tags to the derrived images, and apply lifecycle policy to the derrived images so they will automatically be cleaned up and don't hang around forever.