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

Я использую механизм lazyload, который загружает только соответствующие изображения, когда они находятся в окне просмотра пользователей.

Для этого я определил атрибут data-src, который ссылается на исходное изображение и изображение с заполнителем на основе base64 как src, чтобы сделать HTML действительным.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-src="/path/to/image.png" alt="some text">

Я заметил, что chrome кэширует строку base64, но строка довольно длинная и раздувает мой HTML (у меня много изображений на странице).

Итак, мой вопрос в том, лучше ли использовать небольшое кодированное base64 или 1px x 1px изображение-заполнитель?

Примечание: Для целей SEO элемент должен быть img. Также мой HTML должен быть действительным, поэтому требуется атрибут src.

Ответ 1

Я бы использовал местозаполнитель в вашей ситуации.

Использование изображения с кодировкой изображения с кодировкой base64 с целью получения ленивой загрузки, поскольку вам все равно придется отправлять некоторые данные изображения в браузер. Если что-либо может быть вредным для производительности, поскольку изображение загружается как часть исходного HTTP-запроса, а не через отдельный запрос, который браузер может сделать с тегом изображения и URL-адресом.

В идеале, если это просто "загрузочный" заполнитель или что-то подобное, я бы создал его в CSS, а затем заменил его загруженным изображением, когда пользователь достаточно прокручивается, чтобы вызвать загрузку этого конкретного изображения.

Ответ 2

Вы можете использовать это более короткое (но действительное!) изображение в теге src (1x1 пиксель GIF):

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

Обратите внимание, что если вы gzip свой HTML (что вам нужно), длина строки не будет такой важной, поскольку повторяющиеся строки хорошо сжимаются.

В зависимости от ваших потребностей вы можете использовать цвет для пикселя 1x1 (результаты в более коротких gif файлах). Один из способов сделать это - использовать Photoshop или аналогичный инструмент для создания 1x1 пикселя GIF в нужном цвете, а затем с помощью инструмента, такого как ImageOptim, чтобы найти лучшее сжатия. Существуют различные онлайн-инструменты для преобразования полученного файла в URL-адрес данных.

Ответ 3

Я заметил, что chrome кэширует строку base64, но строка довольно длинная и раздувает мой HTML (у меня много изображений на странице).

Если это так, подумайте о том, чтобы поместить "настоящий" атрибут src, указывающий на то же самое местозаполнитель. Вам нужен дополнительный HTTP-запрос, , но:

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

Если количество изображений на странице значимо, вам может быть проще с "реальным" изображением.

Я бы зашел так далеко, что решил, что он будет более совместим с браузерами, пауками, а что нет - поддержка base64 широко поддерживается, но простые изображения еще более.

Даже по сравнению с наименьшими изображениями, которые вы можете получить в base64, 26 байтов станут this

src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="

пока вы можете перейти от

src="/img/p.png"

до

src="p.png"

который выглядит довольно некрасиво - если такое слово существует даже.

Тест

Я проверил очень простой тест

<html>
<body>
<?php
    switch($_GET['t']) {
        case 'base64':
            $src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';

            break;
        case 'gif':
            $src = 'p.gif';
            break;
    }
    print str_repeat("<img src=\"{$src}\"/>", $_GET['n']);
?>
</body>
</html>

и я получил:

images   mode      DOMContentLoaded   Load      Result
200      base64    202ms              310ms     base64 is best
200      gif       348ms              437ms
1000     base64    559ms              622ms     base64 is best
1000     gif       513ms              632ms
2000     base64    986ms             1033ms     gif is best
2000     gif       811ms              947ms

Итак, по крайней мере, на моей машине , похоже, я даю вам плохой совет, так как вы не видите преимуществ во время загрузки страницы, пока у вас не будет почти двух тысяч изображений.

Однако:

это сильно зависит от настройки сервера и сети и еще больше на самом макете DOM.
Я выполнил только один тест для каждого набора, что представляет собой плохую статистику, используя Firebug, что является плохой методологией - если вы хотите иметь достоверные данные, запустите несколько десятков загрузок страниц в любом режиме, используя некоторый инструмент мониторинга производительности Web и клон вашей реальной страницы.
(как насчет использования PNG вместо gif?)