ImageMagickによる効果的な画像サイズ変更

現在、 レスポンシブデザインとレスポンシブ画像を導入する必要に直面しているサイトが増えています。この点で、すべての画像を効果的にサイズ変更する必要があります。 システムは、要求に応じて各ユーザーに適切なサイズの画像が送信されるように機能する必要があります-小さな画面を持つユーザーには小さく、大きな画面には大きいです。



したがって、Webは正常に機能しますが、さまざまなサイズの写真をさまざまなユーザーに配信するには、最初にこれらすべての写真を作成する必要があります。



多くのツールはサイズを変更しますが、レスポンシブ画像に伴うパフォーマンスの向上を無効にする大きなファイルを作成することが多すぎます。 優れた品質を維持し、小さなファイルを取得しながら、コマンドラインツールであるImageMagickを使用して画像のサイズをすばやく変更する方法を見てみましょう。

大きな写真==大きな問題

平均的なWebページの重量は2 MBで、そのうち2/3は写真です。 何百万人もの人々が3Gを介してオンラインにアクセスしています。 これらの場合の2MBサイトはひどく動作します。 高速接続でも、そのようなサイトはトラフィック制限を使い果たす可能性があります。 Webデザイナーと開発者の仕事は、ユーザーの生活を簡素化し、改善することです。







非常に小さなサイトでは、すべての画像のバリエーションを簡単に保存できます。 しかし、もしあなたが彼らのdofigを持っているとしたら？ たとえば、店舗では数十万枚の写真が存在する可能性があります-手動でバリアントを作成しないでください。

Imagemagick

25年前のコマンドラインユーティリティは、同時にフル機能の画像エディターでもあります。 これには膨大な数の機能があり、その中には、写真の高速で自動のサイズ変更があります。 しかし、デフォルトの設定では、ファイルは非常に大きくなることがよくあります-ピクセルは少ないですが、ボリュームが元のサイズよりも大きい場合があります。 次に、問題が何であるかを説明し、それを解決するために必要な設定を示します。

画像のサイズ変更の仕組み

定義により、画像のサイズを変更すると、画像のピクセル数が変わります。 増加すると、出力は入力よりも多くのピクセルを持ちます。 減少-反対に。 課題は、異なるピクセル数を使用して元の画像の内容を保存する最良の方法です。



画像を拡大すると描写が簡単になりますので、始めましょう。 4x4ピクセルの正方形の画像を考えてみましょう。これを8x4に倍増させます。 実際、この写真を撮り、新しいグリッドに引き込みます-これはリサンプリングと呼ばれます。 8x8で4x4の画像をサンプリングするには、48個の余分なピクセルをどこかに挿入する必要があります。 それらはある種の色を持たなければなりません-その選択のプロセスは補間と呼ばれます。 サンプリングするとき、補間の動作を選択するアルゴリズムは、サンプリングフィルターと呼ばれます。







このようなフィルターは多数あります。 最も簡単な方法は、任意の色の4つの行と4つの列を追加することです。 さて、赤と言います。 これは、背景色（赤）が空の場所に表示される場合の背景補間になります。 Photoshopでは、これは「画像」→「画像サイズ」ではなく「画像」→「キャンバスサイズ」で行われます。



もちろん、これは私たちには合わないでしょう。 写真は元の写真とは異なります。 背景補間は、新しいピクセルを追加するためにのみ使用され、それでもサイズ変更の際には役に立ちません。







もう1つの単純な補間（新しいピクセルの色を隣接ピクセルと同じにする）は、最も近い隣接ピクセルに対する補間です。 写真、特に私たちの広場では、結果はずっと良くなります。







ダウンサンプリング、つまり画像を縮小すると、最近傍を補間することはそれほど容易ではありません。 数学的目的のために、分数ピクセルで操作することが可能であることを受け入れなければなりません。 まず、元の画像に新しいグリッドが適用されます。 ピクセルは小さくなったり大きくなったりするため、いくつかのピクセルにはいくつかの色が含まれています。



ただし、実際のピクセルには1色しかありません。 新しいグリッドの各ピクセルの結果の色は、その中心の色によって決まります。 そのため、減少するときの最近傍の補間は、ポイントサンプリングと呼ばれることがあります。







しかし、これが線や正方形よりも複雑なものである場合、そのような方法ではギザギザの正方形の画像が生成されます。 速く動作し、小さなファイルを生成しますが、見た目が悪いです。



ほとんどのフィルターは、最近傍の補間バリエーションを使用します-複数のポイントでスポットサンプリングを行い、何らかの方法でそれらの特定の平均色を計算します。 バイリニア補間では、色の加重平均が考慮されます。







しかし、このようなフィルターは、丸みを帯びたエッジとともに新しい色を追加するため、ファイルサイズに影響します。 元の画像には2色しかありませんでしたが、現在はさらに多くの色があります。 その他の条件が同じであれば、色が多いほどファイルは重くなります。



そして、これは私たちにとって何を意味するのか



品質を損なうことなく、何とか色数を減らす必要があります。 これは、フィルターの選択によって最も影響を受けますが、他の設定も影響します。

ImageMagickの最適な設定

ImageMagickの基本

ImageMagickには多くの設定と機能があり、正しいものを見つけるのはかなり難しいです。 変換とmogrifyの2つの関数に興味があります。 それらは同様のアクションを実行しますが、mogrifyは一度に複数のファイルを処理し、一度に1つずつ変換します。



簡単な操作：

convert input.jpg -resize 300 output.jpg
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、IMはinput.jpgを取得し、ピクセル幅にサイズ変更して、結果をoutput.jpgに保存します。 -resize 300関数は、多くの関数の1つの例です。 これらはすべて、-functionNameオプションという1つの形式です。



mogrifyを少し追加して使用することもできます。

 mogrify -path output/ -resize 300 *.jpg
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、IMはすべてのJPEGファイルを現在のディレクトリ（* .jpg）から取得し、幅を300ピクセルにサイズ変更して出力ディレクトリに保存します。



機能は組み合わせることができます：

 convert input.jpg -resize 300 -quality 75 output.jpg
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、input.jpgのサイズを300ピクセルに変更しますが、output.jpgに保存する前にJPEG品質を75に設定します。

テストと結果

さまざまなIM設定をテストしながら 、Photoshopの「Web用に保存」オプションと区別されないように、品質を犠牲にすることなくファイルのサイズを縮小しようとしました。 テストには主観的な意見と客観的な意見の両方を使用しました- 構造の違い （構造の相違点、DSSIM）を測定しました。 DSSIMは2つの写真を比較し、評価を与えます。 スコアが低いほど、より類似しています。 0はIDを意味します。 私は0.0075以下のDSSIMスコアを達成しました。 また、昨年のある調査では、通常、DSSIMが0.015未満の人は目の写真で区別できないことがわかりました。



JPEG形式とPNG形式でさまざまなサイズのさまざまな画像をテストした結果、次のIM設定では、Photoshopの出力とほとんど区別できない最小の結果が生成されるという結論に達しました。

 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2 -thumbnail OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None -posterize 136 -quality 82 -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB -strip INPUT_PATH
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それらをより詳細に分析しましょう。

MogrifyまたはConvert

IMは変換を使用してイメージを1つずつ処理し、バッチ処理には通常mogrifyが必要です。 理想的な世界では、彼らの仕事の結果は一致するはずです。 残念ながら、 convertにはエラーがあり、そのため設定の一部が無視されるため（-define jpeg：fancy-upsampling = off）、mogrifyを使用する必要がありました。

再サンプリング

IMのサンプリングフィルターの選択は、何らかの理由で混乱しています。 これを行うには3つの方法があります。

• サイズ変更機能を選択することにより
• -filterオプションを使用する
• または-interpolateオプション

12種類のサイズ変更機能の例



最も明らかな使用法は-resizeですが、結果は大きすぎます。 11種類の機能を確認しましたが、サムネイルはサイズと品質の両方で縮小に最適です。 この関数は3段階で機能します。

1. 独自の組み込みフィルターを持つ–sample関数を使用して、必要なサイズの5倍のサイズに画像のサイズを変更します
2. 次に、-resizeを使用して目的のサイズに変更します
3. 画像からメタデータを削除します

つまり、画像の幅を500ピクセルに縮小すると、-thumbnailは最初に-sampleを使用して2500にサイズ変更します。 次に、IMは-resizeを使用して2500から500にサイズを変更します。 そして最後にメタデータを削除します。



サンプリングフィルターを選択する2番目の方法は、-filterを使用することです。 一部の関数には組み込みのフィルターがあり、他の関数には変更可能なデフォルトのフィルターがあります。 –thumbnailの2番目のステップでは、–resize関数が使用されるため、–filterが使用されます。



-filterの31の設定を確認し、Triangleを使用して最良の結果を得ました。 このフィルターは、双線形補間とも呼ばれます。 隣接するピクセルから加重平均色を計算します。 -define filter：support = 2設定として、隣接するピクセルの領域を設定するのが最善であることがわかりました。



フィルターを選択する3番目の方法は-interpolateですが、-thumbnailを使用する場合は無視されます。



とりわけ、IMはデフォルトでJPEGファンシーアップサンプリングと呼ばれるいくつかの機能を使用します。これはより良い品質のJPEGを生成しようとします。 写真のサイズを大きくするだけで、品質の違いは無視できるほど小さいため、-define jpeg：fancy-upsampling = offでオフにすることをお勧めします。

研ぎ

サイズを変更すると、写真がわずかにぼやけるので、同じフォトショップはさまざまなテクニックを使用して明瞭度を高めます。 アンシャープフィルターをお勧めします。これは、名前にもかかわらず、画像の明瞭さを向上させるものです。-unsharp0.25x0.25 + 8 + 0.065。



フィルターは、 ガウスぼかしが最初に適用されるように機能します。 最初の2つの数値は、半径とシグマです（この場合、それぞれ0.25ピクセル）。 ぼかしの後、フィルターはぼやけたバージョンと元のバージョンを比較し、明るさが指定されたしきい値（0.065）より大きく異なる場合、指定された力のシャープネスの増加が適用されます（8）。

減色

前述したように、画像のサイズを変更するときにファイルサイズが大きくなる主な理由は、新しい色の追加です。 したがって、品質を損なうことなく、その数を減らすようにする必要があります。



1つの方法は、グラデーションをクリアカラーのセットで置き換えるポスタリゼーションです。 ポスタリゼーションにより、色レベルの数が減ります-これは、赤、緑、青のチャンネルに残っているオプションの数です。 画像の色の総数は、これらのチャンネルの色の組み合わせになります。



ポスタリゼーションはファイルサイズを縮小できますが、品質も低下します。 品質をあまり損なうことなく小さなファイルを取得できる番号136を提案します。





オリジナル





減色



ディザリングは、カラーセットにノイズを追加してより多くの色の錯覚を作成することにより、色を減らす効果を軽減するプロセスです。 理論的には、これは良いアイデアです。





ディザリング後



残念ながら、IMにはエラーがあり、ディザリング時に画像の透明度が損なわれます。 したがって、-dither Noneを使用して無効にすることをお勧めします。 幸いなことに、それがなくても、ポスタリゼーションの結果はかなり良く見えます。





IMのディザリングエラー

色空間

色空間は、間接的に画像内の色の数を指します。 このスペースにより、使用可能な色が決まります。 次の図は、ProPhoto RGB色空間にAdobe RGBよりも多くの色が含まれており、Adobe RGBにはsRGBよりも多くの色が含まれていることを示しています。 そして、それらはすべて目に見えるよりも少ない花が含まれています。







sRGBはインターネット色空間の王様になりました。 W3Cおよびその他の組織によって承認されました。 CSS Color Module Level 3およびSVGおよびWebP仕様でのサポートが必要です。 PNG仕様で参照されています。 Photoshopでは、これはデフォルトの色空間でもあります。 つまり、sRGBはWebに最適な選択肢であり、写真を正しく表示する場合は、sRGBを使用するのが最善です。

品質と圧縮

JPEGのような品質が失われた形式では、品質と圧縮は直接関係します。圧縮率が高いほど、品質は低くなり、ファイルサイズは小さくなります。 したがって、バランスを見つける必要があります。



私のテストでは、コントロールの画像とフォトショップは60に高く設定されました。IM設定では、82を使用することをお勧めします。なぜですか？



品質設定は定量的にJPEG形式で定義されていないため、標準ではありません。 Photoshopの品質60は、あるプログラムの品質40、別のプログラムの品質B +、または3番目の「素晴らしい」品質と同じになることがあります。 私のテストでは、Photoshop 60はImageMagickの-quality 82に対応することがわかりました。



また、PNGなどの品質を損なうことのない形式では、品質と圧縮は関係ありません。 高圧縮しても画像の外観は変わりませんが、処理中のプロセッサの負荷レベルのみに依存します。 コンピューターに余裕がない場合、最大PNG圧縮を設定しない理由はありません。



IMのPNG圧縮は、-define png：compression-filter、-define png：compression-level、-define png：compression-strategyの3つの設定で設定できます。 圧縮フィルターは、圧縮をより効率的にするためにデータを並べ替える、圧縮前の追加のステップです。 適応フィルタリングを使用してより良い結果を達成しました（-define png：compression-filter = 5）。 圧縮レベルを最大9に設定することをお勧めします（-define png：compression-level = 9）。 戦略によってアルゴリズム自体が決まります。 デフォルトの戦略がより気に入った（-define png：compression-strategy = 1）。

メタデータ

画像自体に加えて、ファイルにはメタデータ（画像が作成されたときの画像、画像を作成したデバイスに関する情報）を含めることができます。 この情報は発生しますが、画像の認識は改善されません。削除することをお勧めします。 そして、-thumbnailはメタデータを削除することを指摘しましたが、それでもすべてが削除されるわけではありません。 -stripおよび-define png：exclude-chunk = allを使用すると、すべてを削除できます。 これは品質に影響しません。

プログレッシブレンダリング

JPEGおよびPNGは、プログレッシブまたはシーケンシャルレンダリングを使用して保存できます。 デフォルトでは、2番目のピクセルは、ピクセルが上から下に行でロードされるときに実行されます。 プログレッシブとは、画像が徐々に送信および表示されることを意味します。



JPEGでは、プログレッシブレンダリングは任意の数のステップで実行できます。これは、ファイルが保存されるときに決定されます。 最初のステップは、全体像の低解像度バージョンです。 画像全体が高解像度で表示されるまで、高解像度の各後続バージョンで表示されます。







PNGには、 Adam7インターレースと呼ばれるプログレッシブレンダリングのようなものがあり、8x8グリッドに基づいてピクセルが7ステップで表示されます。







両方のタイプのレンダリングは、-interlaceを介してIMで構成できます。 しかし、それは必要ですか？



このようなレンダリングは、ファイルの量を増やします。 長い間、ユーザーエクスペリエンスを向上させるため、これを含めるべきだと考えられていました。 完全な画像がすぐに読み込まれない場合でも、何かを認識し、何もないよりはましです。



昨年、調査の結果によると、ユーザーは一貫したレンダリングを好むことが明らかになりました。 これはほんの一例ですが、それでも興味深いです。 そこで、「-interlace none」を使用してシーケンシャルレンダリングを使用することをお勧めします。

画像の最適化

最適化について言及しました。 画像を最適化しない場合は、これまでに説明したすべての設定をお勧めします。 それらを最適化できる場合は、それらを変更します：-unsharp設定の小さな変更はより良く機能し（-unsharp 0.25x0.08 + 8.3 + 0.045対-unsharp 0.25x0.25 + 8 + 0.065最適化なし）、-stripを使用する必要はありません。

 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2 -thumbnail OUTPUT_WIDTH -unsharp 0.25x0.08+8.3+0.045 -dither None -posterize 136 -quality 82 -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB INPUT_PATH
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

多くのオプティマイザーがあります。 image_optim 、 picopt 、およびImageOptimをテストしましたが 、それらはすべて、一連の異なる手順で写真を実行します。 一度に1つずつ確認し、3つすべてをリストされている順に実行する方がよいという結論に達しました。 ただし、image_optimを使用した後、picoptとImageOptimの利点は最小限になります。 余分な時間とプロセッサパワーがない場合、複数の最適化を使用すると過剰になります。

結果（そして、それほど苦しむことは価値がありましたか？）

もちろん、私の設定は複雑ですが、ユーザーエクスペリエンスを向上させるために必要です。 テストに時間を費やしたことで、品質を損なうことなくファイルの量を大幅に減らすことができたことを嬉しく思います。



Photoshopのオプション「Web用に保存」と比較して、平均ファイルサイズは35％減少しました。



Photoshop Creative Cloudとの比較





最適化なしの私の設定は、最適化ありのphotoshopよりも優れていることが判明しました！



IMイメージのサイズを変更するときのデフォルト設定と比較して、私の推奨事項は平均82％で勝ちました。





ImageMagickを「内部」で使用するWordPressのデフォルト設定と比較して、私の設定は平均77％を獲得しました。





ImageMagickを使用する他のCMSやツールと比較して、私の設定は最大144％勝ちました。





すべての写真がPhotoshopの出力と見分けがつかないことが判明したことを思い出します。

これをプロジェクトに実装する方法

バッシュシェル

ここで、マクロ関数を.bash_aliases（または.bashrc）ファイルに追加できます。これにより、推奨されるコマンドが置き換えられます。

 smartresize() { mogrify -path $3 -filter Triangle -define filter:support=2 -thumbnail $2 -unsharp 0.25x0.08+8.3+0.045 -dither None -posterize 136 -quality 82 -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB $1 }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、次のように呼び出す必要があります。

 smartresize inputfile.png 300 outputdir/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Node.js

imagemagickというnpmパッケージを使用すると、ImageMagickを使用できます。 使用する場合、次のようにサイズ変更関数を追加できます。

 var im = require('imagemagick'); var inputPath = 'path/to/input'; var outputPath = 'path/to/output'; var width = 300; // output width in pixels var args = [ inputPath, '-filter', 'Triangle', '-define', 'filter:support=2', '-thumbnail', width, '-unsharp 0.25x0.25+8+0.065', '-dither None', '-posterize 136', '-quality 82', '-define jpeg:fancy-upsampling=off', '-define png:compression-filter=5', '-define png:compression-level=9', '-define png:compression-strategy=1', '-define png:exclude-chunk=all', '-interlace none', '-colorspace sRGB', '-strip', outputPath ]; im.convert(args, function(err, stdout, stderr) { // do stuff });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

うなり声

Gruntを使用してタスクを実行する場合、私はあなたのためにgrunt-respimg （ npm ）と呼ばれるタスクを特別に作成しました。 次のようにプロジェクトに含めることができます。

 npm install grunt-respimg --save-dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、それはGruntファイルで行うことができます：



grunt.initConfig({

respimg: {

default: {

options: {

widths: [200, 400]

},

files: [{

expand: true,

cwd: 'src/img/',

src: ['**.{gif,jpg,png,svg}'],

dest: 'build/img/'

}]

}

},

});

grunt.loadNpmTasks('grunt-respimg');



Php

PHPでは、ImageMagickはImagickという名前で統合されています。 残念ながら、そこには制限があり、私が推奨するすべてのことを行う方法がわかりません。特に、サムネイル機能を使用するようにサンプリングフィルターを構成します。



しかし、あなたは幸運です-あなたが必要とするすべてを行うphp-respimg （ packagist ）モジュールを作成しました。 Composerを使用してプロジェクトに含めることができます。

 composer require nwtn/php-respimg
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、次のように画像のサイズを変更します。

 require_once('vendor/autoload.php'); use nwtn\Respimg as Respimg; $image = new Respimg($input_filename); $image->smartResize($output_width, 0, false); $image->writeImage($output_filename);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンテンツ管理システム

CMSをPHPで実行する場合は、「PHP」セクションに進み、そこからプラグインを作成します。 WordPressを使用している場合、 RICG Responsive Imagesプラグインを使用できます。 インストール後、アクティベーションのためにfunctions.phpファイルに以下を追加する必要があります。

 function custom_theme_setup() { add_theme_support( 'advanced-image-compression' ); } add_action( 'after_setup_theme', 'custom_theme_setup' );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

他のCMSは、何らかの方法で画像機能にアクセスできます-ドキュメントを参照してください。

性能

私のテストでは、デフォルトで-resizeに比べて、IMは画像の処理に2.25倍の時間がかかることがわかりました。

おわりに

デザイナーと開発者は、ウェブの仕組みに非常に影響を与えます。 私たちはウェブサイトをより速くし、ユーザーの認識を改善し、さらにコンテンツを新しい市場にもたらすことができます 。 画像のボリュームのカットは非常に簡単に行われ、サイトのパフォーマンスの向上に大きく影響します。これらすべての情報があなたにとって有用であり、ユーザーのサイトを改善できることを願っています。

参照資料

うめき声

php-respimg

RICG Responsive Imagesプラグイン