web-dev-qa-db-ja.com

WP レスポンシブ画像 - カスタム画像サイズをアップロードする

私は何週間もの間幸運なしに私の問題の解決策を見つけようとしてきました。私のテーマとWPはどちらも適切なレスポンシブイメージを作成できないことを発見しました。これは特にPNGファイルに当てはまります。PNGファイルは、小さくなる代わりに実際にはサイズが大きくなります。

たとえば、サイズが12kbのPNGをアップロードした場合、WPと私のテーマは、元のファイルよりも解像度が小さくてもサイズが3〜4倍大きいファイルを作成しました。

私のテーマでこのアダプティブイメージシステムを無効にすることができたので、カスタムコードを使用してWPファイルの作成を無効にする方法を見つけました。しかし、私が達成したいのは、WPや他のコードに頼るのではなく、自分用のカスタムサイズの画像をアップロードして、より小さいまたは大きい画像を生成することです。

WPを上書きして手動でアップロードされたカスタムサイズの画像をsrcsetで配信する方法について誰もが解決策を知っていますか。 WPで使用されているアルゴリズムと、次にCDNで画像をホストしたいと考えています。

前もって感謝します。

imagesresponsiveoptimization
1
KBT

生成されたサイズが元の画像よりも大きいサイズになるのは、圧縮がどのように機能するかです。

例えば、50kbサイズの低品質画像をアップロードしても、WordPressのJPG品質が100に設定されている場合、WordPressは元の画像よりもサイズが大きくなります。WordPressはそれらを圧縮していません。これはjpeg_qualityフィルタを使用して変更できます。

add_filter('jpeg_quality', function($arg){ return 90; });

値を小さくすると（品質も低下します）、スペースを節約できます。私はPNGファイルのためのフックを知りません、しかし手動であなたのためにこれらのファイルを圧縮することができるプラグインがあります、 PNGとJPG画像を圧縮します または WP用にPNGを圧縮します 。

srcsetがどのように機能するかに慣れている場合は、手動で独自のレスポンシブイメージを生成できます。この例を見てください。

<img 
    src="<?php get_the_post_thumbnail_url( $post_id,'thumbnail' ); ?>"
    srcset="
        <?php the_post_thumbnail_url( 'medium' ); ?> 700w, 
        <?php the_post_thumbnail_url( 'large' );?> 1600w" 
    sizes="
        (max-width:700px) 700px,
        (min-width:701px) 1600px" 
    alt="<?php the_title(); ?>"
/>

これにより、テーマに基づいて画像とその動作を完全に制御できます。

また、応答性に関しては、あなたがあなたのコンテンツの幅を定義したことを確認したいかもしれません、それでWordPressはブレークポイントを決定することができます。これは$content_widthというグローバルな値によって行われます。

if(!isset($content_width)) {
    $content_width = 700;
}

テーマのfunctions.phpファイルで設定できます。

1
Jack Johansson