Уменьшение изображений для адаптивной верстки

[Oleg90s]

Здравствуйте, подскажите, есть макет psd, по нему надо сверстать адаптивный сайт, я взял оттуда все изображения, и те, которые вставлял через css, уменьшил для каждого типа разрешения. Проблема в том, что чем сильнее изменяю размер, тем сильнее изображения теряют качество, как решить эту проблему?

[Crushing]

Доброго времени суток.
max-width
min-width
Используйте.

[Oleg90s]

мне надо понять, как изменять размер изображений без потери качества, если это вообще возможно, max-width min-width тут не помогут

[Евгений_SB]

3 минуты назад, Oleg90s сказал:

мне надо понять, как изменять размер изображений без потери качества, если это вообще возможно, max-width min-width тут не помогут

Никак не измените) это растровая графика, что бы размер был меньше надо изображение рисовать в таком размере,тогда качество не потеряется, как вариант использовать вектор, но как в иллюстраторе нарезать картинки я не знаю))

[Svetlana_P]

Здравствуйте! Показали бы пример, где и какие именно Не думаю, что есть универсальный ответ для всех картинок.

Как вариант, через атрибут srset ставить разные изображения, каждое в нормальном качестве. Вместо того, чтобы менять размер свойствами css. Посмотрите статьи  https://webformyself.com/adaptivnye-izobrazheniya-na-sajte-sozdanie-s-pomoshhyu-atributa-srcset/ , http://www.webmasters.by/articles/html-coding/3485-adaptivnye-izobrazheniya-attributy-srcset-i-sizes.html

[Oleg90s]

http://angelcorset.shikinn.com/ там и фото и иконки, но главным образом потеря качества заметна именно на иконках. я понимал что надо рисовать изображения под конкретное разрешение, но всё же решил спросить, может чего не знаю, да и фото же как то изменяют в размерах без потери качества

[Евгений_SB]

28 минут назад, Oleg90s сказал:

http://angelcorset.shikinn.com/ там и фото и иконки, но главным образом потеря качества заметна именно на иконках. я понимал что надо рисовать изображения под конкретное разрешение, но всё же решил спросить, может чего не знаю, да и фото же как то изменяют в размерах без потери качества

а шрифтовые иконки не пробовали использовать? может лучше будет?  на https://icomoon.io/app/#/select   или  http://fontello.com/ 

вроде там выбор большой может подберете что нибудь

[Svetlana_P]

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

http://angelcorset.shikinn.com/ там и фото и иконки, но главным образом потеря качества заметна именно на иконках. я понимал что надо рисовать изображения под конкретное разрешение, но всё же решил спросить, может чего не знаю, да и фото же как то изменяют в размерах без потери качества

Я бы иконки векторными сделала или использовала иконочный шрифт.

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

Посмотрите еще в сторону JS плагинов. Я про этот слышала http://adaptive-images.com/ , но не пользовалась еще.

 

[andrey7287]

В html есть picture, который не плохо поддерживается и полифилится. Но в данном конкретном случае нужен другой верстальщик, очень плохо там всё, я бы даже сказал отвратительно ... извиняюсь за резкость ... 

[Oleg90s]

Только что, andrey7287 сказал:

В html есть picture, который не плохо поддерживается и полифилится. Но в данном конкретном случае нужен другой верстальщик, очень плохо там всё, я бы даже сказал отвратительно ... извиняюсь за резкость ... 

а можно подробнее, что именно там отвратительно? я ещё новичок и это мой первый проект, я понимаю что там не всё гладко, но не думал что прям отвратительно

[andrey7287]

Да взять хотя бы вашу надуманную проблему с иконками. Вы понимаете что адаптация под телефоны подразумевает как минимум то, что вашим сайтом как минимум можно будет пользоваться ? Открывайте другие сайты и смотрите как сделаны на них мобильные версии. Прям сейчас на этом форуме уменьшите окно браузера и посмотрите. Это раз. Далее попробуйте сделать на своём сайте следующие вещи : Добавить/удалить пункт пункт из меню, ещё один телефон, уменьшить/увеличить объём текста, вставить картинку большего/меньшего разрешения. Это два. И если не можете делать элементарные сетки, верстайте таблицами.

Edited July 22, 2017 by andrey7287

[Нарек]

20 minutes ago, andrey7287 said:

И если не можете делать элементарные сетки, верстайте таблицами.

Совет века  Чтоб потом тот кто будет переделывать сильнее матерился.

[Oleg90s]

Спасибо всем за ответы

[andrey7287]

14 часа назад, Нарек сказал:

Совет века  Чтоб потом тот кто будет переделывать сильнее матерился.

Когда нет флексов - display: table-cell это ваше всё. И если вы центрируете содержимое относительно соседнего блока марджином, вы верстаете не интерфейс а статичный кирпич 

[Нарек]

On 7/23/2017 at 0:05 PM, andrey7287 said:

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

В точку, так и живем со статичным кирпичом ;)