web-dev-qa-db-ja.com

カスタムサイズを使用してアップロードするときに画像の色と品質を維持する

クライアントに関する1つの継続的な問題は、彼らが彼らのウェブサイトに彼らの装置から直接5MBの画像をアップロードする傾向があるということです。これを回避する最善の方法は、画像の適切なサイズ変更やトリミングを実際には強制できないため、ワードプレス機能を使って魔法のように行うことです。

// add new Image sizes
add_image_size( 'sqr-thumb', 450, 450, true ); // Hard Crop Mode

これは、追加されているカスタム画像サイズ、450 x 450のトリミングです。今、それはうまくいっています、それは美しいです、しかし、イメージのカラーリングと品質は劇的に変わりました。

次の画像では、両方の画像の媒体を呼び出しています(sqr-thumbではなく、正方形の場合)。

右の画像はカスタム画像サイズの前に追加されました。左側のものはカスタム画像トリミングの後に追加されました(それはsqr-thumbバージョンを持っています)。アップロードには両方のインスタンスで同じ画像を使用しました。

明らかに左側のものは(あなたが白黒サンプルで見ることができるのと同じくらい)より低い品質とカラーリングのものです。

これを実行して画質を維持する方法はありますか?

ここで使用されている画像は、Photoshop Creative Cloudを介して作成されたPNG、保存されたRGBです。それはで見つけることができます: http://rehost.ca/temp/woman.png

注:私はこれを6種類のPNG、色、そして白黒で試しました。それらすべてに起こります。

私たちの開発サーバーはGdを使っています。

Sample 

6
Faye

jpeg_quality および wp_editor_set_quality フィルタを使用して、サイズ変更された画像の品質を設定します。

add_filter( 'wp_editor_set_quality', 'wpse246186_image_quality' );
add_filter( 'jpeg_quality', 'wpse246186_image_quality' );
function wpse246186_image_quality( $quality ) {
    return 100; // 0 - 100% quality
}

報告された問題を再現することはできませんでした。元のPNG画像はサムネイルと同じように見えます。 Windows 7上のChrome、PHPバージョン5.6.19、Gdサポート:有効、ImageMagickがインストールされていない、広色域ハードウェア調整モニター。

ノート

  • 画像がsRGB色空間 事前 に保存されていることを確認して、それらをWordPressにアップロードしてください。これは色と彩度の低下を防ぎます。

  • 品質設定を変更しても、すでにアップロードされている画像には影響しません。 サムネイルの再生成 などのプラグインを使用して、既にアップロードされている画像を更新します。

  • WordPress v4.5以降では、デフォルトの品質設定は82です。

5
Dave Romsey