Подготовка фотографий для web. — Sergey Brezhnev — LiveJournal
Сегодня поговорим о том, как я подготавливаю картинки для публикации в интернете.
Когда ко мне поступают заказы на обработку, то я отдаю фото в полном размере и не парюсь над веб размером — заказчик всё сделает сам, если ему нужно. А если это заказ на съёмку (а мы с Алиной бывает берём совместные заказы), тогда готовый материал заказчику уходит полноразмерным и в размере для веба. И бывали случаи, когда заказчик спрашивает, а почему полноразмеры более мутные? Вопрос тут немного некорректный. Правильнее было бы сказать, что это размер для веба более резкий. Так и должно быть, размер для веба должен смотреться выигрышнее, т.к. большинство клиентов будут смотреть ваши работы именно в интернете и именно в небольшом размере. Не нужно забывать, что просматривая полноразмерное фото, ваш просмотрщик масштабирует его под размер экрана и делает он это по каким-то своим алгоритмам. И в 99% случаев полноразмерное фото, масштабированное до размеров экрана, будет выглядеть более мутно, нежели его увеличить до масштаба 1:1.
Отсюда идёт псевдо-размытость, которой на самом деле нет. Это как с лесенками в фотошопе при разном масштабе… но сейчас не об этом.
Для себя я определил оптимальным размер картинок для веба следующий: 1200px по горизонтали и 900px по вертикали.
Посмотрим, как выглядит полноразмер (масштабированный) и размер для веба (1:1) рядом.
(Фото кликабельно. Лучше посмотреть его в полном размере в новой вкладке. Так будет лучше видна разница)
Разница хорошо видна на листьях дерева, на волосах, платье, букете.
У этого фото я просто изменил размер и не шарпил совсем. Размер изменил Ctrl+Atl+I, выставил 900 px по вертикали и готово.
Пробуя несколько вариантов уменьшения (в 1 раз или в несколько раз поэтапно и т.д.), я пришёл к тому, что лучшее враг хорошего. И в 80% случаев, если картинка изначально хорошая, резкая, то никакого шарпа после однократного уменьшения не требуется совсем. Картинка и так за счёт уменьшения становится визуально более резкой, чем полноразмер.
Этого хватает с головой.
Но в оставшихся 20% я всё же добавляю резкость уже на уменьшенную копию. Тут у меня 2 варианта. Первый — шарплю всю картинку и потом ластиком примерно на 50% стираю перешарпленные места (обычно это границы переходов яркостей, т.е. контуры объектов). И второй вариант, если картинка в целом нормальная, но мне нужно что-то отдельно подчеркнуть, то шарплю только требуемый участок.
Рассмотрим ещё одно фото. Изначально оно достаточно резкое (6630px по длинной стороне), при 100% видна везде фактура. Но при уменьшении до 1200px по горизонтали детали читаются не так сочно. Поэтому надо пошарпить.
(Gif-ка кликабельна)
Я не заморачиваюсь с настройками резкости для веб-размера, а делаю дубликат слоя (после изменения размера) и применяю к нему самую простую резкость Filter/Sharpen/Sharpen (Фильтр/Резкость/Резкость). А дальше смотрю на результат. Если кажется, что резкости много, то уменьшаю прозрачность слоя. Если кажется, что только в определённых местах слишком резко (в основном контуры), то протираю ластиком именно в тех местах.
Если всё сразу хорошо, то сохраняю. В данной гифке у меня копия слоя на 100% и в паре мест протёр ластиком, где показалось, что контуры слишком резкие.
(Кстати, это фото салона Тигуана, который обрабатывал я. Есть еще несколько фото машины полностью, но напишу в блог об этом чуть позже).
Стоит заметить, что я говорю именно о добавлении резкости для картинок в веб-размере, а не полноразмерных. Для полноразмерных я использую несколько способов добавления резкости. Это Sharpen (Резкость), Unsharp mask (Контурная резкость), Smart sharpen (Умная резкость) и изредка High pass (Цветовой контраст). Для разных случаев разный, но в большинстве случаев просто по настроению. Не считаю, что стоит уж очень сильно заморачиваться по этому поводу.
И, конечно же, не забывайте, чтобы цветовой профиль фотографий был sRgb. Иначе могут возникнуть проблемы с отображением цвета.
Всем мир!
Группа вк: vk.com/sergretouch
Биханс: www.behance.net/sergretouch
Инстаграм: http://instagram.
com/sergey_brezhnev
Ютуб: http://www.youtube.com/user/sergbrezhnev
Facebook: https://www.facebook.com/sergey.brezhnev.7
Tags: Личный опыт, Урок, Уроки фотошопа
Подготовка изображений для интернета – Симков Михаил ≈ персональный сайт профессионального фотографа (Москва)
С момента появления всемирной информационной сети была актуальна, проблема размещения в ней изображений. Как правило текст страницы занимает всего несколько десятков килобайт, в то время как изображения могут быть в десятки, сотни раз больше по объему. Это приводит к ситуации когда пользователь открыв страницу, несколько минуть ожидает загрузки интересующей его иллюстрации. Например при отправке по электронной почте удается присоединить к письму только несколько снимков, т.к. почтовый сайт не принимает письма большего объема.
Фотографии получаемые цифровой камерой занимают так много места из за избыточной информации (разрешение, детали, оттенки цвета). Высокое разрешение необходимо при печати фотографии, но для того что бы получить впечатление от снимка на экране, достаточно его уменьшенной копии.
Самым популярным форматом размещения изображений в интернет является Jpeg, который благодаря своему алгоритму сжатия, оптимизирует изображение делая итоговый размер файла значительно меньше.
Чем меньше качество сжатия тем меньше размер файла, и тем больше “артефактов” на фотографии.
Деффекты сжатия в jpeg.Два способа уменьшить размер изображения.
Уменьшение разрешение изображения. Как правило цифровые камеры позволяют делать снимки разрешением 2000 на 3000 пикселей и больше. Разрешение экрана на котором просматривают эти фотографии редко превышает 1280 на 1024 пикселя. Таким образом уменьшив разрешение изображения до 1000 пикселей по широкой стороне, мы получим выигрыш в объеме файла с 1,25 Мб до 0,2 Мб т.е. в шесть раз. При этом изображение на экране будет выглядеть практически так же а загружаться заметно быстрее.
Увеличить степень сжатия.
Формат jpeg позволяет уменьшить размер изображения, потеряв некоторые детали изображения. На практике низкое качество означает появление дефектов на изображении, т.н. «артефактов сжатия». Эти дефекты становятся заметны они становятся только при приближении, а при обычном промоторе в браузере и вовсе незаметны.
Снизив качество изображения с 80 до 40 мы уменьшили размер файла с 0,2 Мб до 0,06 Мб, т.е. почти в три с половиной раза. Фото с низкой и высокой степенью сжатия.
«Сжатие» в Графическом редакторе.
Оба способа «оптимизции» размера фото, можно выполнить с помощью специализированных графических редакторов.
Расскажем как это сделать, с помощь одного из самых мощных и популярных программ- Adobe Photoshop.
Рассмотрим порядок действий:
Откройте ваше изображение в Photoshop ;
В горизонтальном меню выберите Файл (File)>Сохранить для Веб (Save for Web)
Выбрав Показать оптимизированное изображение Otimised (1), необходимо будет задать размер (2) и качество (3) конечного файла.
А теперь подробнее.
Выберите вкладку Размер изображения (Image size) (1), убедившись что стоит галочка сохранять пропорции (Constrain proportions) (2). Укажите ширину (Width) в 1000 пикселей (3), а затем нажмите Применить (Apply) (4).
После изменения разрешения и качества, можно оценить размер конечного файла, по числам в нижнем левом углу экрана.
размер файла и время его загрузки, указывается в нижней части экрана.Укажите формат изображения Jpeg (1), задайте качество изображения 40 (2), и нажав Сохранить (Save) (3), укажите директорию сохранения “оптимизированного” файла.
Для автоматической обработки большого количества файлов необходимо обратиться к пункту Автоматизация > Пакетная обработка (предварительно записав последовательность в пункте Действия). Альтернативный способ.
Существует бесплатный редактор XnView так же позволяющий уменьшать размер изображения. Вот порядок действий:
Запустив программу необходимо найти и открыть в её браузере выбранное изображение,
Выберите пункт горизонтального меню Рисунок > Изменение размера
Убедившись, что стоит галочка напротив “сохранять пропорции” (1), укажите ширину в 1000 пикселей (2), а затем нажмите Ок (3).
Далее выберите в горизонтальном меню Файл > Экспорт .
Убедитесь что формат исходного файла выбран как Jpeg (1), измените качество сжатия до 40 (2). Убедившись что итоговый размер файла достаточно мал (3), выберите Сохранить (4) и укажите место для сохранения оптимизированного изображения.
Совершив чуть больше действий по сравнению с Фотошопом, мы имеем тот же результат.
Для автоматической обработки большого количества файлов, в программе предусмотрена пакетная обработка фалов.
При создании изображений для размещения в сети, рекомендуется оставлять оригиналы, т.к. «оптимизированный» вариант будет посредственно смотреться на печати, и как правило не годится для последующей обработки.
Фото-сайты. Для размещения изображений в интернете, так же можно использовать специализированные сайты, позволяющие пользователям хранить на них свои снимки. Обычно такие сервисы предлагают автоматически уменьшить и оптимизировать изображение. Пользование такими ресурсами не требует от пользователя, наличие какого либо программного обеспечения на своем компьютере, и может быть весьма удобным для человека далекого от компьютера.
Пример интерфейса одного из множества фото-сайтов.Благодаря развитию инфраструктуры, и конкуренции между провайдерами, с каждым днем скорость доступа в интернет увеличивается. Для конечного пользователя, это означает то, что уже нет такой острой необходимости, в сжатии, «оптимизации» фото. С другой стороны, не стоит забывать, что «быстрый» и безлимитный интернет доступен далеко не всем и всегда.
Небольшое разрешение фотографий, еще один из способов защитить свое авторское право.
Как подготовить фотографии для Интернета
- Последнее обновление: 18 ноября 2021 г.
- Саймон Келли
Если бы я сказал вам, что 40% пользователей покинут веб-сайт, загрузка которого занимает более 3 секунд, и что Google подтвердил, что скорость загрузки сайта является фактором ранжирования, что бы вы сделали, чтобы ускорить свой сайт? Знаете что тормозит? Понятно, что быстрая загрузка веб-сайта важна, но как вы оптимизируете свой сайт?
Одним из самых простых способов ускорить работу веб-сайта является оптимизация изображений и фотографий перед их загрузкой. Ниже приведены два шага, которые вам нужно предпринять, чтобы повысить скорость работы вашего сайта.
- Измените размер изображения до нужных размеров
- Оптимизация размера файла с помощью TinyPNG или Kraken.io
Подробнее о каждом шаге.
Шаг 1. Измените размер изображения
Изменение размера фотографии до нужного размера — это первый шаг к тому, чтобы убедиться, что вы не загружаете большие изображения, которые вам нужны. Большинство цифровых камер и телефонов сохраняют фотографии с максимально возможным разрешением, которое обычно во много раз больше, чем нужно для отображения в Интернете. Фотография с разрешением 1 мегапиксель – это примерно 1200 пикселей × 9.00 пикселей, что является хорошим размером для большинства веб-сайтов. Если у вас еще нет факсимильного аппарата, весьма вероятно, что камера/телефон, который вы используете, делает фотографии намного крупнее 1 мегапикселя, поэтому важно сначала уменьшить этот размер.
До какого размера следует изменить размер?
Размеры, до которых следует изменить размер, зависят от того, где вы хотите разместить фотографию на своем сайте, и в большинстве случаев размер фотографии не должен превышать 1200 пикселей в ширину и 900 пикселей в высоту.
Проконсультируйтесь со своим веб-дизайнером / разработчиком, чтобы узнать точные размеры, если вы не уверены.
Вы также можете легко использовать функцию «проверить элемент» Google Chrome, чтобы увидеть размер любого элемента на веб-странице. На приведенном ниже снимке экрана показано, что ширина этой статьи составляет 795 пикселей, поэтому, если я хочу добавить изображение, занимающее всю ширину статьи, я должен изменить размер своих фотографий, чтобы они были не больше 795 пикселей в ширину.
Используйте инструмент Chrome «Проверить элемент», чтобы увидеть ширину любого элемента на веб-сайте
Как изменить размер?
Теперь, когда вы знаете, что вам нужно изменить размер, как вы это сделаете? Вам нужна программа для редактирования графики. Мой собственный рабочий процесс выглядит примерно так:
- Открыть изображение в Photoshop
- Выполнение любых ретушей или небольших правок и обрезки
- Сохранить изображение для Интернета и устройств
- Выберите PNG, если мне нужна прозрачность, или JPEG, если она мне не нужна.
Я обычно сохраняю свои изображения в формате JPEG high. - Оптимизировать размер файла изображения (подробнее ниже)
Я обычно сохраняю свои изображения в формате JPEG high.Если вам не нужен Photoshop для вашей профессии, то вряд ли у вас есть копия. К счастью, есть отличные альтернативы Photoshop, которые намного легче и могут легко помочь вам обрезать изображения до нужного размера:
- Kraken.io
Большим преимуществом Kraken.io является то, что вы можете изменять размер изображения, пока система оптимизирует его для вас. Два шага в одном — это всегда хорошо! - Paint.net
Простой инструмент для редактирования изображений для Windows. - Pixlr
Программа для редактирования фотографий для Mac, Windows, iOS и Android - Skitch
Удивительный инструмент для создания скриншотов от разработчиков Evernote.
Шаг 2. Оптимизация размера файла
Фотографии содержат метаданные, которые занимают место и увеличивают размер фотографии. Если у вас нет конкретных причин для сохранения этого контента, его можно удалить без ущерба для качества фотографий.
TinyPNG — отличный инструмент и очень быстрый в использовании. Их талисман Panda даже поздравляет вас с прекрасными навыками оптимизации изображений.
Теперь, когда ваше изображение изменено и оптимизировано, вы готовы загрузить его на свой сайт. Не останавливайтесь сейчас, порадуйте панду и оптимизируйте все свои изображения!
Поделиться этой публикацией:
Привет, я Саймон Келли, веб-дизайнер и консультант по цифровому маркетингу из Мельбурна.
Уже более десяти лет я создаю веб-сайты и помогаю своим клиентам получать больше трафика от Google.
Мне посчастливилось тесно сотрудничать с некоторыми из самых умных компаний, предпринимателей и коучей Австралии, включая Envato, Bayside Blades, CyberCX, Троя Дина, Дэвида Дженинса, Эми Белл и многих других.
Мне нравится помогать моим клиентам разрабатывать веб-сайты и системы цифрового маркетинга, которые помогают им экономить время и привлекать больше идеальных клиентов на свои веб-сайты, чтобы они могли развивать свой бизнес.
Если вы хотите работать со мной и моей командой, свяжитесь с нами через нашу контактную страницу.
Дополнительные статьи, которые могут оказаться полезными:
Хотите развивать свой бизнес в Интернете в 2023 году?
Если вы хотите развиваться в Интернете, вам нужен способ привлечь идеальную аудиторию и превратить ее в клиентов.
Расскажите нам о своем бизнесе, и мы разработаем индивидуальный план, который поможет вашему бизнесу расти с помощью цифрового маркетинга.
Renegade Empire — агентство веб-дизайна в Мельбурне, которое помогает компаниям расти в Интернете. Если вы увлечены тем, что делаете, имеете проверенное предложение и хотите привлечь больше клиентов и заказчиков, тогда давайте пообщаемся.
Компания
Услуги
Сделано с ❤ компанией Renegade Empire
Отлично, приступим!
Подготовка фотографии для использования в Интернете
Две самые важные особенности фотографии при просмотре в Интернете: она быстро загружается (имеет небольшой размер файла) и при этом выглядит хорошо . «Как?» Я слышу, как ты спрашиваешь. Ну, на самом деле, это не так невозможно, как может показаться на первый взгляд. Этот урок покажет вам, как сделать это с помощью Photoshop, но большинство программ для редактирования похожи, и вы должны быть в состоянии достичь тех же результатов.
Размер изображения и резкость
Многие фотографии, которые вы видите в Интернете, имеют размер 1024 пикселя по самой длинной стороне. Это хороший размер, так как он не выглядит слишком большим на небольших экранах, а также не выглядит слишком маленьким на больших экранах.
Когда вы уменьшаете размер фотографии с помощью более ранних версий Photoshop, чем CC, вы теряете большую часть ее резкости .
Если это касается вас, вам нужно использовать маску нерезкости , чтобы вернуть эту резкость. Инструмент можно найти в разделе « Фильтр > Резкость > Нерезкая маска… “. Радиус , равный 0,5 , идеален, а повышение резкости от 40 до 80 % вернет этот кристально чистый вид.
Если у вас есть Photoshop CC, у них есть инструмент под названием «Bicubic Sharper (уменьшение)», который применяется во время сжатия и хорошо помогает сохранять резкость меньшего изображения. Из-за этого в большинстве случаев мне не нужно использовать нерезкую маску после сжатия.
Изменение размера изображения , перейдите к « Изображение > Размер изображения… ». Введите 1024 пикселя в поле ширины для альбомных изображений или в поле высоты для портретных. Убедитесь, что значок ссылки нажат , так как это сохранит правильные пропорции изображения.
Размер файла
Само собой разумеется, что чем меньше размер файла, тем быстрее загружается изображение .
У людей очень короткая продолжительность концентрации внимания, хотят они в это верить или нет, поэтому несколько медленно загружающихся изображений на вашем веб-сайте заставят многих посетителей упаковаться. Быстрая загрузка онлайн-портфолио имеет первостепенное значение и позволит вашим посетителям дольше увлечься вашими изображениями.
Когда я сохраняю фотографию размером 1024 пикселя по длинной стороне в формате JPEG, ее размер составляет около 500 КБ. Это может показаться не таким уж большим, но два таких изображения весят 1 мегабайт. Десять изображений весят 5мб, и очень быстро ваш сайт становится тяжелым и вялым.
К счастью, это можно обойти. Если вы сохраните изображение, используя настройку « сохранить для Интернета », размер файла значительно уменьшится. Для меня то же самое изображение, изначально показывающее 500 КБ, будет сохранено на 140 КБ. Самое приятное, что разница почти незаметна для глаз. Он сохраняет изображение с разрешением 72 пикселя на дюйм, поэтому размер файла меньше.