ブログこのサイトについて自己紹介お問い合わせフロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。画像圧縮3種の神器「ImageAlpha」「ImageOptim」「JPEGmini」2021年9月13日2022年6月27日webのこと画像処理TwitterFacebookHatenaPocketwebで書き出す際は、なるべく画像の容量を軽くした方がユーザーに優しいサイトになります。ユーザーとしてはギガも減りづらくなりますし良いところが多いです。最近ではスマホで見ることも多く、通信が制限されていたりするとなかなか画像が表示されないなどが起こりがちです。私が画像圧縮をする際に使っているツールを紹介していきます。ImageAlphaImageAlphapngを圧縮するために使うツールです。Photoshopでpngを書き出すと、フルカラーと256色の二択になっちゃうのですがImageAlphaを使うと細かく色数をしていできます。便利な点として、半透明の情報も維持しながら、色数を絞ることができます。Photohopですと半透明の情報を残す場合はフルカラーで書き出す必要がありどうしても容量が重くなってしまいます。pngを扱う際はこちらで一度、圧縮するとよいですね!下記事情で、最新のMacでは使用できなくなっています。macOS.このアプリケーションはサポートされなくなりました。かわりにsquooshを使って圧縮するようにしています。JpegMiniJpegMini名前どおりjpegを圧縮する際に最強のJpegminiです。使い方は、jpegをドラック&ドロップするだけですね。(ドラッグ&ドロップした時点で元ファイルが変更されるので少し注意です。)元画像からほぼほぼ画質を変更することなくかなりサイズを下げてくれます。こちらもwebに公開する際は一度通してからwebにアップロードするとよいです!ImageOptimImageOptimImageOptimはpng,jpg,gif全部の圧縮に対応しています。上のImageAlpha、JpegMiniにかけた後さらにかけると少しだけ圧縮できたりしますので。私はそれぞれを使った後に、最終的にImageOptimに通すようにしています。こちらも使い方としては、ドラッグ&ドロップで実行されます。(こちらもドラッグ&ドロップした時点で元ファイルが変更されるので少し注意です。)まとめバナーなどを作る際でも、画像サイズを気にする機会があるかと思います。webサイトは軽くすると見やすいサイトになるので圧縮は気をつけていきたいですね!今回は自分が画像を圧縮する際に使っているツールを紹介しました。次の記事web制作を勉強する時に、おちいりがちなミス・考え方2021年9月14日おすすめの本Javascriptを勉強する際に読んでおくと良いなと思った本たちです。リーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。bloom」2021年9月20日フロントエンドやデザインを教えるメンター(Menta)はじめました。2021年9月6日サイトのことWebのこと、Youtubeのこと、3Dのこと、お金のこと、お買い物情報など、興味があることを深堀って記事にしてます。