Качество адаптивных изображений.

[Muradqurbanov]

Всем салют. Помогите советом народ. Буду очень благодарен.  Копаюсь с утра никак не могу найти. Проблема такая: 

Во вкладку описания товара добавляю изображение с тегом img class="img-responsive". В своем оригинале изображение нормального качества. Как только уменьшаю экран или захожу с телефона картинка растягивается в экране как мне и нужно, однако качество этой фотографии падает. Не пойму вроде если изображение уменьшается качество не должно становится хуже я ведь не увеличиваю его. С чем может быть связано?

[Prooksius]

в телефоне пикселей на единицу длины экрана больше, он четче показывает картинку.
В ВП это кстати, учли, используется srcset, где задаются разные картинки для разных разрешений.
Наверное, единственный выход - вставлять туда картинки заведомо больше разрешением, но на десктопе ограничивать их размер, чтобы не растягивались слишком сильно.
А на девайсах как раз будет ок.

[esculapra]

Попробуй в шабл где img добавить размеры (width и height) с параметром 100% И дай ссылку посмотреть.

Змінено 15 січня 2021 користувачем esculapra

[KomissarJuve]

1 картинка должна быть подготовлена в графическом редакторе

2 добавляете картинку а размер указываете в процентах 100%

так я делаю в ocstore 2.3 в редакторе ckeditor

[Muradqurbanov]

2 минуты назад, Prooksius сказал:

в телефоне пикселей на единицу длины экрана больше, он четче показывает картинку.
В ВП это кстати, учли, используется srcset, где задаются разные картинки для разных разрешений.
Наверное, единственный выход - вставлять туда картинки заведомо больше разрешением, но на десктопе ограничивать их размер, чтобы не растягивались слишком сильно.
А на девайсах как раз будет ок.

Прикол в том, что на ПК тоже самое. Если на весь экран качество норм. Как только окно сужаю, автоматом падает. Что интересно есть определенная ширина после которой качество повышается, как будто встает на место.

[Prooksius]

а дайте ссыль

[Muradqurbanov]

6 минут назад, Prooksius сказал:

а дайте ссыль

https://goods.az/zhenskie-futbolki/zhenskaya-futbolka-belogo-cveta-s-dlinnymi-rukavami-1

Внизу в описании товара, вкладка размерная сетка

[Muradqurbanov]

16 минут назад, esculapra сказал:

Попробуй в шабл где img добавить размеры (width и height) с параметром 100% И дай ссылку посмотреть.

https://goods.az/zhenskie-futbolki/zhenskaya-futbolka-belogo-cveta-s-dlinnymi-rukavami-1

Внизу в описании товара, вкладка размерная сетка

[Prooksius]

8 минут назад, Muradqurbanov сказал:

https://goods.az/zhenskie-futbolki/zhenskaya-futbolka-belogo-cveta-s-dlinnymi-rukavami-1

Внизу в описании товара, вкладка размерная сетка

вообще не советую так делать, текст должен быть текстом, а не картинкой. Это неправильно.
Если не будете переделывать - ставьте заведомо большее разрешение, раза в 2 больше

[Muradqurbanov]

2 минуты назад, Prooksius сказал:

вообще не советую так делать, текст должен быть текстом, а не картинкой. Это неправильно.
Если не будете переделывать - ставьте заведомо большее разрешение, раза в 2 больше

То что неправильно согласен. И все же почему так происходит.

[Muradqurbanov]

27 минут назад, esculapra сказал:

Попробуй в шабл где img добавить размеры (width и height) с параметром 100% И дай ссылку посмотреть.

Не помогло

[Prooksius]

8 минут назад, Muradqurbanov сказал:

То что неправильно согласен. И все же почему так происходит.

ну это так вот рендерит изображения хром. В FireFox кстати, такого нет

[Prooksius]

Да, еще можно картинку эту сделать png, а не jpg. Тогда такого по идее быть не должно.
По идее..
Только ее надо делать не из существующего jpg, который уже ужат, а из оригинала, откуда этот jpg был сделан (скриншотом как-то, полагаю).

Змінено 15 січня 2021 користувачем Prooksius

[esculapra]

А шо не так? В браузере адаптивный дизайн все норм.

[Prooksius]

2 минуты назад, esculapra сказал:

А шо не так? В браузере адаптивный дизайн все норм.

 

1 час назад, Muradqurbanov сказал:

Внизу в описании товара, вкладка размерная сетка