Jump to content
  • 0

Оптимизация скорости загрузки фоновых изображений


nomen
 Share

Question

Всем доброго дня.

Есть такая проблема. Есть простенькая страничка на сайте, на которой отображается инфо о некой команде. Фото участника и краткое инфо. Сделано все табличками и фото участника является фоном таблички.

И вот проблема в том, что фоновое изображение долго грузится, около 400ms (в итоге имеем 900ms +/-), хотя при этом оно достаточно маленького размера 50Кб +/-. И если в хроме загрузка картинки происходит более или менее плавно, то в ФФ торчит белый экран в месте картинки до тех пор, пока она не будет полностью загружена.

Табличка описана так:

<table width="945" cellspacing="0" cellpadding="0" border="0" background="../images/team/Justin.jpg" align="center" height="419">...

При загрузке имеем такую картину:

1pt5yw1ym8z71rjmxvub.png

*******************************************************

79v88r43grhvdy6ycr42.png

Посоветуйте пожалуйста, как можно оптимизировать эти странички?

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Остальные изображения тоже в первый раз грузились так долго?

Сейчас я надеюсь, вы понимаете что их загрузка идет из кеша)

Попробуйте сохранить фон в png-8, я понимаю что решение несколько странное, но все же грех не попробовать

Вообще как мне кажется причин может быть много, поиграйтесь с настройками в фш, уменьшите размер, качество(без потери для глаз) и т.д.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Shoker2
      Вот мой код:
      <table class="down_table_main" bgcolor="#F7F7F7">     <tr>         <td><button class="down_button_main">Подробнее</button></td>     </tr> </table> Почему-то когда я использую align, ничего не происходит. А в другом коде align работает.
      <table border="0" bgcolor="white" width="800px">     <tr align="center">         <td>             <br>             <img src="https://ru-minecraft.ru/uploads/posts/2018-03/medium/1522109759_cosmicnpcs.jpg" alt="">             <h3>Мод <b>CosmicNPCs</b> - создайте второго игрока и запишите, что он будет делать.</h3>             <p>Интересный мод который позволит снимать ролики без участия других игроков, вы сможете записать свои движения и действия, а потом воспроизвести с произвольным скином, таким образом для записи каких то прикольных моментов вам не нужен второй игрок.</p>         </td>     </tr> </table>  
    • By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By Tanya2021
      Не могу закруглить углы у background-color. В чем проблема? 



    • By rpalenko
      Должно быть как на первом скриншоте. Что не так я делаю или как правильно переделать???
      Помогите пожалуйста уже всю голову сломал!
    • By Sanchous
      Подскажите пожалуйста как растянуть фон за пределы блока, который лежит в контейнере. В верстке так же использовалась библиотека Bootstrap(решение должно быть адаптивным). 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy