PHP でのレスポンシブ画像読み込みテクニック-PHPチュートリアル-php.cn

PHP でのレスポンシブ画像読み込みテクニック

PHPz

リリース： 2023-05-25 18:06:02

オリジナル

1157 人が閲覧しました

モバイルデバイスの普及とネットワーク速度の向上により、Web ページでの画像の使用は不可欠な要素になりました。ただし、画像の数が増加し、そのサイズが変化するにつれて、画像の読み込み速度が重要な問題になります。この場合、Web ページの読み込みを高速化すると同時に、より優れたユーザーエクスペリエンスを提供できるように、応答性の高い画像読み込み技術を使用する必要があります。

この記事では、Web サイトをより効率的に最適化するために、PHP を使用したレスポンシブ画像読み込みテクニックをいくつか紹介します。

1. 基本的なレスポンシブ画像テクニック

これは Web サイトを最適化するために使用する基礎となるため、基本的なレスポンシブ画像テクニックを理解することが重要です。

1. srcset 属性を使用する: これは、Web サイトがさまざまなデバイス解像度でさまざまな画像をサポートできるようにする簡単なトリックです。 srcset 属性は、ブラウザーがロードする最適な画像を選択できるように、さまざまな解像度の画像を指定することで実装できます。 HTML で srcset 属性を使用する方法の例を次に示します。

<img src="example.jpg"
     srcset="example-400.jpg 400w,
             example-800.jpg 800w,
             example-1200.jpg 1200w"
     alt="description of example">

ログイン後にコピー

この例では、400 ピクセル、800 ピクセル、および 1200 ピクセルの画面に適した 3 つの異なる画像ファイルを使用しました。ブラウザはデバイスのピクセルサイズに応じて最適な画像ファイルを選択して読み込みます。これにより、Web ページの読み込み時間が大幅に短縮され、ユーザーエクスペリエンスが向上します。

2. ピクチャー要素を使用する: さまざまな解像度のデバイスをより適切にサポートするために、ピクチャー要素を使用できます。同じ要素内で複数のソースと画像形式を定義し、異なる条件下で異なる画像をブラウザーにレンダリングすることができます。サンプルコードは次のとおりです。

<picture>
  <source media="(min-width: 650px)" srcset="big.jpg">
  <source media="(min-width: 465px)" srcset="medium.jpg">
  <img src="small.jpg" alt="description of small">
</picture>

ログイン後にコピー

このコードは、異なる幅のデバイスに異なる画像を動的にロードすると同時に、低ピクセルデバイス用のフォールバック画像も提供します。

2.応答性の高い画像処理に PHP を使用する

PHP は、画像の読み込み速度とパフォーマンスを最適化するために使用できる柔軟なスクリプト言語です。 PHP のレスポンシブ画像技術を使用できる例をいくつか示します:

1. Retina ベースの画像処理: Retina HD (Retina) ディスプレイはピクセル密度が高いため、高解像度の画像ドキュメントを使用する必要があります。異なる解像度の画像を手動でアップロードする代わりに、PHP を使用すると、異なる解像度の画像をより速く生成できます。サンプルコードは次のとおりです。

<?php
function retina_image($file_path, $factor = 2) {
    $pathinfo = pathinfo($file_path);
    $retina_file_path = $pathinfo['dirname'].'/'.$pathinfo['filename'].'@'.$factor.'x.'.$pathinfo['extension'];
    if (file_exists($retina_file_path)) {
        return dirname($file_path).'/'.$pathinfo['filename'].'@'.$factor.'x.'.$pathinfo['extension'];
    }
    list($width, $height) = getimagesize($file_path);
    $new_width = $width * $factor;
    $new_height = $height * $factor;
    $image = imagecreatetruecolor($new_width, $new_height);
    $image_source = imagecreatefromjpeg($file_path);
    imagecopyresampled($image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
    imagejpeg($image, $retina_file_path, 90);
    imagedestroy($image);
    imagedestroy($image_source);
    return $retina_file_path;
}
?>

ログイン後にコピー

2. 画像圧縮プログラムを使用します。大きすぎる画像ファイルは Web サイトの速度に関する一般的な問題ですが、PHP を使用すると解決できます。 PHP を使用して画像サイズと圧縮レベルを自動的に調整し、高速に読み込むことができます。以下はサンプルコードです:

<?php
function compress_image($source_url, $destination_url, $quality = 100) {
    $info = getimagesize($source_url);
    if ($info['mime'] == 'image/jpeg') {
        $image = imagecreatefromjpeg($source_url);
    } elseif ($info['mime'] == 'image/gif') {
        $image = imagecreatefromgif($source_url);
    } elseif ($info['mime'] == 'image/png') {
        $image = imagecreatefrompng($source_url);
    }
    imagejpeg($image, $destination_url, $quality);
    return $destination_url;
}
?>

ログイン後にコピー

このコードは、必要に応じて画像サイズを自動的に圧縮します。

3. 結論

レスポンシブ画像は、Web サイトのパフォーマンスとユーザーエクスペリエンスの向上に役立ちます。同時に、PHP で記述されたレスポンシブ画像コードは、Web サイトの品質やダウンロード時間に影響を与えることなく、画像を動的に最適化できます。 PHP を使用して応答性の高い画像処理を行う方法を知ることは、Web デザイナーにとって必須のスキルの 1 つです。

以上がPHP でのレスポンシブ画像読み込みテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。