1.0UX TIMEShttps://uxdaystokyo.com/articles菊池 聡https://uxdaystokyo.com/articles/author/satoshi-kikuchi/rich600338<blockquote class="wp-embedded-content" data-secret="IkdZv7SmnH"><a href="https://uxdaystokyo.com/articles/powerful-image-optimization-tools/">パフォーマンス向上：超強力な画像最適化ツール集（18＋α選）</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/powerful-image-optimization-tools/embed/#?secret=IkdZv7SmnH" width="600" height="338" title="“パフォーマンス向上：超強力な画像最適化ツール集（18＋α選）” — UX TIMES" data-secret="IkdZv7SmnH" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2024/02/image-optimization-shop-cover-opt.png480697UX DAYS TOKYO2024に来日する Vitaly Freidmanは、Smashing Magazine の高速化を手掛けた本人です。彼のサイトのように高速化をしたいと思った時、誰でも最初にできることがあります。それは画像の最適化です。ツールを利用すればエクセルでプルダウンをつくるより簡単に最適化できます。https://www.smashingmagazine.com/2022/07/powerful-image-optimization-tools/ 画像のサイズを最適化することは、他のすべての領域を合わせたよりもパフォーマンスに大きな影響を与える可能性があります。 この記事では、Louis Lazaris（ルイス・ラザリス）が画像サイズを縮小するためのさまざまなツールを紹介します。 近年、ウェブ開発コミュニティは、画像がウェブページの最大のリソースであることが多いというメッセージを広く伝えています。 多くの開発者がウェブページの他の部分のパフォーマンスを最適化することに時間を費やしていますが、画像のサイズを小さくすることは、他のすべての部分の合計よりもパフォーマンスに大きな影響を与える可能性があります。 Smashing MagazineがImage Optimization（画像の最適化）（アディ・オスマニ著）という本を出版し、このトピックを詳しく扱っていることはすでにご存知かもしれません。 しかし、この投稿はこの本を補完するものであり、純粋に画像のサイズを小さくするために利用できるさまざまなツールに焦点を当てています。 WebUtils ImageCompressの一括圧縮  WebUtils Bulk Image Compressを使うと、画像を圧縮してWebP、JPG、PNG、AVIF、JXLに変換することができます。 ファイルサイズやファイル数に制限はないようですが、一括変換しようとすると処理に時間がかかります。 品質やサイズの調整も可能で、すべてクライアントサイドで行われます。 WebUtils Bulk Image Compressは、画像をWebP、AVIF、JPEG-XLに変換します。 Compressor.Io Compressor.ioでは、JPEG、PNG、SVG、GIF、WebPを、1ファイルあたり10MBまでの非可逆圧縮または可逆圧縮で最適化できます。 圧縮をカスタマイズしたり、より大きなファイルを使用したい場合は、プレミアムプランを取得する必要があります。 この場合、圧縮はサーバー側で行われるようなので、より高速な結果が得られるでしょう。 Compressor.io はサーバー上で画像を圧縮します。 Imagecompresser.Com # Imagecompresser.comでは、同時に10ファイルまでアップロードでき、PNG、JPEG、WebP、JPG、GIF形式をサポートしています。 画像1枚あたりのファイルサイズに制限はないようなので、10枚以下の大きなファイルには効果的でしょう。 Imagecompresser.com　経由でファイルを同時にアップロードします。 AnyWebP AnyWebPはWebP形式の画像変換に特化したソフトで、JPEG、PNG、ICOに出力できます。 ファイルサイズや画質でカスタマイズできます。 また、あらゆるファイル形式（TIFF、PSD、BMPなど）をWebPに変換するオプションもあります。 このツールは、一括変換できるMacとWindows用のオフラインネイティブアプリも提供しています。 いずれにせよ、ファイルがサーバーにアップロードされることはありません。 AnyWebPのようなツールは、ワークフローの改善に役立ちます。 Compressimage.Io Compressimage.ioは、ファイルサイズやファイル数に制限なく、完全にオフラインで画像を最適化することができます。 唯一の制限は、JPEGとPNGしか圧縮できないことです。 カスタムオプションでは、圧縮レベル、画像サイズ、WebPに変換するかどうかを調整できます。 また、ファイル名にカスタム接尾辞を追加することもできます。 Compressimage.ioで信頼性の高い画像最適化を試してみてください。 JPEG.Rocks JPEG.rocksは、その名の通り、プライバシーに配慮したJPEG画像最適化ツールで、完全にクライアントサイドでオープンソースです。 ファイルサイズやファイル数に制限はないようで、出力ファイルの品質をカスタマイズできます。 JPEG.rocksはプライバシーに配慮したJPEGオプティマイザで、画像を完全にブラウザ内で処理します。 Compressor.Js Compressor.jsは、このリストの他のツールとはかなり異なります。 画質、サイズ、MIMEタイプなどをカスタマイズできる約12種類の設定が含まれています。 唯一の大きな制限は、一度に1つのファイルを実行する必要があることです。 そのため、一括リサイズには向きませんが、特定の画像に対して特定の最適化を行いたい場合に有効です。 Compressor.js は、ブラウザのネイティブ canvas.toBlob API を使用して圧縮処理を行います。 Squoosh SquooshはChrome Labsチームによって設計されました。 ウェブアプリは1枚の画像に制限されていますが、サイズの縮小、カラーパレット、圧縮方法の選択、圧縮品質レベル、その他多数の高度な設定のためのいくつかのオプションが含まれています。 このツールを駆動するエンジンは、一括処理用のAPIまたはCLIとしても利用可能です。 Squoosh ファイルサイズを縮小し、高品質を維持することができます。 SVGOMG SVGOMGは特にSVGグラフィックスのサイズを縮小するためのものです。 これはNode.jsベースのツールであるSVGOのGUIです。 SVGを生成するプログラムの多くは、画像を生成するSVGコードに冗長で無駄な情報を含んでいるため、SVGオプティマイザは役に立ちます。 絶対にSVGOMGを試してみたくなるでしょう！ Optimizilla Optimizillaは、JPEG、GIF、PNG画像のサイズを縮小するために非可逆圧縮を使用しています。 最大20枚の画像をアップロードすることができ、ダウンロードする前に各画像の圧縮レベルと品質をカスタマイズするオプションがあります。 Optimizilla は、JPEG、GIF、およびPNG画像を可能な限り最小のサイズに縮小します。 Shrink Me Shrink Me は、JPEG、PNG、WebP、またはSVG画像を、目に見える品質低下なしに一括最適化することができます。 ファイル数やファイルサイズに制限はありませんが、ファイルサイズが大きいと圧縮処理に時間がかかります。 Shrink Me ツールを使用すると、視覚的な品質を損なうことなく画像のファイルサイズを縮小できます。 JPEG Stripper # JPEG Stripper は、不要なデータを削除してJPEGファイルを最適化します。 一度にアップロードできる画像は1枚だけなので、JPEG形式の画像が数枚ある場合にのみ有効です。 Toolsleyによって作成されたJPEG Stripperは、画質に影響を与えることなくJPEGからすべてのメタデータを削除するために使用できるツールです。 Shrink Media Shrink Mediaは、PNG、JPEG、WebP画像を5000x5000の解像度まで最適化することができ、iOSまたはAndroid用のモバイルアプリとしても利用できます。 インタラクティブなスライダーを使用して、品質レベルと写真の寸法を変更できます。 画像のURLを貼り付けることもできますが、このツールでは一度に1つの画像しか最適化できません。 Shrink Mediaは、無料で画像のサイズを縮小することができます。 OptimizeImages OptimizeImages は、SVG、PNG、JPEG、WebP、GIF、AVIF のサイズを縮小し、WebP または AVIF に変換するオプションも提供します。 最大 30 の画像を最適化し、圧縮品質オプション (推奨、中、超) を選択します。 OptimizeImagesはあなたのウェブサイトをスキャンし、最適化が必要な画像をチェックします。 ImagesTool.Com ImagesTool.comには、さまざまな画像操作ツールが含まれています。 サイズの調整、変換、画像の圧縮などができます。 JPEG、WebP、SVG、GIF、APNGに対応。 すべてクライアントサイドで行われ、ロスレス圧縮とカスタム圧縮を選択できます。 最適化できるファイル数に制限はなく、フォルダ単位でのアップロードや画像の貼り付けも可能です。 ImagesTool.comに行けば、ファイルをアップロードせずに画像を処理することができます。 AVPress AVPressは、動画ファイルやGIFアニメーションの最適化に特化しているため、少し異なります。 1つのビデオまたはGIFを一度に処理することができ、選択したファイルに適用できるいくつかのカスタマイズと出力設定が含まれています。 Addy Osmaniによって構築されたAVPressは、100％クライアントサイドです。 AVIF Converter AVIF Converterを使えば、あらゆる画像フォーマットを、WebP、JPEG、PNG、GIFよりも圧縮率の高い次世代ファイルフォーマットであるAVIFに変換することができます。 このアプリはファイル数やファイルサイズに制限はないようですが、AVIFフォーマットはまだすべてのモダンブラウザでサポートされていないことに注意してください。 AVIF Converterは無料で高速に画像をAVIFに変換することができます。 TinyPNG TinyPNGは、WebP、PNG、JPEGファイルを最適化する古いツールです。 一度に20個まで、それぞれ5MBまでのサイズをアップロードできます。 TinyPNGはスマートな非可逆圧縮技術を使って、WEBP、JPEG、PNGファイルのファイルサイズを縮小します。 画像最適化のためのビルドツールとCLIツール ここまでに挙げたツールは、手動でバッチ処理を行ったり、一度に数枚の画像を最適化したりするのには良い選択肢です。 しかし、大規模なプロジェクトでは、継続的なワークフローやビルドプロセスの一部として組み込まれるように設計された別のツールの使用を検討することをお勧めします。 以下に、検討可能なオプションをいくつか紹介しよう SVGOは人気のあるSVG最適化ツールで、先に述べたSVGOMGの中核をなしている libSquoosh はSquoosh APIで、画像をその場で最適化するJavaScriptプログラムを構築できます Squoosh CLI Squooshを実行するエンジンを使用するためのコマンドラインツールです pngquant は PNG 画像を最適化するためのコマンドラインユーティリティです esbuild-squoosh imagemin は古いJavaScriptプロジェクトで、プログラムで画像を最適化することができます。 皆さんが使っているビルドツールやタスクランナーによっては、前述のimageminがプラグインとして提供されている場合があります。 ビルドツール別のimageminプラグインをいくつか紹介します rollup-plugin-imagemin は、Rollupで画像を自動的に最適化するimageminを使用したプラグインです。 parcel-plugin-imagemin は、Parcel ビルド用に imagemin を使用する別のプラグインです。 grunt-contrib-imagemin は、まだGruntを使用している人向けの別のimageminプラグインです。Gruntは古いタスクランナーツールです。 gulp-imagemin はGulpビルドでimageminを使用します。 ImageMinimizerWebpackPlugin は、人気のあるJavaScriptバンドラーであるwebpackと一緒に使用するための別のimageminプラグインです。 snowpack-plugin-imageminは、モダンなフロントエンドビルドツールであるSnowpackと一緒に使用するためのimageminプラグインです。 最後に、画像処理やその場での最適化が必要なネイティブアプリを作る場合、C言語プログラミングの選択肢をいくつか紹介しよう MozJPEGはJPEG画像を最適化するためのプログラムで、グラフィックプログラム、画像処理ツール、および同様のアプリケーションでライブラリとして使用することを目的としていますjpegoptimはJPEGファイルを最適化するユーティリティです libvipsは画像を処理するためのライブラリです。 他のツール 画像最適化のための他のツールやリソースもチェックしてみるとよいでしょう。 これらは必ずしも上記のカテゴリに分類されるわけではありませんが、あなたの特定のユースケースに合うかもしれません。 QOIQuite OK Image Formatは、画像をPNGと同程度のサイズに可逆圧縮する一方で、20倍から50倍の高速エンコードと3倍から4倍の高速デコードを提供する画像フォーマットです。 JXLツールではなく、JPEG XL画像フォーマットを中心としたコミュニティサイト。 UPNG.jsこれは人気のPhotopeaアプリを支えるPNGエンジンであり、非可逆および可逆最適化を提供する高度なPNG/APNGデコーダーおよびエンコーダーです。 OptimusJPEG、PNG、WebP形式をサポートする画像の圧縮、最適化、変換を可能にするネイティブデスクトップアプリ。 ImageOptim画像ファイルサイズを縮小するためのMacアプリとSketchプラグイン。 pngcrushコマンドラインで使えるレガシーな画像圧縮ツール。 TrimageJPEGとPNG画像を最適化するためのネイティブのクロスプラットフォームアプリとコマンドラインインターフェイス。 PNGGauntletPNGを最適化し、様々なフォーマットをPNGに変換する、Windows、Mac、Linux用の設定可能な古いネイティブアプリ。 PngyuPNG最適化のためにpngquantを使用するもう一つのネイティブアプリ。 まとめ ウェブ、ネイティブ、またはモバイルアプリ用に、さまざまな画像フォーマットを最適化するための他のツールをご存知でしたら、コメントでお気軽にお知らせください。 とりあえず、このツールのリストが、画像最適化の必要条件を満たすために必要なものを提供するのに十分であることを願っています。