2020年9月2日

【Webデザイナー必須】Squoosh.appで簡単画像編集

Webサイトの制作で大切なことはSEO対策、マーケティング力、サイトのデザインなどと色々ありますが、どれをとっても切り離せないのがサイトに挿入する写真やアイコンなどの画像要素です。さらに画像もただ挿入すればいいだけでなく、容量を落としてサイト自体を重くしないようにしたり、画質を落とさないで圧縮したりと必要な工程がいくつもあります。今回はWebサイト上で画像編集や圧縮さらに拡張子の変更を行えるWebアプリ「Squoosh.app」を紹介します。

Squoosh.appとは

Squooshは無償で提供されるWeb上で画像の圧縮ができるアプリケーションです。GoogleChromeLabsチームが実験的に開発していて、GoogleChromeサイトのソース検証で画像の容量的な改善が確認されるとSquoosh.appを推奨されるためそこで存在を知った人もいるかと思います。
また圧縮はブラウザ上で行われ、クライアント側のリソースで実行されるのでセキュリティ的な面でも安心して利用できる設計になっています。
Squoosh.app(https://squoosh.app)

Squoosh.appの使い方

Squoosh.appにアクセスすると以下のページが表示されます。

squooshのタイトル画面のスクリーンショット

この画面上に編集したい画像をドラッグ&ドロップします。

Squoosh.appに画像をドラッグ&ドロップした時のスクリーンショット

この時左下に表示されている数値が編集前の画像のサイズです。右下に表示されている数値が編集後の画像のサイズです。

squooshの操作説明画像

デフォルトで75%圧縮される設定になっているのでドラッグ&ドロップしただけの状態でも画像によってはサイズが減ります。

Squooshで圧縮率を変更しているところのスクリーンショット右下のスライドバーを左右に動かすと圧縮率を変更できます。例えば3まで下げると数秒のロード後に右下の画像サイズが下がっていることがわかります。

Squoosh.appの使い方用画像

画像の上に上下に割って表示されているスライダーの左と右で圧縮前と圧縮後の画像の変化具合を即座に確認することができます。

Squooshのスライドバーを動かした時のスクリーンショット

スライダーを動かして動的に任意の場所を確認できます。

Squooshの基本的な画像の編集をしているところのスクリーンショット

圧縮率変更項目の上、Editのチェックボックスをクリックすると画像のサイズや色数などの画像の基本的な要素を変更することができます。

またCompress欄から出力するファイル形式も選択することができます。オリジナル画像の画像形式のみを変更したい場合は左のCompress欄から変更して左側の出力ボタンで出力することでできます。

Squooshでオリジナル画像の画像形式を変更しているところのスクリーンショット

まとめ

以上がWebアプリSquooshの説明でした。ブラウザ上で編集ができるのでChromeやSafariなどのモダンブラウザがインストールされているPCならすぐに使用は大きなメリットです。ブラウザ上でスクリプトが実行されているため、メモリ使用が大きくなるのでPCの基本スペックが低い方は注意して使う必要があります。

コメントを書く

メールアドレスが公開されることはありません。