Оптимизация графики работает в виджетах «Картинка», «Слайдер», «Галерея», «Карточка» и «Отзывы».

Оптимизация спасает в тех случаях, когда пользователь прямиком с фотоаппарата загружает на сайт фотографии по 6 Мб и более. Даже для фото с условного «современного смартфона», с его 2-х-мегабайтными фото, разница после обновления будет весьма заметна. Конечно, для тех, кто использовал на сайте маленькие «легкие» картинки, это обновление не будет таким очевидным.

О том, как это работает

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

Для всех загружаемых картинок мы применили самые модные алгоритмы загрузки Progressive JPEG и Progressive PNG. Вы будете видеть картинку раньше, чем она загрузится полностью!

Пример работы

Кто использует «тяжелую» графику чаще остальных? Конечно же, фотографы, и их можно понять. Мы взяли в качестве испытуемого сайт Анны Абрамчиковой — фотографа из Омска — abramchikova.ru. И вот какие результаты нам удалось получить.

До применения оптимизации:

Скорость загрузки, как мы видим, составляет 9.25 s

После применения оптимизации:

А здесь она уже равняется 4.24 s



Время загрузки уменьшилось в 2 раза! Объем передаваемых данных уменьшился в 3,6 раз!


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

Впечатляет? Переопубликуйте ваш сайт прямо сейчас, чтобы оптимизировать на нем графику! :)

Обновленный эффект параллакса!

Старый параллакс на наших сайтах временами работал с ошибками. Это было обусловлено используемой библиотекой. Библиотека была заменена на библиотеку Rellax. Параллакс стал гораздо плавнее. Теперь он заметно лучше работает и на мобильных устройствах.

Посмотреть демо

Появилась новая настройка «Высота изображения», которая позволяет подогнать картинку под сайт и согласовать с выбранной скоростью параллакса.


Кстати, несмотря на то, что год близится к своему завершению, это ещё далеко не конец! Всё самое интересное мы приберегли на декабрь, так что далеко не уходите :)

Понравился материал?
Число комментариев: 14
avatar
1
Ок этого и ждали,спс
avatar
2
Спасибо за обновление!!!
avatar
3
Отлично, спасибо )
avatar
4
Ukit, а что за прикол деньги с карточки снимать? У меня автоплатёж отключен. Верните обратно. Написал в службу поддержки.
avatar
0
5
Произошло автоматическое продление тарифа для вашего сайта colorit-kmw.
Более развернутый ответ предоставили вам ранее, в рамках вашего обращения в
службу поддержки uKit.
avatar
6
Ясно. Нужно бы указывать в списании за какой сайт, чтобы не было путаницы.
avatar
7
Очень ждем нормального конструктора для Новостей.
При добавлении большого количество фото с ПК смотрится просто ужасно...
avatar
0
8
Благодарим за предоставленную информацию. Мы учтем ваши пожелания.
avatar
9
К слову о разделе Новостей:
- просьба добавить возможности сузить ширину страницы. Ну вот не хочу я например растягивать текст на всю длину, но и руками у каждой строки ставить отступы не удобно.
- прошу добавить возможность, чтобы текст был под фото. Например, https://na-blago.ru/blog/zierkal_nost_kritiki_osuzhdienii_prietienzii. Или есть такая возможность без залезания в код?
avatar
10
Спасибо за предложения, учтём. Если вам это необходимо сейчас, можете обратиться в службу поддержки и мы поможем вам.
avatar
11
А у меня почему-то ухудшилось качество фото на главной странице, сайт golinkevich.ru. Раньше оно чёткое было, а теперь - мыльное! Я какие только размеры не пробовал, от исходного 2048х2048 до 500х500, - ничего не помогает, хотя исходное фото - очень высокого качества! Подскажите пожалуйста ,как выкладывать фотографии так, чтобы качество не ухудшалось, ведь для фотографа главное - показать качество фото, а тут только негатив у заказчиков может быть!
avatar
12
Чтобы мы могли разобраться в ситуации, нам нужна дополнительная информация.. Напишите нам в раздел «Помощь» в панели управления вашего сайта с детальным описанием ошибки и скриншотом (скриншот: http://screenshot.ukit.com/src/kos/2017-11-28-13-33-04.png)
avatar
13
Ухудшения и я заметил. Просто, такого значения не придал. У меня не сайт фотографа всё-таки. Но квалити хорошего хочется. Изображения стали худшего качества, по-крайней мере в виджетах "Карточка".
avatar
0
14
Я прошу вас также написать нам через раздел "Помощь" (скриншот: http://screenshot.ukit.com/src/zz/2017-12-17-21-59-41.png) и указать страницу, на которой вы заметили ухудшение качества изображений в виджете "Карточка". Мы проанализируем ситуацию и дадим вам развёрнутый ответ.
Ваш комментарий
avatar