約 3500 x 2500 ピクセルでサイズが 4 MB の大きな JPEG 画像があります。
この画像をHTMLページに表示して、画面の約3/4を占めるようにし、圧縮して、品質をあまり損なうことなくすばやくロードできるようにします。
これは実現可能ですか？
2800 次
4 に答える
1
はい。ただし、HTML ではありません。画像がネットワーク経由でブラウザに送信される前に、画像のサイズを縮小する何らかのサーバー側スクリプトを実行する必要があります。このようなことを行うことができる言語には、Perl、PHP、Python、Ruby などがあります (アルファベット順なので、好き勝手で非難されることはありません)。ただし、プログラミングの経験や学習意欲 (Web サイトや本を読む) が必要です。ここでは、基本的にその方法を尋ねる質問を StackOverflow で行うことはお勧めしません。
于 2010-08-24T03:08:19.267 に答える
1
いいえ、HTML では実行できません。HTML は画像を圧縮しません。高さと幅の属性を指定して画像のサイズを変更できますが、見栄えがよくありません。
手動で画像のサイズを変更する必要があります。
于 2010-08-24T03:15:53.550 に答える
1
HTML
<img class="big_image" src="x.jpg">
<!-- don't set width and height in the HTML -->
CSS
img.big_image {width:75%; -ms-interpolation-mode:bicubic;}
/* don't set the height and it will be proportionally scaled */
イメージは、最初に配置された祖先の 75% にスケーリングされます。(position:relative; または position:absolute; が設定された要素を含むもの、これが body 要素であることを願っています。CSS で body と html の幅を 100% に設定する必要がある場合もあります。よくわかりません。
デフォルトでは最近傍補間を使用するため、MS css 固有のものは IE7 以降用です。これはばかげています。
画像はすでに非常に圧縮されています。jpegまたはpngの方が適しているかもしれません。両方を試して、どちらが小さいかを確認してください。
于 2010-08-24T03:23:55.267 に答える
0
jpg を画面の 3/4 に表示したい場合、全員が同じブラウザ ウィンドウ サイズを持っているとは限りません。また、ユーザーがウィンドウのサイズを変更したときに、画像のサイズを調整したいと思うでしょう。
CSS 3 属性 background-size を使用して画面に合わせて画像を拡大することは可能ですが、すべてのブラウザーで機能するとは限りません。それ以外の場合は、巧妙な Javascript を使用して実行できます。
欠点は、どの手法を使用するにしても、画質やサイズに問題が生じることです。写真を 3500px に保つと、大画面で見たときにきれいになりますが、ダウンロードに時間がかかります。画像を小さくしすぎると、読み込みは速くなりますが、大きな画面でピクセルが表示されます。
ほとんどの人は、1024px から 1280px の間の画面解像度を使用していると思います。したがって、おそらくこれらのサイズでテストを開始する必要があります。
于 2010-08-24T03:12:28.773 に答える