chlonolog

web, digital gadgets, and more.

Macの標準機能で画像のサムネイルを作る

せっかく静的サイトに切り替えても、細かなチューニングをしなければ片手落ちというものです。手をつけたからにはできるだけページの読み込みを早くしたい、と思うのが人情。

表示速度をアップしたい!

とりあえずはできるところから……と、ヘッダ部分で読み込んでいたファイルを条件分岐で極力必要なページにのみ読み込むようにしてみました。
Font AwesomeもCDNではなくローカルに展開し、そちらを読み込むようにしてあります。
CSSの中身については、以前に比べればだいぶすっきりさせられたのでよしとしておきます。できればBootstrapの読み込みも選別したいとは思うものの、要/不要を全部確認しないといけないので、ちょっと先送りに。


そうだ、サムネイルを作ろう

画像に関してはずっと無精をしてimgにwidth指定するだけで済ませてきたのですが、せっかくなので全画像のサムネイルを作成することにしました。
……といっても、案外簡単に終わりました。なんてこった。


使うのは標準のプレビューのみ

まずは画像ファイルの複製を、サムネイル格納用の適当なフォルダに放り込みます。
そしてFinder上でリサイズしたい画像を複数選択し、右クリックから「このアプリケーションを開く>プレビュー」を選択。

まとめてプレビューに放り込みます

プレビューが開いたら、左側のサムネイルをCommand+Aで全選択(もしくはリサイズしたい画像だけCommand+クリックで選択)し、

リサイズしたい画像を選択

メニューの「ツール>サイズを調整」を選択。

サイズを調整

サイズ調整画面

幅か高さに数値を入力して「OK」すれば、指定した大きさにまとめてリサイズしてくれます。
縦長の画像と横長の画像は別々にリサイズする必要がありますが、別途アプリを準備したり、ひとつずつ変換したりする必要はありません。
今まで面倒臭いと思っていたのが馬鹿みたいな簡単さでした。標準機能でできるとは……ありがたや。


ImageOptimはいいぞ

あとはまとめてImageOptimに放り込めば、アップロードの準備は完了です。
ImageOptimは、画像内のいらないタグ(EXIFとか)をざっくり削除してファイルサイズを圧縮してくれるすぐれものアプリです。もはやないと途方に暮れるレベルの代物です。

本文中のリンクも全部差し替える必要がありましたが、そこは気合で終わらせました。

コメント

© 2018 chlono