Раскажите как правельно это делается:
Мокет PSD содержит фото размером 3648×5472 и весит оно 3.47мб. Верстая сайм размер под фото (согласно мокета) отводиться 350×416.
Вопрос:
Как я должентэто фото переработать чтоб использовать его в верстке сайта. Ведь я могу
.родитель {
width: 350px;
height: 416px;
}
.родитель img {
width: 100%;
height: 100%;
}
Вопрос 2:
В добавок это огромное фото (3648×5472) используется в реальном сайте не всё - только центр и смещение в право.
Я, если не перерабатывать это фото, могу его задаль
{
background-image: url () no-repeat;
background-position: 50% 15%;
background-size: cover;
}
И всё получается как надо (Как по макету)! - мне сказали ч то это всё не правельно, так делают только школьники...
Вопрос 1 - нет, так делать не надо. Ведь от того, что Вы зададите картинке маленький контейнер для рендеринга размером 350 на 416, не означает что она от этого станет меньше весить.
Вопрос 2 - значит не нужно экспортировать всю картинку. Экспортируйте только видимую часть, которая используется. И тогда без всяких смещений она встанет как надо.
P.s. а вот выбор использовать img или background-image зависит от того, важна ли эта картинка с точки зрения контента. Если эта картинка полезна сама по себе как контент - то img и ей нужен alt, описывающий что на картинке изображено, важное как контент.
Вадим, Спасиба Вадим.
Скажите пожалуйста, мне сказали что использовать "Резиные фотографии" НЕЛЬЗЯ.
Нужно использоваль и для каждого медиазапроса готовить своё фото. Это правда?
мне сказали что использовать "Резиновые фотографии" НЕЛЬЗЯ
Не совсем понятно что имеется в виду под "резиновые фотографии". Это когда берёте десктоп фотку и ужимаете её в размерах при уменьшении разрешения экрана?
Если да, то тут зависит от проекта. Ну и "нельзя" это слишком громко сказано. Скорее - настоятельно не рекомендуется.
Соответственно, если у Вас есть картинка, которая на десктопе 1200х600, на планшете 800х400, а на телефоне 400х200, То, по хорошему, у Вас должно быть шесть экземпляров этой картинки.
На каждый брэйкпоинт по 2 штуки. С одинарной плотностью пикселей и с двойной.
Например на мобилку будут такие две картинки:
1) 400х200 одинарная плотность пикселей
2) 800х400 - двойная.
На планшет:
1) 800х400 - одинарная плотность
2) 1600х800 - двойная.
На десктоп:
1) 1200х600 - одинарная
2) 2400х1200 - двойная.
Ну и все прогнанные через оптимизатор. Например, tinypng. Но это уже на любителя. так как он немного мылит конечное изображение.
А в идеальном мире, их должно быть ещё больше. Каждая фотка в одинарной плотности и в двойной и разных форматов. jpeg\png + webp + avif. Итого получаем 3 брэйкпоинта, 3 формата файлов, 2 плотности = 3*3*2 = 18 вариантов одной картинки. НО это прям совсем идеальная картина мира, и это сложная и дорогая процедура по подготовке всех этих картинок. Это так. скорее для общего сведенья. Не стоит бросаться с головой так делать. И это не для каждой картинки так нужно.
Вадим,
Я рад что есть еще такие люди как Вы Вадим. Которые дают ИМЕННО конкретный ответ, а не воду.
Вопрос:
А когда интернет магазине- тогда как?.
Кто будет этим заниматся, ведь там одни фото. Подскажите пожалуйста.
Вадим,
Даже точнее вопрос:
Такие сайты как - OLX или PROM где человек дабовляет фото (допустим велик) продам. Ведь он добавляет лишь одну фотку! Кто добавляет остальные 18-ть ватиантов этой фотки.
Ведь сайт можно с этим объявлением посмотреть на любом устройстве?
Или тот же Контакт, Инстаграм ???
Саша, Я же сказал, это картина в идеальном мире. Далеко не все так делают, даже гиганты.
А вообще, если картинка при всех разрешениях одинаковая, то есть средства автоматизации, как на бэкэнде, так и на фронтенде, в процессе сборки проекта.
А Вы могли бы подсказать что это за средства автоматизации или где про них можно почитать. Как мне верстальщику надо делать вёрстку, чтоб дальше всё работало.
Ведь ести я создам вёрстку под фиксированние размеры фото - оно (фото) на разных устройствах всё сломает.
Как же всё-таки они это делают??? Вадим,
Саша, Тут зависит от выбранного подхода к адаптации интерфейса.
Собственно, отличают 2 вариант
• Адаптивный интерфейс (adaptive) - проще в реализации и сопровождении. Суть которого в том, что интерфейс имеет некоторое количество брэйкпоинтов, при достижении которых применяет указанный набор стилей. При таком подходе общая ширина контента сайта строго фиксируется, скажем, на 320пикселей при ширине экрана менее 768пикселей, 768пикселей при менее 1200пикселей и 1200пикселей при ширине 1200+ пикселей. И соответственно контент всегда по центру отображается по горизонтали.
• Резиновый интерфейс (responsible) - включает в себя адаптивный подход с его брэйкпоинтами, однако в резиновом подходе к адаптации интерфейсов меньше жёстких значений(пикселей), больше относительных. В частности - процентов. Таким образом, контентная часть сайта при уменьшении размера экрана до 1100пикселей по прежнему занимает всё доступное пространство -1100 пикселей, но некоторые блоки начинают сужаться. В том числе и картинки.
Резиновый подход к адаптации интерфейсов де факто стандарт в наши дни, так как никогда не знаешь на устройстве с каким экраном открывается интерфейс, но за счёт резиновости пользователь получает наиболее удобное под его экран отображение интерфейса.
Водили, водили и вернулись к исходной проблеме!
И так, как правельно верстать сайт:
1 - через picture.
2 - через responsible (резиновый)
3- вариант о котором я не знаю, или никто не говорит...
Вадим,
проблеме!
И так, как правельно верстать сайт:
1 - через picture.
2 - через responsible (резиновый)
3- вариант о котором я не знаю, или никто не говорит...
Вадим,
Давайте подытожим.
Если требуется: Адаптивный интерфейс (adaptive) - верстаем через picture.
Если требуется: Резиновый интерфейс (responsible) - верстаем через резиновое-фото на %-тах.
Я вас правельно понял?
Саша, нет. В идеале всегда используем picture. А с процентами или жёсткими значениями от требования заказчика. Но адаптивно делают настолько редко, что под адаптивным уже всегда подразумевают responsible
Правильно - вырезать только ту часть изображения, которая реально используется, потом уменьшить её до реальных размеров (и сделать копии для разных PPI), а потом сжать через оптимизаторы, чтобы удалить лишнее.
И тогда три с половиной мегабайта превратятся в сотню байт.
К "production" это всё не имеет никакого отношения - это первые шаги вёрстки любого макета.
Я Вас правельно понял:
Сразу я вырезаю фото и макета PSD размером 350×416, потом уменьшаю его для (Тел. Планше. - и всех media) и опять для них вырезаю?
Алексей Уколов, я ничего вразумительного найти не смог! Поэтому весь свой вопрос задал ЗДЕСЬ. В надежде конкретной помощи. Если Вам не тяжела - сбрости ДОСТОЙНУЮ ссылку я буду Вам признателен.
Простой
