リサイズ2019/12/04Webこのサイトのリニューアル以降、一部環境でスピードがどうにも上がらなかったため、取り急ぎ無駄に大きなリソースを最適化してみようと思い、まずはサムネイル画像をリサイズしてみることにしました。SharpSharpはnpmパッケージのみで完結している、シンプルな画像編集ライブラリです。入力はJPEG、PNG、WebP、TIFF、SVG、GIFに対応していて、出力はJPEG、PNG、WebP、TIFFに対応しています。縮小、トリミング、フォーマット変換、簡単な画像変換などは一通り網羅しているようです。公式としてはこの手のツールとしては名高いImageMagickよりも4倍〜5倍速いとのことでした。インストールyarnかnpmでインストールするだけです。私はまだyarnを使用しているので、下記のように実行しました。コード使い方に関してはすでにいろんな人がブログに書いているので、そちらを参考にするといいかと思いますが、本当にシンプルで、以下のように処理を記述するだけです。ここでは入力ファイルを指定していますが、ここにはBufferを渡すこともできるようです。})})()ちなみに上記の場合はアスペクト比を保ちつつ、高さが200pxになるようにリサイズするだけの処理です。引数をセットするだけである程度のことはできます。パラメータを指定することで、書き出し結果を変更させることができます。:アスペクト比を維持しつつ、縦中央部分が切り出される。:アスペクト比を維持しつつ、指定サイズ内に収まるようにリサイズされる。余ったスペースには背景色で塗りつぶされる。使ったのかあらためて私が今回やりたかったことは、ブログのアイキャッチ画像などのサムネイル自動生成です。下記のようなスクリプトを用意して、特定のディレクトリ配下の画像に対してサムネイル生成を行うようにしました。})})実行するタイミングについては、このサイトはデプロイ時に各画像の最適化を行なっていたので、その最適化の後に実行するようにしてみました。...}これで記事を書いた時にわざわざ自分でサムネイル画像を作らなくて済むようになりました。WordPressからVuePressに移行した時からのちょっとした悩みポイントだったのですが、Sharpがあっさりと解決してくれました。まとめ今回はリサイズのみで使いましたが、これ以外にもblurやsharpnessなどの画像変換にも対応していて、割と便利そうな印象を受けました。コードもとてもシンプルに書くことができるので、初心者にも優しいのではないでしょうか。細かい仕様を知りたい方は、ぜひ公式のGitHubリポジトリを覗いてみてください。Analyticsを利用しております。その目的において、Cookieを使用しています。