Генерация превью для адаптивного сайта
Имею сайт, каталог изделий, который сверстан на Bootstrap 3. Генерирую превьюшки через phpThumbOn (знаю что не оптимально, но все же). Для больших экранов мне достаточно превьюшки по ширине 250px, они идут в 3 колонки, все нормально, размер превьюшек небольшой, грузятся быстро. Но для смартфонов, где превьюшки выстраиваются в одну колонку уже надо превью под 800px шириной. Сейчас генерирую превью 800px по ширине для всех девайсов, на всех экранах это выглядит хорошо но размер превью уже под 250 килобайт каждого и грузятся не айс. А эсли этих превью 10 штук странице, получается только картинок на 2,5 метра. Надо бы делать генерацию превью в зависимости от экрана динамически. Хотелось бы узнать как это сделать оптимальнее. Есть ли у кого какие решения?
Комментарии: 26
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
А для «адаптивности» рекомендую использовать js плагин lazysizes. Он позволит делать «ленивую» загрузку изображений по мере прокрутки страницы, также может работать с различными размерами фото, в зависимости от размера экрана
И с lazysizes, я просидел целый вечер но так и не смог заставить работать. А вот простой lazy load прикрутил, но это просто отложенная загрузка, траффик тот же.
P.S.
Хорошо картинки сделаны на vrmedia.tv, но там проще, сайт не адаптивный.
Подключаете скрипт, лучше использовать minifix
Посмотрите еще есть куча плагинов для Lazysizes.
Для адаптивных изображений используйте плагин respimg
Сделайте столько размеров картинки сколько Вам нужно на вашу верстку.
Еще для уменьшения размера картинки, в параметрах phpThumbOn уменьшите сжатие jpg
видит?
Сам что только не делал, и ленивую подгрузку и сжимал картинки, пока увы, тест не пройден.
Кстати pthumb мне как больше нравится, чем phpthumbon. Например, phpthumbon выставляет размеры картинки в теге img? Все таки часто надо их (размеры) проставить.
С феномом pthumb дружит прекрасно:
По моему это всяко лучше модификаторов.
Я так понял в data-original надо изначально прописывать наименьший размер превью, в моем случае [[+184x138]], а там уж бутстрап сам разберется что показывать.
Ну и последнее JS для браузеров без поддержки http://scottjehl.github.io/picturefill/
Вешаем плагин и имеем 100% placeholder на странице — вызов некешируемый.
Верхнюю часть где переключение контекстов(made Василий) и 404 для случая когда домены для сайта указаны как *.site.ru в админке хостинга, можно удалить работает 100%.
И дальше уже идет адаптивность плюс разделение контента на мобила и не мобила, что-то вроде такого
или так
В условия можешь свой phptmb вставить.
Сама регулярка взята с сайта http://detectmobilebrowsers.com/
Как по мне это удобно в плане того что не только картинки можно так обрабатывать по сути часть контента скрывать без css, а значит страница будет легче на мобиле.