Индийский код: вэб-дизайн

    Случилось мне отлаживать отображение вот этой ютьюбовской странички на небольшом девайсе. На страничке транслируются матчи индийской премьер-лиги по бейсболу. А может, что-то другое — лезть в дебри индийского спорта мне лень. В перерывах между трансляциями щелкает счетчик до следующего матча:

    image

    Но щелкает он на десктопе, а на девайсе не хочет — голый текст «Commences blah-blah-blah», и ничего более. Чувствую, разбираться мне б долго-долго, если б не посмотрел случайно на код кнопки «Recent matches» и не захотел бы взглянуть на картинку с этой кнопкой. Картинка поразила мое воображение. Вот она:

    image

    Вернее, это не она, а ее уменьшенная копия. Размерность оригинала — 3500x1500, и бедный браузер на маленьком девайсе просто-таки отказывался грузить такую простыню (вот она сама, если кому-то любопытно). А в этой простыне были завернуты и кнопки, и индикаторы таймера, и несколько фонов, и логотипы команд.

    Там же какие-то веселости с трансляциями, но с ними я еще не разобрался — в процессе. ;)

    Комментарии 17

    • НЛО прилетело и опубликовало эту надпись здесь
        +2
        Я считаю, что там явная недоработка — флэшовые баннеры рендерятся отдельно. Стоило написать флэш-приложение, отображающее все в одном мегапиксельном кадре и уже этот кадр разбивать на спрайты. :)
        • НЛО прилетело и опубликовало эту надпись здесь
            +5
            Мы тут смеемся, а через полгода что-нибудь подобное отлаживать придется.
              0
              идея хорошая, кстати
                +1
                Не выйдет, так как у нашего «любимого» браузера даже восьмой версии есть ограничение на 32kb для такой картинки. Так что много туда не загонешь.
            +4
            ничего удивительного, сам ютуб тоже использует «простыню», правда поменьше (169х2800)
            s.ytimg.com/yt/img/master-vfl149944.png
              0
              Ох, не замечал. Спасибо за наводку. Она, в отличие от индийской, в ограничения браузера влезает.

              И немного в сторону от этой темы: меня заинтересовало, сколько лишнего трафика я генерю с таким вот подходом.
                +3
                Простыня кешируется, PNG неплохо жмётся, так что трафик вы экономите :)
                  0
                  Слово «экономить» тут все-таки немного не к месту. :)

                  И опять-таки, вылезают проблемы с отображением сайтов на мобильных устройствах.
                    +4
                    При правильном подходе проблем с отображением не будет. Зато будет реальный выигрыш по скорости рендера страницы. И ещё разгрузка сервера (вместо тридцати запросов один). И ещё, всё-таки, экономия трафика на HTTP-заголовках и PNG-заголовках.

                    А вообще, просто погуглите «CSS Sprites». Там много расскажут про преимущества и недостатки этого метода. Конечно, ваш пример — из ряда вон выходящий, но на то он и исключение.
                      0
                      Не, в том, что, например, цифры счетчика или иконки рейтинга имеет смысл запихать в одну картинку — у меня сомнений нет. Объединять ли это все в бОльшую картинку — стоит подумать, тем более, если часть содержимого просто не будет использоваться. А вот пихать туда же несколько фонов, да еще с большими пробелами между полезными сегментами картинки — этого я никак не пойму. :)

                      Но хоть теперь буду знать о распространенности этого метода и не буду удивляться попыткам браузера загрузить картинки размером с панорамное фото Красной Площади. :)
                        +3
                        да еще с большими пробелами между полезными сегментами картинки
                        Белые поля кстати отлично жмутся, советую вспомнить алгоритмы сжатия. Что, кстати, подтверждает ваша картинка, т.к. она весит всего ~400Кб. А разбей вы ее на несколько, то увеличили бы трафик в ~1,5 раза, в том числе и из за разбития заголовков файла… А вот только, то что ее не отображает какой-то «мобильник»… Ну что-ж… Я бы с мобильника на ютьюб и сам бы не полез…
                          +2
                          Жаться-то они жмутся, а вот после загрузки в памяти место занимают не хуже полноцветной картинки.

                          По поводу ютьюба с мобильных устройств — Гугль и прочие как раз бьются за то, чтобы народ туда лазал.
                0
                Ну вы сравнили 400 кб простив ютюбовских 14.
                • НЛО прилетело и опубликовало эту надпись здесь
                –3
                Так верстают только муд*ки (с) cамизнаетекто

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое