HTMLで画像サイズを制御するためにimgタグを使用してみてはいかがでしょうか?

あるお客様から、ウェブサイトの背景にニュース写真をアップロードしたのですが、ウェブページの表示範囲を超えてしまったとのことで、どうすればよいか尋ねられました。まずは画像処理ソフトを使って画像を適当なサイズに加工してから、幅を600ピクセルに加工し、高さも比例して拡大するようにしてくださいと伝えました。以前の Web サイトでは画像を処理する必要がなく、アップロード時にサイズも同じなので、このようなことは起こらないと、後でいくつかの説明を経て、彼はそうすることの利点を理解しました。

div と CSS を使用して Web サイトのコンテンツ ページのテンプレートを作成するとき、タイトルに使用するサイズと色、フォントと色など、一部のコンテンツのスタイルを修正します。当然、ページ内には画像が存在しますが、これらの画像はWebサイトのコンテンツ管理システムを介してサーバーにアップロードされ、コンテンツページ内でimgタグで参照されてWebページに表示されます。 。

カメラで撮影した写真のピクセル数は、一般にWebコンテンツ領域の閲覧範囲のサイズをはるかに超えており、写真自体のサイズも1M程度になるため、便宜上、写真を直接アップロードしてからアップロードする場合があります。 CSS は画像の幅と高さを均一に制御するために使用されますが、これは Web ブラウザーで表示される画像のピクセルを小さくするだけであり、実際には Web ページのコンテンツと調和しているように見えます。 1ページに複数の画像がある場合、1Mサイズの画像を連続して読み込む必要があるため、Webページを開く速度が明らかに遅くなります。ある程度の歪みは生じます。

また、コンテンツ内の画像のサイズが記載されている場合、一部の添付ファイルをアップロードするときに、添付ファイルの前に小さなアイコンが表示されることがあります。この小さなアイコンも img タグを使用して導入されます。この問題を解決するには、アイコンのスタイルを別途変更する必要があり、非常に面倒であり、一般のコンテンツ更新担当者はこれらの技術的な作業を理解していないことがよくあります。

ウェブサイトが改訂された場合、サーバーにアップロードされた写真が処理されていない場合、改訂の責任者が処理するため、「画像の読み込みが遅い」という問題は解決されません。すべての画像を 1 つずつ処理することは不可能です。

技術的に達成できる効果はたくさんありますが、すべての解決策が合理的であるとは限りません。したがって、Webサイト構築技術者として、まず画像を処理してからアップロードする習慣を身につけなければなりません。つまり、Webページの表示には多くのピクセルが必要です。アップロードする前にできるだけ多くのピクセルに処理してください。これにより、ディスク容量が節約されるだけでなく、閲覧者がページを開く速度も向上します。

以上がHTMLで画像サイズを制御するためにimgタグを使用してみてはいかがでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。