Как настроить превью в браузере
Всем привет! Сегодня задача у нас следующая: необходимо создать интерфейс для загрузки картинок, который бы генерировал перед загрузкой превьюшки небольшого формата. На данный момент HTML5 вовсю шествует по планете, и, казалось бы, как это реализовать должно быть предельно ясно. Есть несколько русскоязычных статей на эту тему (вот, например). Но тут есть одно но. В рассматриваемом там подходе не уделено никакого внимания расходу памяти браузером. А расход может доходить до гигантских размеров. Разумеется, если загружать одновременно не более 5-10 картинок небольшого формата, то все остается в пределах нормы; но наш интерфейс должен позволять загружать сразу много изображений формата не меньше, чем у современных фотоаппаратов-мыльниц. И вот тогда-то свободная память начинает таять на глазах.
Для начала, чтобы оценить масштаб проблемы, реализуем подход, описываемый практически без изменений во всех статьях на эту тему, и попробуем проследить за использованием памяти. Код примеров я постарался сделать настолько простым, насколько это было возможно для демонстрации именно создания превью. Как реализовать Drag&Drop и загрузку можно посмотреть хотя бы даже в моей предыдущей статье
Для тестов я использовал папку ничем не примечательных фотографий размером 3648х2736 пикселей и средним объемом 4 мегабайта. А также набор браузеров актуальных версий: Chrome (31.0), Yandex (13.12), Firefox (26.0), и IE (11.0.1). Ну и обычный Task Manager (Win 8.1).
Итак, выбираем в поле 20 фотографий. Смотрим:
Браузер | Потребляемая память, МБ |
---|---|
Chrome | 994 |
Yandex | 1045 |
Firefox | 1388 |
IE | 1080 |
Тут стоит отметить два момента: 1) Yandex и Chrome держат под каждую вкладку отдельный процесс, а Firefox и IE — нет, поэтому для последних двух в измерения попадают также некоторые накладные расходы, напрямую не связанные с нашим испытанием; 2) я снимал измерения (здесь и далее) приблизительно через 20 секунд после подгрузки всех картинок, чтобы дать возможность браузерам освободить память по горячим следам, что они и делают, хотя и совсем незначительно — в пределах 50Мб, т.е. продолжают удерживать все еще слишком большие объемы. После обновления/закрытия страницы все браузеры потихоньку освобождают память до нормальных объемов.
Итак, понятно, что такая ситуация нас решительным образом не устраивает. Думаем, что можно предпринять…
Первый подход к снаряду
Первой моей мыслью было: «а что если такой перерасход получается от попытки загружать все картинки параллельно? Может быть, попытаться делать это последовательно, тем самым давая браузерам возможность немножко отдышаться?». Что ж, пробуем реализовать простейшую очередь.
Результаты (на тех же самых 20-ти фотках):
Браузер | Потребляемая память, МБ |
---|---|
Chrome | 979 |
Yandex | 1119 |
Firefox | 1360 |
IE | 399 |
Видим, что помогло это только в случае с IE. Ну что ж поделать — рекомендуем всем пользователям отказаться от использования каких-либо браузеров, помимо IE. Шутка. Думаем дальше…
Второй подход
После сеанса некоторого шаманства, приходит в голову мысль: «а может быть, проблема в том, что браузерам приходится держать в памяти широченные изображения, хотя по факту нам нужно всего лишь один раз ужать картинку до размера превью? Что если вместо обычного img использовать canvas, куда помещать уже ужатое изображение?». Так и поступим.
Результаты (все те же 20 картинок):
Браузер | Потребляемая память, МБ |
---|---|
Chrome | 188 (в пиковые моменты доходил до ~800МБ, но быстро скинул) |
Yandex | 201 (в пиковые моменты доходил до ~1ГБ, но сразу скинул, как и Хром) |
Firefox | 661 (пик ~900. надо отметить, что подождав еще с минуту, скинул до 300) |
IE | 103 (пик ~260) |
Несмотря на большой расход в процессе (у всех, кроме IE), браузеры хотя бы начали сразу освобождать память. Это уже не может не радовать. Но все же праздновать окончательную победу пока рановато. Думаем, что можно еще предпринять…
Третий подход
В процессе дальнейших метаний и не слишком удачных экспериментов, вспоминаем, что когда-то попадался на глаза такой API, как ObjectURL (создание и утилизация), который позволяет создавать локальные ссылки на любые бинарные данные, хранимые в кеше браузера, а также утилизировать их. В теории, это может помочь нам избежать обработки гигантских DataURL. Скорее пробуем
Результаты:
Браузер | Потребляемая память, МБ |
---|---|
Chrome | 881 |
Yandex | 927 |
Firefox | 140 (пик ~860) |
IE | 36 (пик ~70) |
Что же мы получили? Ну, во-первых, отличные результаты в IE. Более или менее приемлемые в FF. А вот с WebKit'овыми браузерами как-будто отскочили обратно. Справедливости ради надо отметить, что при этом во всех браузерах картинки стали обрабатываться быстрее чисто по ощущениям, но при этом в IE возникали кратковременные фризы. Не исключено также, что FF и IE по-честному сразу освобождают ресурсы после вызова URL.revokeObjectURL(), а вебкитовым браузерам нужно какое-то время для этого (возможно даже, что они будут шустрее это делать в условиях нехватки памяти). Дальше можно пойти двумя путями: 1) разделить подходы — в браузерах на вебките вернуться ко второму подходу (с этим все понятно — дело техники); и 2) попробовать везде довести до ума третий подход. Попробуем последний вариант…
Подход четвертый (и последний): что-бы еще такое заоптимизировать?
Немного поднатужившись, выжимаем из себя еще пару улучшений. Первое, это выносим создание элемента img из обработчика очереди: теперь будем повторно использовать один и тот же заранее созданный объект. Забегая вперед скажу, что это помогло существенно улучшить ситуацию с памятью в вебкитенышаховых браузерах — что и требовалось. А второе, это давно известный трюк — немного откладываем каждую очередную обработку при помощи setTimeout(), это помогло улучшить ситуацию с кратковременными фризами. Итак, результат:
Тестируем:
Браузер | Потребляемая память, МБ |
---|---|
Chrome | 103 (пик ~150) |
Yandex | 113 (пик ~150, как и у Хрома) |
Firefox | 107 (пик ~510) |
IE | 40 (а выше и не подымалось. Как будто вообще никакой работы не происходило) |
Заодно протестируем еще и на 100 картинках аналогичного размера:
Браузер | Потребляемая память, МБ |
---|---|
Chrome | 98 (пик ~150) |
Yandex | 150 (пик ~180) |
Firefox | 104 (пик ~520) |
IE | 40 (все те же 40МБ!) |
Видим, что увеличение числа обрабатываемых изображений практически не увеличивает расход. На этом, пожалуй, и остановимся.
Заключение
Признаться, после самых первых изысканий, я в какой-то момент подумал, что при нынешнем состоянии дел не выйдет реализовать данную возможность без чрезмерного перерасхода памяти. Все-таки, некрасиво подвешивать пользователю [пожелавшему загрузить 100 картинок разом] его гипотетический нетбук. Но приятно, что эти сомнения удалось побороть :)
Итак, нам удалось выяснить несколько моментов. Номер раз: использование DataURL годится только для работы с картинками очень небольшого формата (для больших предпочтительней использовать API objectURL, состоящий всего из двух методов). Номер два: надо быть осторожным с созданием большого количества объектов Image. Номер три: не производить всю обработку одновременно.
Ну и, коль скоро это небольшое исследование непостижимым образом привело к сравнению браузеров, пробежимся по каждому в отдельности.
Firefox проиграл?
Несмотря на выделяющийся по сравнению с остальными пиковый расход, думаю, что все же ситуация вполне приемлемая. Во-первых (не упомянул выше), еще через 30 секунд после замеров память опускалась до 60МБ, что даже ниже по сравнению с вебкитовыми; а во-вторых, вполне вероятно, что в условиях жесткой нехватки Firefox периодически подчищал бы память в процессе обработки и в конце концов даже на пике не отъедал бы столько. В общем, ставим зачет.
Всем равняться на IE!
Это опять шутка :) Но если говорить объективно, то надо признать, что IE сейчас — не просто инструмент для скачивания нормального браузера, а как минимум еще один годный обозреватель.
Яндекс.Браузер немного отстает от старших братьев?
Не думаю. И вот почему: дело в том, что он у меня сейчас используется как основной, а соответственно нельзя назвать эксперимент кристально чистым. Пара плагинов, история, синхронизация — все это вполне могло и вызвать это небольшое отставание.
А где же Опера?
Очень не хотелось ставить отдельно под этот эксперимент 12-ю версию. Не смотря на то, что она еще кое-кем используется, скоро и это число преданных поклонников вынуждено будет либо обновиться, либо мигрировать на другой браузер. А по поводу новой, вебкитовой — есть все основания полагать, что ситуация схожа с Yandex'ом и Chrome'ом.
UPD: Проверил все-таки в 12-й Опере. Результаты следующие: 3-й (а соответственно и 4-й) подходы не работают. Второй подход отъедает 500МБ на пике и 300МБ после окончания обработки.
Ну а как же Safari?
На win это редкий зверь, но на маке протестировал итоговый вариант (все на тех же 20-ти фотографиях). В процессе обработки расход памяти вообще не увеличивался.
Что с мобильными браузерами?
Проверил также в Safari на iPhone 5S. Наблюдается кратковременный фриз, но при этом память количество свободной памяти практически не уменьшилось. Я не нашел сходу, можно ли как-то увидеть, сколько конкретно резервирует каждый процесс в отдельности, буду признателен, если кто-то подскажет в каментах. Устройства на Android, к сожалению, под рукой не оказалось. Быть может, кто-то не поленится проверить самостоятельно и поделиться результатами.
Спасибо за внимание. Надеюсь, кому-то статья поможет не тратить время на аналогичные изыскания. И с прошедшими праздниками тебя, %username%!
Без сомнения, самый популярный веб-браузер на рынке - это Google. Chrome. У него гораздо более высокая доля рынка, чем у его ближайших конкурентов. Однако это не идеальное приложение, и даже его прямые конкуренты имеют функции, которых нет в браузере Google. Это относится к функциям предварительного просмотра и предварительного просмотра изображения, которые Edge будут включены в то время, и что Google уже разрешает тестирование в Chrome.
Эта функция Chrome все еще находится на экспериментальной стадии. Несмотря на это, ее можно активировать в нашем браузере, чтобы проверить, действительно ли эта функция может быть нам полезна.
Ниже мы увидим, из чего именно состоит эта функция и как мы можем активировать или отключить ее, если она нам подходит.
Режимы предварительного просмотра Google Chrome
Как правило, все веб-страницы содержат сокращенную информацию об их содержании для пользователя, которую мы можем просматривать, не вводя ее. Эту информацию можно увидеть на вкладке нашего браузера. И именно благодаря этим новым функциям предполагается получить новый режим предварительного просмотра во вкладках, которые мы открыли. Это позволит нам узнать его содержимое без необходимости нажимать на него, чтобы просмотреть его содержимое. Для этого воспользуемся «Карты при наведении курсора» и Функции «Tab Hover Cards Images» Chrome.
Таким образом, когда мы наведем указатель мыши на открытую вкладку браузера, мы увидим, как отображается предварительный просмотр URL-адреса и заголовка страницы в случае, если у нас активен режим «Карты при наведении курсора». Если вместо этого режима мы активировали режим «Tab Hover Cards Images», в дополнение к заголовку и URL-адресу мы также увидим небольшой изображение для предварительного просмотра страницы.
Это функции, над которыми Google работает долгое время, чтобы предложить предварительный просмотр открытых вкладок и знать их содержание, не заходя на вкладку . Это может быть весьма полезно, когда у нас открыто несколько вкладок на одном веб-сайте или даже на разных страницах. Таким образом, мы можем непрерывно отслеживать все открытые вкладки.
Точно так же мы должны помнить, что это экспериментальные функции Google. Это означает, что они могут быть неисправными или не всегда работать правильно. И может даже случиться так, что они будут удалены без предварительного уведомления, если Google сочтет это целесообразным. Однако, если мы хотим попробовать их, сегодня мы покажем вам, как мы можем активировать как режим «Предварительный просмотр», так и «Предварительный просмотр с изображениями», выполнив несколько простых шагов. Таким же образом мы увидим, как мы можем деактивировать их, если, попробовав их, они не убедили нас в достаточной степени.
Включить или отключить режим предварительного просмотра
Сначала мы поговорим о режиме предварительного просмотра, который мы можем активировать в разделе тегов Chrome. Чтобы включить эту функцию, мы должны открыть Chrome и написать в адресной строке следующее:
Как только страница откроется, мы воспользуемся поисковой системой, чтобы написать «Таберские карты при наведении», и мы увидим, что эта функция подчеркнута желтым цветом. Если мы хотим включить его, просто нажмите синюю кнопку справа и выберите «Включено» . Наконец, нажмите кнопку «Перезапустить» в правом нижнем углу, чтобы Chrome перезапустился и применил изменения.
Если мы выполнили все шаги правильно, мы увидим, как открытие новой вкладки в Chrome и наведение курсора на нее покажут нам URL-адрес и заголовок веб-страницы, найденной на вкладке. В этом случае предоставленная информация довольно краткая. Вот почему это может быть интересно для пользователей, которым не требуется предварительный просмотр, который внезапно вторгается в часть их экрана.
Если мы окончательно решим, что он нам не нравится, и хотим отключить его, процедура будет столь же простой. Вам придется повторить предыдущие шаги и просто изменить «Включено» на "Отключено" и перезапустите снова.
Включение или отключение режима предварительного просмотра изображения
Далее мы посмотрим, как мы можем активировать или деактивировать режим предварительного просмотра изображений в Google Chrome, выполнив несколько шагов, аналогичных предыдущему.
Первое, что нам нужно сделать, это открыть наш браузер Chrome и адресную строку, которую мы пишем:
После того, как мы открыли окно флажков Chrome, сразу должна появиться запись, отмеченная желтым цветом с названием «Tab Hover Card Images». Теперь все, что нам нужно сделать, это щелкнуть соответствующее поле справа и отметить как «Включено» .
Как только это будет сделано, нажмите кнопку «Перезапустить», которая появится в правом нижнем углу, чтобы перезапустить Chrome и применить сделанные изменения. Таким образом, если мы выполнили указанные шаги, мы проверим, как после перезапуска Chrome, если у нас есть вкладка с открытой страницей, и мы наведем на нее указатель мыши, она покажет нам информацию об URL-адресе, заголовке и изображение для предварительного просмотра самой. Без сомнения, это более полный вариант, который предоставляет больше информации, чем предыдущий.
В случае, если мы раскаиваемся и хотим отключить эту функцию, нам нужно будет только поменять шаги в обратном порядке. Просто повторите шаги еще раз, изменив Включено на "Отключено" и снова перезапускаю.
В данной статье показаны действия, с помощью которых можно отключить или включить отображение картинок (изображений) в Яндекс.Браузере.
Отображение картинок (изображений) в Яндекс.Браузере по умолчанию включено, но при необходимости можно отключить их отображение.
Яндекс.Браузер позволяет отключить отображение картинок. Если вы отключите отображение картинок (изображений), то страницы веб-сайтов будут загружаться быстрее, что приведёт к экономии интернет трафика при использовании лимитного или медленного подключения к интернету, но при этом страницы сайтов будут отображаться не совсем корректно.
Как отключить или включить отображение картинок в Яндекс.Браузере
Чтобы отключить или включить отображение картинок (изображений) в Яндекс.Браузере, в верхней части окна браузера нажмите кнопку Настройки Яндекс.Браузера и в появившемся меню выберите Настройки.
В настройках браузера, в левой панели выберите категорию Сайты, затем в правой части окна нажмите на ссылку Расширенные настройки сайтов
Затем в расширенных настройках сайтов, в разделе Отображение картинок установите переключатель в соответствующее положение, Разрешено - чтобы включить отображение картинок, Запрещено - чтобы отключить отображение картинок.
Как отключить или включить отображение картинок для определенного сайта в Яндекс.Браузере
Также можно отключить или включить отображение картинок для определенного сайта, для этого откройте страницу нужного веб-сайта, нажмите на значок или слева от адресной строки и в появившейся панели "Protect" нажмите Подробнее
Затем в разделе РАЗРЕШЕНИЯ, в выпадающем списке Картинки выберите соответствующий пункт: Разрешать (по умолчанию) , Разрешить, Блокировать.
Сделав выбор, обновите страницу сайта чтобы применить изменения.
Используя рассмотренные выше действия, можно отключить или включить отображение картинок (изображений) для всех или для определенных сайтов в Яндекс.Браузере.
Когда вы делитесь ссылкой на сайт, социальные сети и мессенджеры формируют превью (виджет предварительного просмотра) этой страницы. Выглядит это вот как-то так:
Формируется это превью на основе формата микроразметки Open Graph. Мы не станем углубляться в технические подробности, а расскажем как вам настроить превью, чтобы оно было красивым и главное эффективным. Главная цель — чтобы люди, которые его увидят, захотели перейти по этой ссылке, на ваш сайт.
- Заголовок ссылки
- Описание
- Изображение (Рекоменндованый размер, для красивого отображения: 968×504 пикселей)
По умолчанию, микроразметка формируется автоматически исходя из тех данных, которые вы указали в обложке вашего сайта. Но зачастую информация не может быть универсальной и работать одинаково эффективно в разных местах и в разных форматах. Именно поэтому мы рекомендуем уделить внимание настройки Open Graph.
Если ссылка на ваш сайт ранее отправлялась в социальной сети или мессенджере, скорее всего превью будет закешировано и новые данные не будут отображаться, пока вы не очистите кеш.
Очистка кеша
Вконтакте
Telegram
Проверка
После того как выполнена очистка кеша — вставьте ссылку на свой сайт, в этих социальных сетях, чтобы убедиться, что все изменения учтены и отображаются корректно.
Если честно, то уже полгода мои глаза страдали от того, что в визуальных закладках на Яндекс.Браузере мой блог отображается оооочень коряво: синий (мой) фон плашки, favicon в кружочке и название сайта.. Но почему у других сайтов, которые у меня на том же табле - всё красиво? Я решил с этим разобраться.
Сразу предупреждаю: показываю как делать виджет, в котором есть только логотип и фон. БЕЗ УВЕДОМЛЕНИЙ (нотификаторов). Именно красивое превью моего сайта мне и нужно. А вам?
Также уточню, что моя инструкция основна на рекомендациях API Яндекс.Табло и не требует файла manifest.json. А это особенно важно, для тех кто владеет сайтом на бесплатной платформе типа Wordpress или Blogspot.
Что нужно для отображения виджета/превью?
1. Логотип
- квадратные логотипы могут быть до 120 пикселей в высоту;
- длинные горизонтальные логотипы — ширина до 300 пикселей, высота до 85 пикселей;
- короткие горизонтальные логотипы — ширина до 250 пикселей, высота до 120 пикселей.
2. Подключаем показ превью для визуальных закладок
Логотип есть, фон логотипа я думаю у вас также есть (или можете выбрать в статье Лучшие цвета HTML для веб-мастера в одной таблице (HEX и RGB). Теперь осталось написать одну строчку в коде страницы. И почти готово.
Внутри тега нужно вставить следующий код (например, после строки вызова favicon.ico):
В этом коде нужно изменить значение следующих атрибутов:
logo= - это путь до логотипа, который вы ранее создали. Его вы должны закачать куда-либо в сеть и тут прописать путь до него.
color= - это цвет фона самого виджета.
Например у меня получилась такая строчка:
Что теперь?
А теперь главное: дождитесь обновление виджета. У меня это занимало около 5 минут, а иногда даже меньше. Периодически чистите кеш браузера и самого сайта (в браузере). И ву-аля — Вы восхитительны.
В конце предлагаю небольшой ролик про Великого человека по имени Никола Тесла, без которого мы могли бы и не встретиться в глобальной сети. До встречи ;)
Читайте также: