ホームページ > バックエンド開発 > PHPチュートリアル > PHP を使用して Web サイトの画像ファイルのサイズと品質を最適化する方法

PHP を使用して Web サイトの画像ファイルのサイズと品質を最適化する方法

WBOY
リリース: 2023-06-25 11:34:01
オリジナル
1185 人が閲覧しました

今日のビジュアル指向の時代では、Web サイトの画質は非常に重要です。ただし、高解像度の画像ファイルを使用すると、Web サイトの読み込みが遅くなり、ユーザー エクスペリエンスが低下し、Web サイトのランキングに影響を与えることがよくあります。したがって、Web サイトの開発では、PHP を使用して画像のサイズと品質を最適化し、Web サイトの速度とユーザー エクスペリエンスを向上させる必要があります。 PHP を使用して画像のサイズと品質を最適化するいくつかの方法を次に示します。

1. PHP の GD ライブラリを使用する

PHP の GD ライブラリは画像処理用の拡張機能で、画像の拡大縮小、切り抜き、回転、透かしの追加などの一連の操作を実行するのに役立ちます。 。このライブラリを使用して画像を最適化すると、可逆圧縮、つまり、画像の品質に影響を与えることなく画像のサイズを削減できます。以下は、GD ライブラリを使用した画像圧縮の例です。

// 获取原始图片
$image = imagecreatefromjpeg('original_image.jpg');
// 获取原始图片的宽度和高度
$width = imagesx($image);
$height = imagesy($image);
// 计算缩小的比例
$scale = 0.5;
// 计算新的宽度和高度
$new_width = $width * $scale;
$new_height = $height * $scale;
// 创建新的图片
$new_image = imagecreatetruecolor($new_width, $new_height);
// 进行缩放
imagecopyresampled($new_image, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
// 输出新的图片
imagejpeg($new_image, 'new_image.jpg', 80); // 80代表图片质量,可自行调整
// 释放内存
imagedestroy($image);
imagedestroy($new_image);
ログイン後にコピー

この例では、GD ライブラリを使用して元の画像を圧縮し、新しい画像を出力します。このうち、imagecopyresampled() 関数は、画像の品質を維持したまま画像のスケーリングとトリミングを実現できます。

2. 画像圧縮にはサードパーティ ツールを使用する

GD ライブラリに加えて、画像の最適化に役立つサードパーティ ツールもいくつかあります。たとえば、TinyPNG や Kraken などのオンライン ツールを使用して画像を圧縮できます。これらのツールは、PHP の cURL 拡張機能を介して API と対話し、画像の可逆圧縮を実現できます。以下は、画像圧縮に TinyPNG を使用する例です。

// 引入curl库
require('vendor/autoload.php');
// 获取图片内容
$image_content = file_get_contents('original_image.jpg');
// 初始化curl
$curl = curl_init();
// 设置curl的参数
curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://api.tinify.com/shrink',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_HTTPHEADER => array(
    'Authorization: Basic ' . base64_encode('api_key:'),
    'Content-Type: application/json'
  ),
  CURLOPT_POSTFIELDS => json_encode(array(
    'source' => base64_encode($image_content),
  ))
));
// 执行curl并获取压缩后的图片内容
$response = curl_exec($curl);
// 获取压缩后的图片的大小
$new_size = curl_getinfo($curl, CURLINFO_SIZE_DOWNLOAD);
// 关闭curl
curl_close($curl);
// 解析返回的JSON数据
$data = json_decode($response, true);
// 获取压缩后的图片
$new_image_content = file_get_contents($data['output']['url']);
// 输出压缩后的图片
file_put_contents('new_image.jpg', $new_image_content);
ログイン後にコピー

この例では、TinyPNG の API を使用して画像を圧縮し、圧縮画像コンテンツを取得し、圧縮画像を出力します。

3. レスポンシブ画像を使用する

レスポンシブ画像とは、さまざまな画面サイズ、ピクセル密度、その他の条件に応じて画像のサイズと品質を自動的に調整できる画像を指します。応答性の高い画像を使用すると、ユーザー エクスペリエンスを向上させながら、Web ページの読み込み時間と帯域幅の使用量を削減できます。 PHP を使用してレスポンシブ画像を生成できます。以下は、PHP を使用してレスポンシブ イメージを生成する例です。

// 获取原始图片
$image = imagecreatefromjpeg('original_image.jpg');
// 获取原始图片的宽度和高度
$width = imagesx($image);
$height = imagesy($image);
// 定义响应式图片尺寸
// 可自行根据项目需求设置
$sizes = array(
  '(max-width: 640px) 100vw',
  '50vw',
  '33.3vw'
);
// 定义缩放比例
$scales = array(
  1,
  0.5,
  0.3
);
// 输出响应式图片
echo '<img srcset="';
foreach ($sizes as $key => $size) {
  $new_width = $width * $scales[$key];
  $new_height = $height * $scales[$key];
  $new_image = imagecreatetruecolor($new_width, $new_height);
  imagecopyresampled($new_image, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
  imagejpeg($new_image, 'new_image_'.$key.'.jpg', 80); // 80代表图片质量,可自行调整
  echo 'new_image_'.$key.'.jpg ' . $size . ($key == count($sizes)) ? '' : ',';
  imagedestroy($new_image);
}
echo '" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33.3vw" />';
// 释放内存
imagedestroy($image);
ログイン後にコピー

この例では、最初に GD ライブラリを通じて元のイメージのサイズと品質を調整し、次にさまざまなサイズと品質に応じてレスポンシブ イメージを生成しました。スケーリング比率のイメージ。最後に、HTML の <img> タグを通じてレスポンシブ画像を出力します。

要約すると、PHP を使用して Web サイトの画像ファイルのサイズと品質を最適化することが非常に重要です。これにより、Web サイトの速度とユーザー エクスペリエンスを効果的に向上させることができます。 GD ライブラリ、サードパーティの圧縮ツール、レスポンシブ画像などの方法を通じて最適化できます。同時に、プロジェクトの実際のニーズとユーザー エクスペリエンスに基づいて、適切な最適化戦略を選択することが重要です。

以上がPHP を使用して Web サイトの画像ファイルのサイズと品質を最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート