DEV Community

Cover image for img2amp-img is img convert to amp-img
Yuki Shindo
Yuki Shindo

Posted on

img2amp-img is img convert to amp-img

img2amp-img is npm package of img convert to amp-img

I have recently created and released a new npm package.

npm - img2amp-img

This is a very simple tool that will convert HTML img tags into amp-img tags.

I needed to convert the amp-imp tag in the build process of Habanero Bee, an AMP-compatible static site generator that I'm developing myself.

I've written about Habanero Bee in this post, and I hope you'll read it.

However, to complete the conversion of the amp-img, it is not simply a matter of converting the tag string.

As described in the amp-img documentation, you need to specify the image size.

So I decided to fetch the target image and get its size during the conversion.

Get image size

This strategy seems to be working well so far.
However, there are still very few use cases, so it will be interesting to see what happens when the patterns are used in unusual ways.

Of course, this tool is open source and available to the public. If you are interested in it, please take a look at the repository.

shinshin86 / img2amp-img

How to use img2amp-img

I would like to write about the usage of img2amp-img at the end.

img2amp-img is a tool that is designed to be used in a Node.js environment.
Note that this tool cannot be used in the frontend. It is used on the server side.

Install

npm install img2amp-img
# or
yarn add img2amp-img
Enter fullscreen mode Exit fullscreen mode

Usage

const img2AmpImg = require('img2amp-img');

(async () => {
  const imageTag = '<img src="https://dummyimage.com/200x100" alt="sample image" />';
  const ampImgTag = await img2AmpImg(imageTag);
  console.log(ampImgTag);
})();
Enter fullscreen mode Exit fullscreen mode

The output of this code will look like this.

<amp-img
  alt="sample image"
  src="https://dummyimage.com/200x100"
  width="200"
  height="100"
  layout="responsive"
></amp-img>
Enter fullscreen mode Exit fullscreen mode

layout option

It is also possible to specify the layout attribute of amp-img. If nothing is specified, responsive will be specified.

'responsive'
'fill'
'fixed'
'fixed-height'
'flex-item'
'intrinsic'
'nodisplay'
Enter fullscreen mode Exit fullscreen mode

layout option example

const img2AmpImg = require('img2amp-img');

(async () => {
  const imageTag = '<img src="https://dummyimage.com/200x100" alt="sample image" />';
  const ampImgTag = await img2AmpImg(imageTag, 'fixed-height');
  console.log(ampImgTag);
})();
Enter fullscreen mode Exit fullscreen mode

For example, if you specify fixed-height as an option, the output will look like the following.

<amp-img
  alt="sample image"
  src="https://dummyimage.com/200x100"
  width="auto"
  height="100"
  layout="fixed-height"
></amp-img>
Enter fullscreen mode Exit fullscreen mode

For more information about the option, please refer to the official AMP website.
amp-img - amp.dev

If you get a chance, try it.
Thank you for reading to the end!

Discussion (0)