Jump to content
  • 0

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

Oleg90s

Asked by Oleg90s,

 Share

Question

Oleg90s Explorer

Oleg90s

Posted
Posted

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

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
Svetlana_P Explorer

Svetlana_P

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

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

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

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

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

 

Link to comment
Share on other sites
  • 0
Евгений_SB Explorer

Евгений_SB

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

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

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

Link to comment
Share on other sites
  • 0
Svetlana_P Explorer

Svetlana_P

Posted
Posted

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

Как вариант, через атрибут 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

Link to comment
Share on other sites
  • 0
Oleg90s Explorer

Oleg90s

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
Евгений_SB Explorer

Евгений_SB

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

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

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

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

Link to comment
Share on other sites
  • 0
andrey7287 Explorer

andrey7287

Posted
Posted

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

Link to comment
Share on other sites
  • 0
Oleg90s Explorer

Oleg90s

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

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

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

Link to comment
Share on other sites
  • 0
andrey7287 Explorer

andrey7287

Posted
Posted (edited)

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

Edited by andrey7287
Link to comment
Share on other sites
  • 0
andrey7287 Explorer

andrey7287

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

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

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

Link to comment
Share on other sites
  • 0
Нарек Explorer

Нарек

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept