CSSの背景画像がぼやけて開始されてフォーカスが入ります

Question

CSSを使用して背景画像をロードしていますが、画像がぼやけていて、数秒後にピントが合います。

私はこの質問にいくつか答えを見たが、それは私の場合には役立ちませんでした：How to prevent the background image from getting blurry

この問題が発生する原因は何？

は、すべてのヘルプは大歓迎です

HTML：

<div class="first-row-container"> 
    <div id="one-box" class="first-row-styles animation-target"></div> 
    <div class="divider"></div> 
    <div id="two-box" class="first-row-styles animation-target"></div> 
    <div class="divider"></div> 
    <div id="three-box" class="first-row-styles animation-target"></div> 
    <div class="divider"></div> 
    <div id="four-box" class="first-row-styles animation-target"></div> 
<div> 

CSS：あなたはprogressive compressedのjpg画像を使用している場合がありますように

#one-box { 
    background-image: url("your-brand-here.jpg"); 
    background-size: 100% 100%; 
    image-rendering: -webkit-optimize-contrast; 
    border-style: solid; 
    border-width: 2px; 
    border-color: #7f8c8d; 
} 

.first-row-container { 
    margin-left: 13%; 
} 

Answer 1

ですね。このタイプの圧縮では、画像が複数のパスでレンダリングされ、各パスで画像の詳細レベルが増加します。

画像が解像度やファイルサイズの点でかなり大きい場合、画像の忠実度が目立つようになります。これは、記述しているイベントに相当します。 your-brand-here.jpgの解像度とファイルサイズは何ですか？

この場合、画像の読み込み時間を短縮するには、画像を表示する解像度に合わせて画像を変換し、jpeg圧縮の品質を下げます。

希望すると便利です。