1

Тема: Изображения сильно теряют в качестве в мобильной версии

Подскажите пожалуйста как можно сохранить резкость изображений в мобильной версии сайта?
Если смотреть на иконку около названия категорий "лето" и "зима", то они получаются сильно размытые

То же самое касается изображений товаров (второй скриншот).

В системном модуле сделал качество изображений 100.


http://s018.radikal.ru/i503/1606/4a/026782a117d8.png

http://s008.radikal.ru/i303/1606/36/cd4a543327c1.png

2 Отредактировано Илья (09.06.2016 09:32:17)

Re: Изображения сильно теряют в качестве в мобильной версии

Sergey T., Тоже задавались этим вопросом. Решили эту проблему путем загрузки иконок в формате SVG.

Повысить оценку Понизить оценку

3 Отредактировано Закусило Александр (09.06.2016 11:51:16)

Re: Изображения сильно теряют в качестве в мобильной версии

Дело абсолютно не в качестве. Так картинку сжимает сам браузер. Без у Вас есть картинка определённой ширины и высоты. При переходе в мобильное устройство. ширины картинок подстраиваются под общую область видимости(под ширину экрана). И картинка сжимается. И поскольку у формат jpeg и png, то он не хранит информацию посимвольно. Это проблема самого формата изображения. SVG, это формат который рассчитывает всё изображение и каждые линии формулами, на основе внутренних координат элементов и поэтому его можно сжимать как угодно.
Идеального решения на данный момент в мире не существует. SVG довольно тяжеловесный.

100 % качества в JPEG я Вам не рекомендую выставлять. Т.к. изображения сильно прибавляют в весе, а разницы между 90 и 100 вообще на глаз нет.

И если честно мне сложно представить, чтобы настолько близко к глазу человек будет рассматривать на мобиле фото.

4

Re: Изображения сильно теряют в качестве в мобильной версии

Закусило Александр, На самом деле очень сильно бросается в глаза.
Стикер "Новинка" формата png из темы default весит 2,26 КБ.
Стикер "Новинка" формата svg весит меньше 1 КБ.
Думаю не плохо.

Повысить оценку Понизить оценку

5

Re: Изображения сильно теряют в качестве в мобильной версии

Спасибо за ответы!
Убрал качество обратно на 90.

А как использовать SVG в редискрипт? Штатно он ведь не поддерживается. При загрузке пишет "Загружен неподдерживаемый формат файла"

6

Re: Изображения сильно теряют в качестве в мобильной версии

Sergey T., Если только на прямую больше ни как

Повысить оценку Понизить оценку

7

Re: Изображения сильно теряют в качестве в мобильной версии

Здесь дело не в качестве пережатия изображений.
Погуглите на тему Retina Optimization.  Все дело в DPI мобильного.

Для таких экранов нужно изображения готовить в 2х или даже 3х кратном размере,
а затем масштабировать их за счет CSS. Это значительно пойдет в ущерб объему страницы (страницы будут тяжелыми).
Но все это возможно сделать на ReadyScript, просто в вашей теме оформления нужно запрашивать изображения большего размера, а в CSS или у тега img выставлять принудительно меньший размер.

Повысить оценку Понизить оценку

8

Re: Изображения сильно теряют в качестве в мобильной версии

admin пишет:

Здесь дело не в качестве пережатия изображений.
Погуглите на тему Retina Optimization.  Все дело в DPI мобильного.

Для таких экранов нужно изображения готовить в 2х или даже 3х кратном размере,
а затем масштабировать их за счет CSS. Это значительно пойдет в ущерб объему страницы (страницы будут тяжелыми).
Но все это возможно сделать на ReadyScript, просто в вашей теме оформления нужно запрашивать изображения большего размера, а в CSS или у тега img выставлять принудительно меньший размер.


Спасибо большое! Так и сделал! Теперь значки на мобилке отображаются гораздо четче и приятнее глазу.


http://s008.radikal.ru/i303/1606/c5/c7e07f7e0419.png