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

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

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

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

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

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

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

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

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

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

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



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


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

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

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

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

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

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


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

Понравился материал?
Число комментариев: 36
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
17
ну и дела
avatar
0
18
Здравствуйте. Давайте вместе разбираться в ситуации. Беру за основу одну из картинок с вашей главной страницы: https://ukit.com/uploads/s/w/y/m/wymqn6dvaqhr/img/full_juN0jTLX.jpg

Как видно, она не на сайте в таком качестве, а в оригинале. Взята была из библиотеки изображений: https://yadi.sk/i/BH1TBqo23RCzzk
Покажите, если не сложно, оригинал на вашем компьютере. Желательно загрузить его на какой-то сторонний фотохостинг и дать ссылку.

Что касается картинок на внутренних страницах, там вся проблема в их масштабе. Вы можете добавить слева и справа от картинки элементы "Пробел", после чего курсором мыши настроить правильные размеры картинки. Чтобы она не растягивалась больше реального размера и не отображалась в масштабе 200%. Конечно, качество будет портиться, если оригинал картинки меньше картинки на сайте.
avatar
19
Да, давайте разбираться.
Проблема с качеством фото не решается уже больше двух недель.
Поддержка отнекивается фразами "ждите, нужно время".
Если вам нужно время, чтобы решить эту проблему, отключите эту функцию на время проведения тех работ.
Сайт paradise-dance.zp.ua. Качество фото на всех страницах сайта заметно ухудшилось.
Проблему четко видно на картинках, которые находятся внизу сайта.
В нормальном виде (и в конструкторе тоже) у них белый фон. Но вот на сайте они превращаются в нечто... Предложение в paint изменить фон - это бред сивой кобылы... Изначально все загружалось в нормальном виде! В конструкторе тоже все правильно...
Разработчики, решите наконец проблему.
Из-за вас мы теряем потенциальных клиентов, которые, видя такой сайт, сразу же уходят куда подальше...
avatar
20
Вот и наступил 2018
avatar
21
Вы писали, мы писали
avatar
0
22
С самого начала работы uKit графика была ограничена размерами 1500x1500 пикселей. Если вы загружаете графику сильно вытянутой ориентации (не квадратную, а вертикальную или горизонтальную), нарезайте её на несколько квадратных частей, чтобы картинка не выходила за границы 1500px по одной из сторон. Таким образом, вы сможете избежать всех проблем.

На простом примере: имя сильно вертикальную картинку с меню размером 1500x3000px, вы можете разместить друг под другом два изображения по 1500x1500 (квадратной ориентации). При просмотре с сайта не будет видно никакой разницы, но качество при этом сохранится оригинальное.
avatar
23
C Праздником, товарищи!!
avatar
0
24
Давайте без калейдоскопа цветов в комментариях, пожалуйста, я их и так вижу хорошо smile

По поводу того, что с обновлением логика могла измениться, могу лишь подтвердить, что так оно и есть. При этом логика не сломалась, а наоборот была исправлена. Таким образом, если на сайте появилась проблема, она решается перезагрузкой картинок с учетом рекомендаций, которые я дал выше.

Для сайтов, у которых слишком много графики, которую необходимо исправлять, мы стараемся найти оптимальное решение. Конкретно сейчас это сделать не так просто, поскольку Новогодние праздники есть у всех, мы – не исключение, все живые люди. На следующей неделе смогу дать вам более предметный ответ о текущем состоянии вашего вопроса.
avatar
25
Большинство картинок на сайте размером меньше, чем указали Вы.
Я просто прошу Вас вернуть ту работоспособность, которая была раньше. 

Все было замечательно, пока в какой-то момент одно из Ваших изменений стало причиной для проблемы. 

Еще раз повторюсь. Картинки даже маленького размера в конструкторе в нормальном качестве, на сайте - в ужасном. 

Свои изображения я и так прогоняла через tinypng.com, поэтому функционал, который вызывает такие проблемы мне не нужен. 

Я буду ждать Вашего решения... Не хочется больше сталкиваться с ситуациями, которые портят репутацию Вашей организации.
avatar
0
26
Я не совсем понимаю, про какую порчу репутации речь, когда с помощью обновления удалось в 3 раза и более увеличить скорость загрузки страниц. Что официально повышает сайты в поисковой выдаче согласно данных от Google.

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

О том, как самостоятельно исправить отображение картинок, я уже написал выше. Если их слишком много, необходимо ожидать системного точечного решения.
avatar
27
Понимаю и Вашу позицию тоже. 
У меня нет той информации о пользе изменений, которая есть у Вас.

В то же время проблема на моем сайте совсем не связана с большим размером изображений.
Специально проверила. Изображение размером 150х220 px. 
И все это появилось после обновления. 

Пожалуй я не буду больше докучать Вам,  а просто буду верить в то, что решение скоро появится...
avatar
0
28
Решение, безусловно, будет. Задача у программистов есть. Мы уведомим всех по факту решения. Спасибо за понимание.
avatar
35
Уважаемые разработчики, праздники прошли, неделя, в течение которой вы должны были дать более предметный ответ, тоже.
Чем можете порадовать или огорчить?
avatar
0
36
Добрый день. Часть ошибок уже исправили, необходимо было переопубликовать сайт. И над остальными работаем, в течение недели тоже постараемся их закрыть. Сожалею, что после обновления вас не уведомили по email.
avatar
15
"Кстати, несмотря на то, что год близится к своему завершению, это ещё далеко не конец! Всё самое интересное мы приберегли на декабрь, так что далеко не уходите :)"

Далеко не ушли.

Третья декада декабря.

И тишина...

Или, Вы уточните, декабрь какого года имеете ввиду
avatar
0
16
Здравствуйте. Предлагаю вам посмотреть вот эту заметку: https://blog-ru.ukit.com/newsline/ico smile
avatar
29
Здравствуйте ! Скажите пожалуйста, будет ли возможность редактировать всплывающее окошко ? К примеру, добавление в него выпадающих меню, выбор вариантов ответов и вообще самого дизайна.
Очень просим Вас, добавьте данные возможности.
avatar
30
Здравствуйте. Все предложения по добавлению функционала можно добавить сюда: http://idea.ukit.com
Сейчас такого нет в uKit, но есть решение в магазине скриптов, ознакомиться с ним можно здесь: https://uscript.pro/shop/197/item/vypadajushhie-spisok-v-formu-obratnoj-svjazi
avatar
31
Приветствую всех. 
Хочу спросить, в первую очередь, разработчиков. А  ничего, что параллакс на юките никогда ровно не работал и хотелось бы, чтобы сначала довели до ума сам эффект, а потом уже оптимизировали загрузку? Если кто не замечал - вот скрин отображающий работу эффекта в демо юкита https://yadi.sk/i/csREhPFl3RYM4x   Считаю ненормальным, что посетитель наблюдает шов в месте повторения картинки. Пробовал настроить картинку: удлинить, растянуть - бесполезно.  В итоге отказался от параллакса в пользу фиксирования при прокрутке. Исключением стало только использование фона который не создает "швов" на стыках.
И еще вопрос. Планируете ли вы исправить ситуацию или параллакс на юките так и останется "особенным"?
avatar
0
32
Добрый вечер. Про данный баг знаем. Более того, сам рапортовал про него разработке, и его исправляли. Сейчас, как вижу, проблема вернулась. Хотя на тестовом сайте-примере проблема может быть именно в неразумно подобранной картинке.

Мы проверим, почему так получилось.
avatar
33
Дело не в картинке. Попытаюсь внести предложение. Надеюсь меня услышат.
В большинстве сайтов с параллаксом задний фон движется медленнее переднего(как и в жизни, обычно).  http://boy-coy.com/#home или попроще http://www.fima.lt . Второй вариант легко можно сделать на юките при соответственной доработке эффекта.
Когда фон замедлен проще подобрать и настроить картинку, чтобы пользователь не видел стыков, результат становится более предсказуемым. При первой попытке настроить параллакс на своем сайте думал, что шкала скорости позволяет настроить скорость от замедленной до ускоренной, что предлагаю и реализовать. Или хотя бы остановиться на замедленной.
Второй косяк параллакса: картинка съезжает при обновлении страницы. На маленькой скорости не видно, но на большой легко заметите. Скринить это дело лень, но можете посмотреть у меня на странице http://xn--161-5cdaffqche3a7bdxp8euj6a.xn--p1ai/ . Фон блока с серыми треугольниками на шве белая полоска, не знаю откуда, но после этого забил на параллакс. Так вот при обновлении страницы, полоска съезжает.
Надеюсь в скором времени смогу делать страницы похожие на те, которые привел в примере, а не проводить для ваших разработчиков тестирование.
Заранее, спасибо)
avatar
0
34
Да, я вас понял. Постараемся исправить.
Ваш комментарий
avatar