1

ウェブサイトのメイン ページに読み込まれる巨大な画像があります。1366*690pxこれは巨大であることに気付き、読み込み時間を短縮することを検討することにしました。

最初にSmush.itで実行しました

次に、ブラウザの解像度に応じて動的に異なる画像をロードするようにいくつかの JavaScript をコーディングしました。

<img id="poster" src=""/>

<script type="text/javascript">
    var width = $(window).width();

    //Attempt to lower bandwidth usage and load times by delivering a dynamic poster size
    if(width<=320) {
        $("#poster").attr('src', 'theme/images/poster/width320.jpg');
    } else if(width>320 && width<=800) {
        $("#poster").attr('src', 'theme/images/poster/width800.jpg');
    } else if(width>800 && width<=1024) {
        $("#poster").attr('src', 'theme/images/poster/width1024.jpg');
    } else if(width>1024 && width<=1280) {
        $("#poster").attr('src', 'theme/images/poster/width1280.jpg');
    } else {
        $("#poster").attr('src', 'theme/images/poster/width1366.jpg');
    }
</script>

プロセスをさらに高速化する方法について提案を求めています。画像を 2 つの部分に分割するとページが高速化されるとどこかで読んだことを覚えていると思います。これが、画像からグラデーションを作成するときに作成する理由ではありませんか1px 幅?(繰り返します)?

ブラウザの幅別の現在のファイル サイズは次のようになります。

<= 320px                         ||   15.1 KB
>  320px   &&   <= 800px         ||   67.8 KB
>  800px   &&   <= 1024px        ||   101  KB
>  1024px  &&   <= 1280px        ||   142  KB
>  1280px                        ||   151  KB

注: これらの画像はすべて、css で 100% の幅を持っています。

また、ビット深度 (8、16、24、32) の量に関連するものがあることも知っています。aplha 画質をあまり下げたくないのですが、Web で許容できる範囲はどれくらいだと思いますか? 現在のビット深度は 24 ですが、多すぎますか?

このような画像を Web 用に最適化するには、他にどのような方法がありますか?

4

2 に答える 2

0

151 KB は、今日のインターネット速度ではそれほど多くありません。$(document).ready(function(){});必要に応じて、バックグラウンドがフェッチされる前にドキュメントが読み込まれるように、JavaScript をブロックで実行して、ページのレンダリングを高速化できます。

Photoshop で画像を最適化する方法に関する壊れたリンクを参照するこのリソースを Googleで見つけました

于 2014-05-12T01:08:09.117 に答える
0

必要なものを使用してください。これ以上何もない。

Web サイトに、その目的を果たすために 1 MB の画像が必要なコンテンツがある場合は、それを使用してください。コンテンツの中心ではないために 50 KB のバージョンで済む場合は、そのルートに進みます。

ガイドラインはまさにその... 最も効果的なものについての具体的でない提案です。あなたに固有の状況を比較検討する必要があります。サイトを効果的にするために必要なものは何ですか? 巨大な Web サイトを読み込めない (または読み込めない) ために、何人のユーザーを失うことになるでしょうか? 人を惹きつける魅力的なコンテンツはありますか?

邪魔にならないところで、最適化に進みます。ほとんどの場合、過度の最適化の領域に入っているため、質問で提案していることはしません。ただし、コンテンツの少なくとも 2 つのバージョンを利用できるようにしたい場合 (モバイル デバイスなど) には、多くの正当な理由があります。（そして、「網膜」解像度の画像から始めないでください。）

そもそも正しい画像形式を使用していますか? 写真には JPEG を使用し、可逆性やアルファ チャンネルが必要な場合は PNG を使用します。PNG のこれらのビット深度のいくつかで互換性の問題が見つかると思います。

于 2014-05-12T02:21:10.110 に答える