オンラインで作業しているときは、画像を避けていました。画像の処理と最適化は、不正確で時間がかかる可能性があります。
それから私は私の心を変えたいくつかのコマンドを見つけました。 Webページを作成するために、私はJekyllを使用しているので、それを指示に含めました。ただし、これらのコマンドは他の静的サイトジェネレーターでも機能します。
Linux上のイメージコマンド
その他のLinuxリソース
- Linuxコマンドのチートシート
- 高度なLinuxコマンドのチートシート
- 無料のオンラインコース：RHELの技術概要
- Linuxネットワーキングのチートシート
- SELinuxチートシート
- Linuxの一般的なコマンドのチートシート
- Linuxコンテナとは何ですか？
- 最新のLinux記事
私にとってすべての違いをもたらしたコマンドは、optipngです。 、jpegoptim 、そしてもちろん、由緒あるimagemagick 。これらを組み合わせることで、画像の処理を簡単に管理したり、自動化したりすることができます。
これらのコマンドを使用してソリューションを実装した方法の概要は次のとおりです。 static/imagesに記事の画像を配置しました フォルダ。そこから、すべてのPNGおよびJPG画像の2つのコピーを生成しました：
- 422x316のトリミングされたサムネイルバージョン
- 1024x768の大きなバナーバージョン
次に、各コピー（サムネイルとバナー）を独自のフォルダーに配置し、フォルダーパスにJekyllのカスタム変数を利用しました。これらの各手順の概要を以下に示します。
インストール
私の解決策に従うために、すべてのコマンドがインストールされていることを確認してください。 Linuxでは、optipngをインストールできます 、jpegoptim 、およびimagemagick パッケージマネージャーを使用します。
Fedora、CentOS、Mageiaなどの場合：
$ sudo dnf install optipng jpegoptim imagemagick
Debian、Elementary、Mintなどの場合：
$ sudo apt install optipng jpegoptim imagemagick
macOSでは、MacPortsまたはHomebrewを使用します。
brew install optipng jpegoptim imagemagick
Windowsでは、Chocolateyを使用します。
サムネイルとバナー用のフォルダの作成
コマンドをインストールした後、static/imagesの下に新しいフォルダを作成しました 。生成されたサムネイルはimg-thumbsに配置されます 、およびバナーはimg-normalに入ります 。
$ cd static/images
$ mkdir -p img-thumbs img-normal
フォルダを作成したら、すべてのGIF、SVG、JPG、およびPNGファイルを両方のフォルダにコピーしました。サムネイルとバナー画像には、GIFとSVGをそのまま使用しています。
$ cp content/*.gif img-thumbs/; cp content/*.gif img-normal/
$ cp content/*.svg img-thumbs/; cp content/*.svg img-normal/
$ cp content/*.jpg img-thumbs/; cp content/*.jpg img-normal/
$ cp content/*.png img-thumbs/; cp content/*.png img-normal/
サムネイルの処理
サムネイルのサイズを変更して最適化するには、3つのコマンドを使用します。
mogrifyを使用しています ImageMagickからのコマンド JPGとPNGのサイズを変更します。サムネイルを422x316にしたいので、コマンドは次のようになります。
$ cd img-thumbs
$ mogrify -resize 422x316 *.png
$ mogrify -format jpg -resize 422x316 *.jpg
次に、optipngを使用してPNGを最適化します およびjpegoptimを使用したJPG ：
$ for i in *.png; do optipng -o5 -quiet "$i"; done
$ jpegoptim -sq *.jpg
上記のコマンドの場合：
-
optipngの場合 、-o5スイッチは最適化のレベルを設定します。0が最低です。 -
jpegoptimの場合 、-sすべての画像メタデータを削除し、-qクワイエットモードを設定します。
バナーの処理
バナー画像は、サムネイルの処理と基本的に同じ方法で処理しますが、バナーの場合は1024x768のサイズです。
$ cd ..
$ cd img-normal
$ mogrify -resize 1024x768 *.png
$ mogrify -format jpg -resize 1024x768 *.jpg
$ for i in *.png; do optipng -o5 -quiet "$i"; done
$ jpegoptim -sq *.jpg
Jekyllでのパスの構成
img-thumbs ディレクトリにサムネイルが含まれるようになりました。およびimg-normal バナーが含まれています。生活を楽にするために、Jekyll _config.ymlで両方をカスタム変数に設定しました 。
content-images-path: /static/images/img-normal/
content-thumbs-images-path: /static/images/img-thumbs/
変数の使用は簡単です。サムネイルを表示したいときは、content-thumbs-images-pathを前に付けます 画像に。バナー全体を表示したい場合は、content-images-pathを前に付けます 。
{% if page.banner_img %}
<img src="{{ page.banner_img | prepend: site.content-images-path | \
prepend: site.baseurl | prepend: site.url }}" alt="Banner image for \
{{ page.title }}" />
{% endif %}のバナー画像 結論
最適化コマンドに加えることができるいくつかの改善があります。
rsyncの使用 変更されたファイルのみをimg-thumbsにコピーします およびimg-normal 明らかな改善の1つです。そうすれば、ファイルを何度も再処理することはありません。これらのコマンドをGitのpre-commitフックまたはCIパイプラインに追加することも、もう1つの便利な手順です。
画像のサイズを変更して最適化してサイズを縮小することは、ユーザーとWeb全体にとってメリットがあります。画像サイズを縮小するための次のステップはwebpかもしれません。
有線で送信されるバイト数が少ないということは、二酸化炭素排出量が少ないことを意味しますが、それは別の記事です。 UXの勝利は今のところ十分です。
この記事は元々著者のブログに投稿されており、許可を得て再公開されています。