Оптимизация изображений для галерей туров: скорость против качества
Фотографии это то, чем продаёт турагентство. Чёткий кадр бассейна отеля, старый город на закате, салон автобуса, это убеждает клиента сильнее любого абзаца. Поэтому инстинкт загрузить самые большие и резкие фото, что у вас есть. Проблема в том, что эти же снимки, прямо с камеры или телефона, бывают огромными и тихо тянут вашу страницу в болото.
Это напряжение, с которым сталкивается каждое агентство. Красивые фото рождают желание, но тяжёлые фото убивают скорость, и на мобильном медленная страница теряет посетителя ещё до того, как галерея появится. Но это ложный выбор. Немного внимания, и вы сохраняете красоту и сбрасываете вес.
Потрясающее фото, которого никто не дожидается, не стоит ничего. На мобильном самая быстрая галерея бьёт самую красивую, что грузится слишком долго.
Почему сырые фото слишком тяжёлые
Снимок прямо с современного телефона может весить несколько мегабайт и быть куда больше, чем способен показать любой экран. Когда на странице тура десять таких в галерее, посетителю предлагают скачать больше, чем для длинного видео, лишь бы посмотреть одну страницу. Тот же снимок, оптимизированный, несёт ту же видимую качественность при крошечной доле веса.
На хорошем офисном соединении разницы вы не замечаете. На мобильном интернете клиента в автобусе тяжёлая версия оставляет страницу пустой, пока он ждёт, и он уходит, не дождавшись загрузки. Решение не в том, чтобы брать фото хуже. Оно в том, чтобы отдавать каждому версию под его экран, ведь телефону не нужно изображение гигантского печатного разрешения, ему нужно то, что выглядит идеально в размере телефона. Глаз разницы не увидит; соединение очень даже.
Четыре шага, что сохраняют оба
Три привычки плюс один приём покрывают почти всё, и ни один из них не трогает фото, которое клиент реально видит.
Уменьшите размер до загрузки
Для веба редко нужно изображение шире примерно двух тысяч пикселей, так что огромный оригинал стоит сначала уменьшить.
Сохраните в современном формате
Формат вроде WebP держит то же визуальное качество при куда меньшем размере, чем старый JPEG.
Сожмите
Хороший шаг сжатия резко режет размер файла без потери, которую видит глаз.
Грузите изображения лениво
Грузите каждое фото только по мере того, как посетитель до него долистает, чтобы первый экран появлялся быстро.
Последнее важнее всего для галереи. Посетитель, что никогда не долистает до десятого фото, не должен скачивать его заранее, а ленивая загрузка означает, что первый экран готов, пока остальная галерея грузится в фоне, ровно когда нужна.
Лучше всего то, что это настраивается один раз, а не каждый раз. Большинство современных инструментов сайта могут уменьшить, конвертировать и сжать изображение автоматически в момент загрузки и добавить ленивую загрузку без единой строки кода с вашей стороны. После этого вы кладёте полноразмерное фото, а система сама отдаёт каждому посетителю нужную версию, так что галерея остаётся быстрой, сколько бы туров вы ни добавили.
Проверьте результат, а не предполагайте
После оптимизации откройте страницу тура на телефоне на мобильном интернете и считайте секунды до появления первого фото. Если быстро, а изображение всё ещё выглядит чётко, вы получили сразу и то, и другое: полное качество, которое грузится без ожидания. Сделайте это сначала для важнейших страниц туров, тех, что вы активно продвигаете, ведь именно там медленные фото стоят вам больше всего броней.
Во сколько на деле обходится скорость
Медленную галерею легко счесть мелкой досадой, но цифры прямолинейны. Исследования мобильных сайтов раз за разом находят, что большая доля посетителей сдаётся, если страница грузится дольше примерно трёх секунд, и шанс ухода быстро растёт с каждой лишней секундой после. На странице тура это не просто отказ в статистике, это человек, которому хватило интереса нажать вашу ссылку и который ушёл до того, как догрузилось хоть одно фото.
Приложите это к своему трафику, и станет конкретно. Если сотня человек в месяц доходит до лучшей страницы тура с телефонов, а медленная галерея теряет хотя бы треть до того, как покажется, это больше тридцати заинтересованных людей каждый месяц, что так и не увидели предложение, и только на одной странице. По всему сайту тихие потери складываются в гораздо большее, чем думает большинство агентств, и ни одна не приходит жалобой, ведь ушедшие не говорят почему.
Та же логика сильнее всего бьёт по самой первой картинке, той, что посетитель видит раньше всего на странице. Это обложка должна быть оптимизирована агрессивнее всех, потому что стоит на пути каждого визита и решает в первые полсекунды, ощущается страница мгновенной или вялой. Оптимизируйте её первой, затем галерею за ней, и страница ощущается быстрой с момента открытия, а не догоняет, когда посетитель уже тянется к кнопке назад.
Если нужна помощь настроить галерею, что красиво выглядит и быстро грузится на каждом телефоне, без того чтобы каждый раз думать о размерах файлов при добавлении фото, свяжитесь с нами для бесплатной консультации, и мы встроим это в ваш сайт.
