Нажмите "Enter" для пропуска содержимого

Оптимальный размер сохранения фотографий: Оптимальный размер фото для сайтов: пошаговая инструкция с фото

Содержание

Оптимальный размер фото для сайтов: пошаговая инструкция с фото

И снова здравствуйте, дорогие мои читатели. С вами на связи, Тимур Мустаев. Сегодня хочу отойти от основной темы и рассказать вам, про оптимальный размер фото для сайтов. Многие совершают грубейшие ошибки, когда публикуют фотографии, взятые сразу из фотоаппарата. Сегодня вы узнаете, как правильно подготавливать фотографии, для публикации на сайтах.

С чего все начинается?

Изображения, получаемые цифровой камерой, преобразуются в формат JPEG прямо в самом фотоаппарате. Там для этого есть аппаратный кодек.

Исходный формат RAW имеет слишком большой объем данных, хотя он и хранит максимум информации об изображении, о снятом кадре. Можно сказать, что это копия матрицы камеры на момент съемки.

Но в таком “сыром” виде его использовать нельзя. Поэтому RAW используют профессионалы, как отправную точку для дальнейшей обработки, – либо очень уж крутые фотохудожники, либо эксперты: в области науки, техники, криминалистики, или медицины. В тех случаях, когда надо вытянуть максимум качества из отдельного фрагмента изображения.

Большинство репортеров и даже художников довольствуются JPEG, настраивая камеру под свои цели. (Любой фотограф вам скажет – дайте мне светосилу, а зерно во вторую очередь. Поэтому огромный объектив с просветленной оптикой ценится больше, чем матрица с огромным разрешением.)

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

Делать веб-страницы с такими фотками, при всем их качестве, – дело неблагодарное. Они медленно грузятся.

Скорость загрузки является одним из самых-самых важных параметров сайта, особенно коммерческого. Да и простые блоги быстро разочаруют своих поклонников, если появления какого-то интересного или интригующего фотосета придется ждать несколько десятков секунд или даже несколько минут. Так что тут важно, и что предпочесть, и как это сделать?
Давайте разберем по порядку.

Оптимальный размер изображения

Во-первых, не только текст, но и изображения индексируются поисковыми системами, которые предпочитают большие картинки маленьким. Значит, размер картинки целесообразно брать побольше. Но до каких пор?

Очевидно, что до размеров экрана устройства в пикселях. Это максимум, а еще на странице может быть использован двух- или даже трехколоночный макет. Много чего еще зависит от атрибутов тега img. Загруженное изображение может масштабироваться самим браузером, если это предписано в разметке страницы.

Во-вторых, разрешающая способность экрана на большинстве устройств 72 пикселя на дюйм или 96. Совершенно незачем пытаться отображать на таких экранах изображения с 300 пикселей на дюйм. Лишние пиксели будут просто усреднены и будет взята их проекция на один.

А если мы попытаемся изобразить фото в масштабе 1:1 то получим огромное изображение с полосами прокрутки, то есть, сможем наблюдать только часть изображения одновременно.

Выходит, что зря грузилось много мегабайт? Выходит. Вот тут и открывается резерв для сжатия.

Процесс обработки

Есть много программ для работы с изображениями, в том числе и бесплатных. Но лучше, если мы сейчас возьмем какой-либо стандартный, общепризнанный редактор изображений. Например, Adobe Photoshop.

Фотошоп той или иной версии есть практически у всех, кто занимается сайтами, их созданием, поддержкой и продвижением и так далее.

Посмотрим на конкретном примере, как делается оптимизация фотографии, полученной с цифровой камеры, в редакторе Photoshop. В моей случае, я буду пользоваться Adobe Photoshop CS6 русской версией. Для тех шагов, которые мы с вами выполним, подойдет Photoshop любой версии. И так начнем.

1. Открываем фотографию в редакторе

ФайлОткрыть. В появившемся окне выбираем нужную фотографию.

На рисунке мы берем фото, имеющее размер около 4,5 Мб. Этот файл у нас в формате JPEG, полученную с зеркальной фотокамеры.

2. Уменьшаем размер фотографии

ИзображениеРазмер изображения

Здесь выбираем:

  • Разрешение, ставим 72 пикселя на дюйм, нам больше и не надо.
  • Размер. Ширину ставим 800 пикселей, он автоматически назначит высоту, в данном случае, он поставил 533 пикселей, согласно пропорций фотографии.

Важно! Ставим все галочки, картинки. Это:

  • Масштабировать стили;
  • Сохранить пропорции;
  • Интерполяция: Бикубическая автоматическая

 

3. Правильное сохранение

Здесь, мы будем сохранять, специально для веб публикаций. Для этого заходим, ФайлСохранить для Web.

4. Выставляем качество

Но у нас остался еще вопрос качества. Какой размер фото считать разумным для загрузки? Ну, например, в пределах 200 Кбайт. Такие изображения являются вполне приемлемым компромиссом между качеством и размером.

Выбираем «Высокое» качество 60%. У нас получилось в этом примере 193.5 Кбайт при качестве 60%. Ну и ладно. На вид обработанное изображение почти неотличимо от оригинала. Вот в таком самом виде его и сохраняем. Готово!

5. Проверим в браузере

И наконец, проверим, как будет выглядеть картинка в интернете. Для этого совсем не обязательно грузить ее на хостинг или даже прописывать в html-коде локальной странички. Достаточно просто открыть ее вашим браузером, как это показано на последнем рисунке.

На этом и все. Теперь вы можете выкладывать фотографию куда угодно, веб-сайт, социальные сети и так далее.

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

Всех вам благ, Тимур Мустаев.

Размер фотографий для публикации в интернете: pavel_kosenko — LiveJournal

В каком размере лучше сохранять фотографии под web? Эта тема неоднократно затрагивалась в обсуждениях и я обещал описать свой подход. Но для начала мне было интересно оценить, насколько отличаются экраны людей, увлекающихся фотографией, от экранов среднестатистических интернет-пользователей, поэтому я запустил опрос об используемых разрешениях экрана (большое спасибо всем, кто проголосовал). Итак, попробую объяснить цифры.

Зачем вообще нужно обращаться к статистике? Дело в том, что если мы хотим, чтобы наши картинки было комфортно смотреть, необходимо учесть удобство большинства бользователей, а лучше всех. Реально учесть интересы всех вряд ли возможно, т.к. они часто противоречат друг другу. Например, если сделать картинку под большое разрешение вроде 3200х2400 px, её будет очень сложно просматривать на маленьком мониторе. И наоборот, если оптимизировать картинку под разрешение, скажем, 320х240, то на экранах значительной части зрителей она будет выглядить как маленькое пятнышко, где нельзя рассмотреть не только деталей, но и толком сюжета. Встаёт логичный вопрос — где золотая середина?

На мой взгляд, с одной стороны необходимо ориентироваться на большинство пользователей, с другой, учитывать интересы малочисленных групп. К значимым группам я бы отнёс аудиторию, составляющую 5%-10% и выше. Всё-таки менее 5%, это обычно пользователи со спецзадачами, а вот от 10%, это уверенно высокая часть аудитории, пренебрегать которой недопустимо. Есть и другие критерии. Например, иногда специально ограничивают потенциальную аудиторию тематической выборкой, заведомо отсекая «непрофильных потребителей», в угоду комфорта основных. Такой подход также бывает оправдан, но лично я предпочитаю по возможности учитывать интересы максимально возможного количества зрителей.

С максимальным ограничением размера фотографий ситуация более-менее ясна. Редко кто готов бесплатно раздавать графические файлы, поэтому просмотр в интернете обычно подразумевает режим preview (предосмотр). Для вполне качественной печати формата 10х15 достаточно разрешения 200 dpi, чему соответствует файл порядка 1200х800 пикселей. Охраняя свои творения от посягательств, фотографы стараются не допускать размещение в интернете файлов выше размера печати 10х15.

Для того, чтобы определиться с минимальными размерами, обратимся к статистике. В первую очередь к глобальной статистике интернета — например, w3counter.com, spylog.ru, hotlog.ru. Мы видим, что лидер сегодняшних хит-парадов, это разрешение 1024х768. Доля таких пользователей колеблется в среднем от 22% до 47%. Второе место принадлежит разрешению 1280×1024, которым пользуется от 15% до 20% человек. В моём опросе места 1 и 2 поменялись местами — 11% и 49% соответственно. Я думаю, это связано с тем, что мой блог читают в основном люди, в той или иной степени увлечённые фотографией, т.е. обладающие мониторами размеров выше среднего. Вместе с тем даже среди такой аудитории процент использования разрешения 1024х768 уверенно превысил 10%.

В настоящее время, с учётом имеющейся статистики, мне представляется оптимальным ориентация на экраны с разрешением 1024×768 пикселей. В этом случае мы учтём интересы большинства людей и менее численных групп, при этом не сделаем просмотр на незначительно меньших или больших экранах намного сложнее.

Когда мы говорим о разрешении экрана, то должны помнить следующее. Как правило, часть экрана требуется на интерфейсы операционной системы (например, кнопка «Пуск» и полоса навигации в Windows) и интерфейс браузера. Конечно, существуют режимы просмотра full screen (полный экран), но если вспоминать про удобство пользователей, то необходимо уместить картинку целиком в его стандартном поле для просмотра web-страниц. Давайте посмотрим, какового это поле при разрешении 1024х768? А оно примерно таково:


посмотреть крупнее (откроется в новом окне)

Размер 1000х620 пикселей определён примерно, т.к. в реальности он варьируется в зависимости от ОС, используемых режимов и интерфейсов браузера. Также некоторые учитывают ICQ-клиент, но я считаю, что для просмотра картинок в интернете человек вполне способен убрать его на это время.

С учётом минимально необходимых отступов, получается, что для показа картинки с соотношением сторон 3:2 у нас остаётся 600 пикселей по высоте. Что соответствует 900 по ширине.

900х600 — этот формат я определяю для себя в качестве максимального для публикации в интернете. Вот так он выглядит в реальном размере:

Фотография в таком размере будет показана целиком (без полосы прокрути) у подавляющего большинства пользователей. При этом такой размер вполне достаточен, чтобы рассмотреть детали и сюжет, даже если просматривать его на большом экране порядка 1600х1200 и более пикселей. Тем более, при слишком больших разрешениях люди часто предпочитают не открывать браузер на всю ширину. При описанном подходе у меня получаются следующие размеры картинок, которые я и стараюсь использовать по возможности:

3:2 (горизонтальный) — 900х600
3:2 (вертикальный) — 400х600
4:3 (горизонтальный) — 800х600
4:3 (вертикальный) — 450х600
1:1 (квадрат) — 500х500

При размещении картинок свыше 900х600 пикселей мы заведомо создаём неудобство просмотра для большого количества людей. В этом случае пострадает в среднем от 10% (увлеченной) до 50% (массовой) аудитории, у которых возникнут полосы прокрутки и которые не смогут без специальных действий просмотреть фотографию целиком на экране.

Несколько примечаний:

1. В случае нестандартных соотношений сторой я ориентируюсь на максимальный размер стороны согласно обозначенному ограничению 900х600. Например, картинку 3000х1500 пикселей я скорее всего уменьшу до 900х450.

2. Квадрат сам по себе создаёт ощущение большой площади, поэтому для гармоничного его просмотра с другими картинками, я беру максимальную сторону чуть меньше, чем для других случаев (500, а не 600).

3. В случае узкой длинной панорамы стараюсь сделать один размер для просмотра целиком на экране + ссылка на более большой вариант. Конкретные цифры зависят от самой панорамы, но для таких случаев при описанном подходе (наличие превью и ссылки) считаю допустимым делать картинку шириной 1200-1500 пикселей и даже больше. Но только, если такая картинка буде скрыта под отдельной ссылкой.

4. Для публикации фотографий в ЖЖ я стараюсь вынести вне ката более маленькую картинку (как правило, одну), чтобы не перегружать френд-ленты. Те, кого заинтересует превью, могут посмотреть нормальный размер под катом. Считаю размещение большой (порядка 900х600 пикселей) картинки вне ката чрезмерным, хотя не критичным. Т.е. я не обижаюсь на такие каринки в своей ленте :), хотя и считаю размеры свыше 900х600 перебором, который мешает удобству. Сам стараюсь для предосмотра (т.е. вне ката) не использовать картинки более 600х400.

5. Для тех случаев, когда необходимо показать очень мелкие детали в кадре, имеет смысл сделать кроп исходного кадра и разместить его отдельно, в качестве дополнительного материала. Такой кроп может потребоваться для демонстрации качества исходника, но никогда не используется для оценки фотографии и её сюжета.

Примерно так. Описанный принцип не претендует на объективность. Другие подходы также могут быть оправданы, в зависимости от целей и ориентирации на определённую (ограниченную) аудиторию. Просто я рассказываю о своём подходе и надеюсь, что эта информация может оказаться полезной. Как всегда, буду благодарен за отзывы и встречные мнения.

UPDATE. Обновленная статья (2015 год):
http://pavel-kosenko.livejournal.com/642666.html

Лучший формат для сохранения изображения

Универсальными такие графические форматы являются по той причине, что они читаются в любых программах просмотра изображений. Сохранить фото в файл с выбранным форматом можно в любом графическом редакторе, а распечатать снимки через принтер легко: это делается сразу с фотоаппарата или другого электронного носителя.

Самым известным и распространенным форматом для фото является JPEG или jpg, который обеспечивает высокое качество изображения с плавным переходом цвета, имея при этом небольшой размер. Большинство графических объектов на сайтах, собственные снимки, размещаемые в различных соцсетях, имеют идеальный для хранения фотографий и их просмотра формат jpg.

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

Формат TIFF лишен недостатков jpg, обладает великолепным качеством и изображения, и печати фото. Наиболее эффективен для хранения фото с большой глубиной цвета и при сканировании. Но весит настолько много, что не используется для размещения в интернете.

Очень часто для анимационных картинок и открыток в интернете используют стандартный графический формат GIF, имеющий наименьший размер файла, но ограниченное количество цветов. Для хранения качественного фото такой формат не используется, хотя он не подвержен потере информации при каждом его открывании и сохранении.

Формат PNG самый популярный после jpg в сети интернет благодаря одновременным достоинствам форматов jpg и gif. Помимо этого он обладает еще одним плюсом – поддерживает прозрачность картинки.

Специальные форматы для сохранения фото

Владельцев зеркальных цифровых камер волнует вопрос сохранения фото в формате RAW, который позволяет редактировать и корректировать в дальнейшем полученное изображение до неузнаваемости. Да и качество raw значительно лучше jpg, но при этом размер в разы больше, как и время, затраченное на обработку фото, которое требует определенных навыков и терпения.

Иллюстраторы и художники, создающие свои потрясающие картины с помощью специальных графических программ типа Photoshop, затрачивают на уникальные произведения значительное время. Чтобы в следующий раз продолжить работу над компьютерной графикой, им приходится сохранять фото в формате программы, в которой они рисуют. В фотошопе , например, это формат PSD. Специальные графические форматы позволяют сохранять используемые настройки, слои и маски, режимы и прочие тонкости при создании и обработке изображений.

Только после окончательной обработки фото можно сохранить изображение в формате jpg для публикации в интернете.

Какой формат выбрать для фото определяется практическим путем, сохраняя одно и то изображение в разных форматах для сравнения качества картинки и размера получившегося файла. Из полученных результатов выбирают оптимальный вариант для конкретного случая.

Как подготовить фотографию для печати на большой формат

Большая фотография — удивительная вещь.

Я люблю фотографии яркие, контрастныеи с четкими линиями. Порой даже просто пройдешь мимо такой фото, скользнешь боковым зрением, а настроение улучшится, промелькнет какое-то приятное воспоминание, да просто на душе станет светлее… Вот и все — фото работает, фото делает жизнь лучше…

Для начала определимся: большая фотография — это все форматы, которые превышают А4, грубо говоря 20 х 30 см.

На мой взгляд для наших квартир есть три оптимальных размера больших фото — 30х40 см, 40х60 и 60х80 см, а также все что рядом — полюс минус 10 см. Однако, кроме них, очень здорово смотрятся панорамы (это когда один из размеров фотографии гораздо больше другого, например 40 см х 150 см), фотообои, фотопотолки, и пр.

Итак, делаем большую фотографию. Д ля этого нужен фотоаппарат, немного «Фотошопа» и компьютер с монитором, который откалиброван, хотя бы средством «Адобе гамма» (см. в панели управления).

Фотоаппарат

Для обработки фотографии на большой формат нам нужно получить изображение в электронном виде, т.е. файл в формате который понимает «Фотошоп». Как правило используются файлы в формате RAW, TIFF (TIF) и JPG (JPEG) .

Формат RAW — это практически исходный электронный снимок, считываемый с матрицы фотоаппарата. Т.е. в этом формате почти нет сжатия изображения ни по разрешению кадра ни по цвету. Этот формат применяется обычно в очень дорогих цифровых фотоаппаратах (можно сказать в профессиональных камерах) и, редко, в обычных туристических аппаратах.

ормат TIFF (TIF) — очень хороший и информативный формат электронного изображения. Подавляющее число работ профессиональных фотографов изготавливается и хранится в этом формате. На дорогих фотоаппаратах этот формат как правило присутствует. Но! Встречаются и туристические цифровые фотоаппараты, в которых можно сохранять фотографии в формате TIFF . Объем такого файла для камеры с разрешением 10-15 Мегапикселей может составить до 30 Мб. Это очень неплохой результат для изготовления большой и очень хорошего качества фотографии. Главный недостаток таких файлов — объем, это значит, что Вам придется покупать большую флешпамять или как -то решать вопрос с освобождением памяти аппарата. Например, на 8 Гб флешке таких фотографий можно сохранить всего лишь около 300 штук. Это один день продуктивной съемки.

Формат JPG (JPEG ) — стандартный, ширпотребовский, удовлетворительно-оптимальный формат сжатия цифровых изображений. Присутствует во всех цифровых мыльницах и аппаратах верхнего уровня туристического класса. Этот формат позволяет совершать чудеса со сжатием изображения, превращая полноценный снимок в 30 МБ в картинку для интернета, имеющую 30 КБ веса, т.е. можно добиться сжатия в 1000 раз! И при этом Вы вполне поймете, что это именно та фотография! Формат JPEG позволяет делать и хранить на фотоаппарате тысячи электронных фотографий размером 300-500 кб, которые, приехав домой, Вы вполне можете напечатать на бумаге формата 10х15 см в любой химической фотопечатне за три рубля за штуку!

Это шедевр математических технологий «скрючивания» цвета, цветопереходов, градиентов, теней в общем всего того чем хороша большая профессиональная фотография… Но не стоит отчаиваться! В Вашем фотоаппарате наверняка есть режим съемки с «максимальным качеством». Именно его и следует включить, если предполагаете, что этот вид или портрет нужно сделать на большой размер. Вы получите на карте фотоаппарата электронный файл размером 5-10Мб, которых вполне может хватить на изготовление большого фото, если не придираться к деталям…

Хозяевам пленочных аппаратов — глубокий поклон за преданность пленке и тайнам фотохимических реакций! Лучшие файлы, которые мы получали для печати и до сих пор, непревзойденные по качеству, были сделаны со слайдов 9х12 см. Пленочные технологии до сих пор позволяют получить самые лучшие электронные изображения. Правда слайды нужно грамотно сканировать… Мы это делаем на мощных барабанных сканерах, которые выдают 24000 dpi оптического разрешения! Поистине при классном качестве слайда возможности по увеличению такого файла огромны!. Например «Музыку» и «Танец» Матисса можно напечатать в натуральный размер… Но это уже другая песня…

Итак мы сделали фотографию с максимальным качеством, на который способен Ваш фотоаппарат или отсканировали пленку (слайд), и теперь нужно узнать на какой размер мы его можем «растянуть». Для этого нужно загрузить файл в компьютер и запустить программу «Фотошоп».

Фотошоп


Открываем файл в Фотошопе: FILE — OPEN

Внимание! Если файл имеет расширение (т.е. сжат одним из способов, см. выше) RAW , то Фотошоп его откроет через встроенный модуль обработки этого формата. Поэтому, после того как файл откроется сразу же пересохраните его с помощью команды FILE — SAVE AS в формат TIFF .

Для начала поправьте фотошопом уровни, цвет, резкость и контрастность Вашей фотографии при помощи меню IMAGE — ADJUSMENTS .

Далее все просто: оптимальное разрешение электронного файла (это не разрешение печати! ) 200-300 точекна дюйм(!) . По нашему опыту 200 вполне достаточно для печати фотографии. Входим на вкладку IMAGE , щелкаем по IMAGE SIZE , появляется вот такое окошко:

Снимаем галочку «Resample image» и подставляем значение 200 pixels/inch . В окошках «ширина» и «Высота» появятся метрические размеры. В примере 69 см на 45 см. Это и есть размеры которые выдает Ваш файл для хорошей, качественной печати на плоттере (цифровой фотомашине). Маловато будет? Надо больше?

Устанавливаем размер, который нужен. Допустим нужна ширина 100 см, ставим в окошке «ширина» 100 см. Так как у нас стоит галочка на строке «Constrain Proportions » (соблюдение пропорций), то программа автоматически установит высоту фотографии и, соответственно, уменьшит разрешение (Re

solution) файла:


В нашем примере разрешение стало 138… точек. Увеличение разрешения файла рекомендую производить при помощи алгоритма интерполяции

Bicubic (бикубический), в несколько этапов, прибавляя примерно по 20 точек. Для нашего примера 160, 180, 200. Исследователи процесса интерполяции говорят, что при поэтапном увеличении результат будет лучше, да и компьютер это перенесет легче, без зависаний.

Примечание

Фотошоп предлагает, как правило следующие алгоритмы интерполяции:

Nearest Neighbor (по ближайшим точкам).

Это наименее точный метод интерполирования, но в то же время он не создает сглаживания вокруг линий. Алгоритм можно рекомендовать в тех случаях, когда требуется сохранить первоначальный набор цветов и резкость краев.

Bilinear (билинейный).

Этот алгоритм относится к среднему по качеству методу и выбирается, если предыдущий алгоритм не устраивает своим результатом.

Bicubic (бикубический).

Наиболее популярный алгоритм интерполирования, дает сглаженные границы и плавный тоновый диапазон цветов. Алгоритм Bicubic Resize применяется для произвольного изменения размера растровой картинки. Этот алгоритм является двухпроходным. Двухпроходный Bicubic Resize — это замечательный по качеству алгоритм. Но у него есть недостаток: он довольно медленный.

Bicubic Smoother (бикубический с размытием)

Аналогичен бикубическому алгоритму, но включает дополнительное сглаживание изображения.

Bicubic Sharper (бикубический с резкостью)

Аналогичен бикубическому алгоритму, но дополнительно повышает резкость изображения.

После интерполяции обязательно нужно оценить качество полученного файла, увеличивая его до реального размера (для этого нужно включить линейки View — Rules или Contrl+R и увеличивать фото пока линейки не станут в натуральную величину, что можно измерить простой линейкой). Изображение, которые Вы увидите обязательно будет иметь недостатки — расплывчатые границы цветопереходов, несколько увеличенные линии и т.д. И будьте уверены, что плоттер со своим разрешением печати в 1200 — 2400 точек, аккуратно все это напечатает. Отойдите от экрана примерно на 1 метр. Оцените теперь фотографию на экране. Ваша задача состоит в принятии решения — удовлетворяет Вас данная обработка или нет.

Если нет, то надо или увеличивать размер исходной фотографии или уменьшать размер печати.

Примечание

Надо сказать, что имеются специализированные программы предназначенные именно для увеличения размеров изображений (например Photo Zoom Professional). Эти программы наряду с уже упомянутыми алгоритмами, используют множество других, в той или иной степени улучшающие качество увеличенной фотографии. Некоторые алгоритмы действительно дают лучший результат, который даже виден глазом.

Сразу скажу одну очень важную вещь! Все сохранения и пересохранения файла изображения в процессе работы в Фотошопе обязательно делайте в форматах TIFF или PSD (см. примечание), но ни в коем случае не в JPEG! Наш любимый JPEG будет сжимать Ваше изображение при каждом пересохранении, каждый раз ухудшая его качество.

Примечание

Photoshop Document (PSD) — растровый формат хранения графической информации, созданный специально для программы Adobe Photoshop и поддерживающий все его возможности — сохраняет слои и папки слоёв, прозрачность и полупрозрачность, векторные графические элементы и стили слоёв программы, изображение сжимается без потери качества (RLE-сжатие).

Сохраните у себя на компьютере файл в формате

TIFF.

Дальше его можно записать на флешку, CD или DVD диски. Если очень нужно передать файл по интернету, то можно воспользоваться каким-либо сервером (типа webfie.ru или почтой mail.ru — удобный и быстрый сервер сделали ребята, рекомендую).

Однако помните, что любая передача файла в чужие руки ведет к его неизбежному размножению и, если он Вам очень дорог, то не забудьте заключить договор с печатающей организацией об эксклюзивности Ваших прав на этот файл. Лучше сделать его дома (в двух экземплярах) и при передаче файла попросить поставить на своем экземпляре подпись и, обязательно, печать.

(Копирование материалов данного сайта допускается

Знакомство с программой фотошоп лучше начинать с создания нового документа. Пользователю на первых порах понадобится умение открывать фото, предварительно сохраненное на ПК. Важно также научиться сохранять в Фотошопе любую картинку.

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

Размер;
поддержку прозрачности;
число цветов.

Информацию относительно различных форматов можно найти дополнительно в материалах, описывающих расширения с форматами, которые применяются в программе.

Подведем итог. Сохранение картинки в фотошопе выполняется двумя командами меню:

Такую команду следует использовать, если пользователь работает с существующим изображением с целью его редактирования. Программа обновляет файл в том формате, в котором он был до этого. Сохранение можно назвать быстрым: оно не требует от пользователя дополнительной регулировки параметров изображения.

Когда создается новое изображение на компьютере, команда будет работать как «Сохранить как».

Файл – Сохранить как… (Shift+Ctrl+S)

Эту команду считают главной, и при работе с ней нужно знать множество нюансов.

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

Кнопки, позволяющие управлять навигацией, представлены в виде стрелок. Пользователь показывает ими место, где планирует сохранить файл. С помощью стрелки синего цвета в меню нужно выбрать формат изображения и нажать кнопку «Сохранить» .

К примеру, если отдать предпочтение JPG , диалоговое окно будет выглядеть так:

Важно знать, что здесь осуществляется настройка качества изображения по желанию пользователя.
Для выбора обозначения в списке поля с цифрами выбирают нужный показатель, значение которого варьируется в пределах 1-12 . Обозначенный размер файла появится в окне с правой стороны.

Качество изображения способно повлиять не только на размер, а и на скорость, с которой открываются и загружаются файлы.

Базовый («стандартный») – при этом картинки или фото на мониторе отображаются построчно. Так отображаются файлы JPG .

Базовый оптимизированный – изображение с оптимизированной кодировкой Huffman .

Прогрессивный – формат, обеспечивающий показ, во время которого улучшается качество загружаемых изображений.

Сохранение может рассматриваться как сохранение результатов работы на промежуточных этапах. Специально для этого предназначен формат PSD , его разработали для использования в программе Фотошоп.

Пользователю нужно выбрать его из раскрывающегося окна со списком форматов и нажать «Сохранить» . Это позволит при необходимости вернуть фото к редактированию: будет выполнено сохранение слоев и фильтров с эффектами, которые вы уже применили.


Пользователь сможет, если понадобится, снова все настроить и дополнить. Поэтому в Фотошопе удобно работать как профессионалам, так и новичкам: не требуется создавать изображение с самого начала, когда можно вернуться на нужный этап, и все исправить.

Если после сохранения картинки пользователь хочет ее просто закрыть, команды, описанные выше, использовать не обязательно.

Чтобы продолжить работать в программе Фотошоп после закрытия изображения, следует нажать на крестик вкладки картинки. Когда работа завершена, кликните на крестик программы Фотошопа сверху.

В появившемся окне будет предложено подтвердить выход из Фотошопа с сохранением результатов работы или без него. Кнопка отмены позволит пользователю вернуться в программу, если он передумал.

Форматы для сохранения фото

PSD и TIFF

Оба эти формата позволяют сохранять документы (работы) со структурой, созданной пользователем. Сохраняются все слои, их порядок, стили и эффекты. Имеются незначительные отличия по размеру. PSD весит меньше.

Наиболее распространенный формат для сохранения фотографий. Подходит как для печати, так и для публикации на странице сайта.

Основным недостатком данного формата является утрата некоторого количества информации (пикселей) при открытии и произведения манипуляций с фото.

Имеет смысл применять, если на изображении имеются прозрачные участки.

Несжатое и необработанное фото. Содержит наиболее полную информацию обо всех особенностях снимка.

Создается аппаратным обеспечением фотокамеры и обычно имеет большой размер. Сохранять фото в RAW формате смысла не имеет, так как обработанные снимки не содержат той информации, которую требуется обрабатывать в редакторе RAW .

Вывод следующий: наиболее часто фотографии сохраняются в формате JPEG , но, если существует потребность создать несколько изображений разного размера (в сторону уменьшения), то лучше использовать PNG .

Остальные форматы не совсем подходят для сохранения фотографий.

Как сохранить фото в Фотошоп и ускорить свой сайт

Есть у вас проблемы с медленной загрузкой сайта? Довольно часто блогеры не задумываются над тем как правильно сохранять фотографии в Фотошоп для Web. А, между прочим, картинки и плагины делят первое место, как первопричина заторможенности в работе сайта. Сегодня своими секретами оптимизации фото поделится Лисицына Юлия, автор сайта «Фотошоп для блогера».

Чем плоха медленная работа блога или сайта? Прежде всего влиянием на поведенческий фактор посетителей. По статистике, лишняя секунда ожидания на 7% снижает конверсию на сайте, на 11% уменьшает просмотры страниц и на 16% снижает желание клиентов ещё раз заглянуть к вам в гости.

Большое фото может увеличить время загрузки вашего ресурса на 5%. Как же можно решить проблему не потеряв в качестве визуального контента.

Если вы хотите оптимизировать фото и загрузить картинку на блог, прежде необходимо сделать две вещи: выбрать правильный формат для фотографии и сделать минимальный разумный размер.

Напоминаю, оптимальный размер фотографии для публикации на сайте — не более 100 Кб. Для миниатюры сайта — не более 50 Кб.

Если для публикации выбрана цветная фотография, лучше сохранять в формате JPEG. Если картинка маленькая или транспарентная (полупрозрачная) — оптимально применить PNG формат. Различия форматов — в возможностях цветопередачи изображения.

Для получения минимального размера, используйте разумную компрессию (сжатие) картинки, т.е получение минимального размера без сильной потери качества.

Несмотря на обилие программ по обработке фотографий в данном обзоре я воспользуюсь Фотошоп и расскажу как должным образом сохранить фото для Web.

Данный протокол подойдет для всех версий Фотошоп ( от CS4 — точно).

Шаг 1 Открываем фото

На самом деле это шажочек. Открываем нашу картинку в Фотошоп. Меню «Файл» (File), подраздел «Открыть» (Open), и выбираем откуда открыть наше фото.

Шаг 2 Уменьшаем фото

Далее, уменьшим размер фото до необходимого для корректной публикации на вашем сайте. Для сайта Блоги Мам — это 500 pix

Заходим в меню «Изображение» (Image) и выбираем подраздел «Размер изображения» (Image size). В открывшемся окошечке, вводим необходимый нам размер по ширине. По автоматическим настройкам, высота фото уменьшится пропорционально.

Шаг 3 Возвращаем резкость

В результате уменьшения, фото станет немного размытым. Это убирается в один клик.

Меню «Фильтры» (Filtres), подменю «Усиление резкости» (Sharpen) — «Контурная резкость» (Unsharp Mask). И вводим значения как на фото, они оптимальны.

Вы зрительно увидите, что фотографии вернулась потерянная резкость.

Шаг 4 Сохранение фотографии в Фотошоп

Заходим в меню «Файл» (File), подраздел «Сохранить для Web» (Save for Web). В открывшемся для вас окне обращаем внимание на выделенные мною фрагменты.

Под цифрой 1, ещё раз акцентирую внимание на выборе формата вашего фото: GPEG или PNG.

Под цифрой 2, выбор качества изображения и, соответственно, его размера.

Под цифрой 3, акцентирую внимание на выборе цветового пространства RGB. Но оно у вас будет стоять по умолчанию.

Остаётся нажать кнопку «Сохранить» и опубликовать фотографию на вашем сайте. Хочу отметить, что использованное мною фото изначально «весило» 51Мб и имело размер 5000 pix по ширине. Конечное фото — 99 Кб и 500 pix по ширине.

Вот так, всего в 4 шага, вы можете самостоятельно и грамотно сохранить фотографию в Фотошоп и ускорить работу вашего сайта без вмешательства со стороны.

Автор текста Лисицына Юлия.

Источник фото: Unsplash.com

Как сохранить фото для интернета в фотошопе без потери качества

Главная » Разное » Как сохранить фото для интернета в фотошопе без потери качества

Как правильно сохранить изображение для Web в Photoshop

В левом верхнем углу области предварительного просмотра вы увидите серию из четырех вкладок. По умолчанию, выбрана вкладка «Оптимизация» (Optimized), которая означает, что вы не видите исходное изображение. Вместо этого, показан предварительный просмотр того, как изображение выглядит с текущими настройками оптимизации (которые мы рассмотрим чуть позже):

Как советуют веб-дизайнеры, лучше воспользоваться другой вкладкой, где в окне предпросмотра показываются сразу два изображения, оригинальное и оптимизированное, это вкладка «2 варианта» (2-Up):

При активной вкладке «2 варианта», теперь мы видим сразу два изображение, оригинальную версию слева и оптимизированную версию справа (если Ваша картинка имеет альбомную ориентацию, т.е. её ширина больше, чем высота, то тогда картинки будут показываться одна над другой):

Формат файла

С правой стороны диалогового окна находятся опции оптимизации изображения.

Первое, что нужно сделать, это выбрать правильный формат файла для нашего изображения. Если Вы открываете это окно в первый раз, по умолчанию установлен формат GIF. формат выбранного файла в верхней части (непосредственно под словом «Preset»). GIF в некоторых случаях используется для сохранения веб-графики, но для моей фотографии лучше подойдёт формат JPEG, поэтому я изменю GIF на JPEG:

Качество сжатия изображения

Непосредственно под опцией формата находится варианты выбора качества сжатия изображения, т.е. выходного качества самой картинки.
Мы можем выбрать из предварительно заданные параметров качества (низкое, среднее, высокое и очень высокое, и наилучшее, в англ. — Low, Medium, High, Very High, и Maximum) в выпадающем списке слева, либо можем ввести определённое значения качества в процентах справа.
Хотя довольно таки заманчиво задать максимальное качество для наших фотографий, оптимизация для интернета означает, что мы должны делать размер файла в мегабайтах как можно меньше, что означает поиск золотой середины между качеством изображения и размером файла. Значение качества «Высокое» почти всегда является оптимальным выбором, оно даёт нам приемлемое качество изображения при относительно небольшом размере файла. Выбор значения «Высокое» автоматически устанавливает значение качества на 60%:

Как только вы выбрали значение качества, убедитесь, что опция «Оптимизация» (Optimized) у Вас включена, т.к. она может помочь ещё несколько уменьшить размер файла. Опции «Прогрессивный» (Progressive) и «Встроенный (цветовой) профиль» (Embed Color Profile) включать не обязательно, т.к. всё-равно большинство веб-браузеров не поддерживают цветовые профили:

Цветовое пространство

Наконец, включите опцию «Преобразовать в sRGB» (Convert to sRGB), если она ещё не активна. Это позволит убедиться в том, что фотография сохраняется в цветовом пространстве sRGB, что, проще говоря, означает, что цвета на фотографии будут корректно отображаться на веб-сайте:

Размер изображения
Диалоговое окно также дает нам возможность изменить линейный размер изображения. Я рекомендую изменять размер изображения заранее, перед включением диалогового окна «Сохранением для Web», чтобы при сохранении для Web линейные размеры в пикселях были уже готовыми. Особенно это актуально для последней версии Photoshop CC с его
новым диалоговым окном «Размер изображения». Об изменении размера изображения в Photoshop CC рассказывается здесь, а в версиях CS6 и ниже — здесь.

Сравнение исходных и оптимизированных размеров файла

На данный момент, мы сделали все, что нужно, для оптимизации файла для Web, и теперь давайте посмотрим на размер файла в байтах в исходной и оптимизированной версиях. В моем случае, размер исходной фотографии (слева) был равен колоссальному для интернета значению — 1,29Mb что слишком велико для пользователей даже со средней скоростью интернета, а оптимизированная версия (справа), которая выглядит почти так же хорошо, как и оригинал, получилась всего 41,85 Kb :

Сохранение изображения

Чтобы сохранить оптимизированную версию Вашей фотографии, нажмите кнопку «Сохранить» (Save) в нижней части диалогового окна. Photoshop откроет новое диалоговое окно «Сохранить оптимизированный как» (Save Optimized As), которое позволяет при необходимости переименовать изображение, а также выбрать нужную папку на жёстком диске для сохранения. Когда закончите, нажмите кнопку «Сохранить», чтобы сохранить изображение и выйти из диалогового окна:

Ну вот, собственно, и всё. Фото теперь полностью оптимизировано и готово к оправке по электронной почте либо для размещения на сайте.

Подготовка фотографии для Интернета

Урок №2

Подготовить фотографию к размещению в интернете не могут большинство начинающих пользователей. Пытаются «всунуть» фотографию огромного размера на свой сайт, а потом удивляются, почему страница сайта очень долго грузится, или почему искажены пропорции фотографии.

При подготовке фото для интернета, нужно максимально уменьшить объем файла, что бы посетители не ушли с сайта до окончательной загрузки фотоснимка, в то же время, что бы качество снимка не сильно пострадало при сжатии.

Итак, сначала определяемся, какой размер будет у нашей фотографии.

Смотрим исходный размер. То есть, в меню Изображение, выбираете пункт Размер изображения.

Открывается окно Размер изображения

Как видите, у приведенной мной для образца фотографии размер слишком большой — объем файла будет тоже не маленький. Поскольку самое распространенное на данный момент экранное разрешение — 1024х768 пикселей, то и фотографию больше этого размера делать не стоит.

Вводим вместо 2048 (у вас скорее всего там другие цифры) 1024 в окошко «ширина», при этом в окошке «Высота» автоматически появится цифра 768 (потому, что перед фразой Сохранить пропорции стоит галочка)

Нажимаем кнопку «ОК» — теперь у Вашей фотографии нужный размер!
Кстати, если вы на первом уроке кадрировали снимок до нужного размера, то этот абзац можете пропустить.

Примечание: Если исходный размер снимка меньше, чем 1024х768, то увеличивать его не стоит. Он, конечно, растянется до требуемого размера, но качество изображения ухудшится. Поэтому, если фотография и не закрывает весь экран — то пусть радует глаз красотой а не размерами. Ведь еще Ленин говорил по этому поводу: «Лучше меньше — да лучше!»

С размерами определились, переходим непосредственно к сохранению.

Сохранение фотографии для Интернета

В меню Файл, выбираете пункт Сохранить для Web.

Открывается диалоговое окно Save For Web

Как видите, появляется 2 снимка для сравнения качества изображения: оригинал и тот снимок, который получится при устанавливаемых Вами параметрах.

Вы спросите: какие параметры устанавливать?

Во-первых, в окошке 2 выберите формат GIF или JPEG.

Формат GIF поддерживает не больше 256 цветов и подойдет только для сохранения рисунков и чертежей (рисунки 6-8 на этой странице сохранены в формате GIF с поддержкой 64 цветов, поэтому весят по 7-11 кб — мелочь, а приятно!)

Конечно, красивую фотографию в этом формате не сохранишь, поэтому выбираем формат JPEG.

В окошке 3 выбираем качество фотографии: низкое, среднее, высокое, максимальное. Вы скажете: конечно максимальное?

Да, если бы речь шла о сохранении на винчестер, то так бы оно и было. Но Вы же собираетесь эти фотографии размещать в Интернете для скачивания почитателями Вашего таланта! А кто любит долго ждать открытия страницы? Вот именно, никто!

Представленная фотография сохранена при среднем качестве и «весит» 36 кб. При высоком качестве она бы весила около 100 кб, а при максимальном — 200! Вообщем, я особой разницы между средним и высоким качеством не вижу, зато вижу большую разницу в объеме получаемого файла.

А вы можете поэкспериментировать. Меняя значения, вы будете видеть, как у вас на глазах меняется качество правого снимка. Кроме того, под правым снимком увидите, как меняется размер К (в килобайтах) снимка, в зависимости от качества.

Наконец, когда выбор размера изображения, формата и качества закончен, нажимаем кнопку Save (Сохранить). Как обычно, потребуется назвать файл (поскольку файл готовите для Интернета — сразу напишите латинскими буквами) и определить папку для сохранения. Когда вы это сделали — опять нажимаете кнопку Сохранить.

Если шибко грамотный фотошоп при этом выдаст вам предупреждение, что «некоторые имена файлов несовместимы с некоторыми веб-браузерами», скажите, что и без него все знаете и нажмите ОК .

Всё, снимок готов!

Внимание! Пока Вы полностью не закончите работу над фотографией, сохраняйте ее в «родном» фотошоповском формате PSD. Потому что многократное повторное сжатие в форматах GIF и JPEG приводит к безвозвратной потере качества.

Перейти к другим урокам по фотошопу:

  1. Кадрирование фотографии.
  2. Тоновая коррекция изображения
  3. Маскировка некоторых дефектов на фото с помощью Заплатки
  4. Удаление «эффекта красных глаз» с помощью Photoshop
  5. Подготовка фотографии к печати

Как подготовить фото для интернета

Всем привет! Я рад Вас видеть на моем блоге ps-blog.ru, который посвящен урокам  для начинающих пользователей по программе Фотошоп. Напоминаю, что в прошлой статье мы научились загружать шрифты в Фотошоп, всем кто еще ее не читал эту статью рекомендую с ней ознакомится.

Сегодня мы продолжим изучать основы Фотошоп, тема сегодняшнего урока Как подготовить фото для интернета. Возможно, у Вас сразу возникли вопросы,  для чего и зачем фото готовить для интернета? Можно ведь просто взять загрузить и все.

Да, действительно в некоторых случаях можно просто взять загрузить и все, но это влечет за собой массу проблем и неудобств. Ниже я привел 5 причин почему нужно подготавливать фото для интернета:

5 причин подготовки изображений для WEB

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

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

 Неправильные пропорции фотографии, которые приводят к искажению. Этот пункт я думаю не нуждается в разъяснение.

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

 В некоторых ситуациях требуется загрузка изображения определенного размера и формата. Например Вам нужно загрузить иконку 16×16 пикселей в формате .png для своего сайта. Все это легко и просто можно сделать в Фотошоп.

Со всеми этими задачами прекрасно справляется наша любимая программа Adobe Photoshop CC. Разработчиками Фотошоп был придуман очень полезный и нужный модуль с функцией сохранения изображений для интернета (Save for Web). Это мощный модуль управления процессами оптимизации и сохранения документов, который автоматически подбирает оптимальные настройки сохраняемого файла. Этот модуль поддерживает и работает с самыми распространенными форматами файлов для интернета .jpg, .gif, .png.

Преимуществами и удобствами пользования  этого модуля являются такие полезные и нужные возможности как:

 выбор нескольких режимов просмотра во время оптимизации изображения для web

 выбор формата в котором изображение будет сохранено

 выбор качества и размера сохраняемого изображения

выбор способа оптимизации, сжатия и просмотр веса оптимизированного изображения.

На этом вся теория заканчивается, переходим к практике. Для начала давайте откроем изображение или фотографию которую будем сохранять для интернета. Я буду работать с этим изображением:

Для того, чтобы перейти к сохранению для web, заходим в верхнее меню Файл/Сохранить для web или воспользуемся горячими клавишами Ctrl+Alt+Shift+S

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

Описание опций:

1. Четыре вкладки вариантов предварительного просмотра.

—  Исходное — это когда Вы видите тока своё исходное изображение

—  Оптимизация — это когда Вы видите в предварительном просмотре только оптимизированное изображение

—  2 Варианта — это когда Вы видите своё исходное изображение вверху, а оптимизированное внизу. Этом вариант самый удобный и больше всего мне нравится, именно поэтому я его и выбрал.

—  4 Варианта — это когда Вы видите в предварительном просмотре исходное изображение, изображение в качестве котором Вы выбрали, изображение в качестве 22 и изображение в качестве 11.

2. Формат сохраняемого файла. В нашем случае мы выбираем JPEG.

—  PNG — формат файла для сохранения Веб-графики. Бывает двух видов, 8 bit -индексированые изображения, 24 bit — «все» цвета. Обычно в этом формате сохраняют клипарты и логотипы на прозрачном фоне.

—  GIF — устаревший формат файла для сохранения Веб-графики. Чаще всего в этом формате сохраняют файлы с ограниченным количеством цветов, таблицы, схемы, логотипы, так же формат поддерживает анимацию и прозрачный фон. Этим форматом пользуются всё меньше и меньше, потому что появился более лучший формат PNG.

—  JPEG — Самый популярный формат. Прекрасно подходит для сохранения фотографий и изображений со множеством цветов, оттенков, эффектов.

3. Значение качества. Мне нравится «Высокое».

—  Низкое

—  Среднее

—  Высокое

—  Очень высокое

—  Наилучшее

4. Здесь ставим галочку в значение «Оптимизация«. Рассматривать и заострять внимание на опциях «Прогрессивный» и «Встроенный профиль«, мы не будем так как большинство веб-браузеров их не поддерживают.

5. Ставим галочку для того чтобы включить опцию «Преобразовать в sRGB«. Это нужно для того чтобы, наше изображение корректно отображалось на веб-сайте и сохранилось в цветовом пространстве sRGB.

6. Выставляем нужный размер изображения. В моём случае это, ширина 500 — пикселей, высота — 281 пиксель.

7. Размер оригинального изображения.

8. Размер оптимизированного изображения для интернета.

Думаю теперь Вы разобрались с темой Как подготовить фото для интернета в Фотошоп и теперь сможете сделать это самостоятельно. Помните, лучшая благодарность для автора это лайки, репосты в социальных сетях и комменты на сайте До встречи в следующих уроках!

Как настроить цветопередачу для публикации фото в интернете?

Иногда после обработки фотографий в Lightroom или Photoshop у некоторых пользователей фотографии отличаются по цветам и контрасту при сохранении и загрузке их в интернет, просмотре в другом графическом редакторе или просто на компьютере. Выглядят не так, как в фотошопе или лайтруме. 

Например, наша афиша выглядит в фотошопе как на первой картинке, а при сохранении превращается во вторую картинку:

Чтобы ваши фотографии одинаково правильно отображались после сохранения и сохранили свой цвет и контраст, нужно правильно настроить программы, фотошоп и лайтрум.

Интернет, практически все мониторы и экраны телефонов работают в режиме передачи цветов sRGB, следовательно, нам нужно настроить программы так, чтобы они сохраняли и показывали нам на мониторе изображение в sRGB.

Adobe Lightroom

Начнем с лайтрума. Тут достаточно установить правильные параметры экспорта фотографий. После обработки фотографии мы нажимаем «экспорт» и в появившемся окошке проверяем, чтобы в разделе «формат файла» было указано «цветовое пространство» sRGB . Вот и все!

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

Формат файла

Размер изображения. Социальные сети и форумы имеют ограничение на размер загружаемой фотографии, и если фотография больше допустимого предела, то она автоматически сжимается. Ну а автоматические алгоритмы интерполяции только испортят качество вашей фотографии. Чтобы этого избежать, нужно заранее ее уменьшить. Размер фотографии стоит выбирать исходя из простой логики, чтобы при просмотре и с мобильного телефона, и с компьютера она сохранила свою резкость. Оптимальным размером для интернета сейчас являются значения от 1400 пикселей по длинной стороне, до 2100. В частности для «ВКонтакте» идеальным будет 1680 пикселей по длинной стороне.

Резкость вывода. Для интернета – чем больше, тем лучше. В разумных пределах. В лайтруме ставим «сильная».

После этих настроек ваша фотография готова к публикации в интернете.

Adobe Photoshop

Для того, чтобы настроить правильную цветопредачу в фотошоп, заходим в «редактирование», «настройка цветов».

И в появившемся окне выбрать настройки «универсальные настройки для Европы 3».

Если в вашем фотошопе нет предустановок для Европы, то просто выставите в поле RGB – «sRGB IEC61966-2.1», там всегда будет один профиль sRGB.

Кликаем ok, идем дальше.

«Просмотр» – «варианты цветопробы» – и ставим интернет-стандарт sRGB.

А также при открытии RAW-файла в фотошопе обратите внимание и выставите профиль sRGB.

Теперь ваш фотошоп правильно воспроизводит и сохраняет все цвета фотографии.

Сохранение фотографии для интернета в Adobe Photoshop

Подготовить фотографию для экспорта в интернет можно и в фотошопе. Для этого нужно сначала ее уменьшить, потом добавить резкости.

Уменьшаем через «изображение» – «размер изображения»:

Выставляем единицу измерения «пиксели» и в поле «ширина» указываем необходимый нам размер. Ресамплинг оставляем автоматический или ставим «бикубическая (с уменьшением)».

После уменьшения нужно добавить резкости на фотографию. Для этого отлично подойдет «умная резкость».

Обязательно делаем новый слой и заходим в «фильтр» – «усиление резкости» – «умная резкость».

Уменьшение шума ставим на 0. Радиус для уменьшенной фотографии находим в диапазоне от 0,3 до 1. Для фотографии размером 1680 пикселей по длинной стороне подойдет радиус 0,4 – 0,5. Эффект также находим в диапазоне от 70 до 150.

Так как мы сделали новый слой , то можно выставить сильный «эффект резкости», например 180, и потом, уменьшая непрозрачность слоя с резкостью, добиться правильной резкости фотографии.

Значения резкости подбираются на глаз, но для интернета лучше делать больше резкости. Фотография будет смотреться на экране намного выразительнее.

Поделиться в социальных сетях

Вконтакте

Facebook

Twitter

9971

КАК СОХРАНИТЬ ФОТО ДЛЯ ИНТЕРНЕТ БЕЗ ПОТЕРИ КАЧЕСТВА

08-04-2019

КАК СОХРАНИТЬ ФОТО ДЛЯ ИНТЕРНЕТ БЕЗ ПОТЕРИ КАЧЕСТВА

Просмотров: 2340

Комментариев:25

Нравится15


   Очень многие сталкиваются с проблемой потери качества изображения при его уменьшении, для последующей демонстрации фото в интернет. Приходится жертвовать качеством, обрезая фото и уменьшая их разрешение. И в итоге — картинка становится не четкой, цвета блеклые, не насыщенные….
  Так какими параметрами можно манипулировать для уменьшения размера снимка и как провести оптимизацию, минимально затронув качество?
  Об этом вы и узнаете посмотрев данный видео урок.
К уроку прилагается материал: actions для быстрой оптимизации
изображения

Поделись с друзьями


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

Здесь тоже не возникнет особенных трудностей. Эта программа позволяет работать с изображениями очень по-разному. Фотошоп включает в себя множество инструментов, а также поддерживает практически все форматы. Благодаря чему он и стал лучшей программой для работы с изображениями.

Первое, что можно сделать в нём – поменять расширение. Для этого откройте файл в Фотошопе, а потом сохраните в другом формате. И всё, документ будет весить значительно меньше.

Оптимизировать можно и с помощью средств, встроенных в программу. Например, при сохранении можно выбрать «сохранить для web». Тогда программа, во-первых, сохранит текст (а это значит, что поисковикам будет проще индексировать изображение), во-вторых – позволит сэкономить место.

Кстати, там же можно выбрать настройки прозрачности, а также отрегулировать анимации. Поэтому вы не потеряете не только в качестве изображения, но и в его ключевых моментах.

Облегчить картинку можно, если сохранять не в png-24, а в png-8. Такой формат чаще используют как замену gif (кроме анимаций), потому что он поддерживает меньше оттенков. Но зато с его помощью можно создавать лёгкие и яркие картинки для привлечения внимания. Если вам нужно именно это, то стоит попробовать его.

Как экспортировать изображение высочайшего качества в Photoshop

После того, как вы выполнили всю тяжелую работу по созданию изображения в Photoshop, пришло время сохранить и экспортировать его, чтобы вы могли его использовать. Это должна быть самая простая часть, верно? Не совсем. Photoshop позволяет сохранять изображение в нескольких различных форматах и ​​параметрах, каждый из которых предлагает свои уникальные преимущества. Тем не менее, независимо от того, в каком формате вы выберете для сохранения изображения, есть два фактора, которые будут определять, экспортируете ли вы формат изображения самого высокого качества из Photoshop.

  • Разрешение: Насколько высокое или низкое разрешение вам нужно, все зависит от того, как вы планируете использовать свое изображение. Если вам просто нужны файлы изображений для блогов или электронной почты, лучше более низкое разрешение. Однако, если вы планируете использовать свои изображения в развороте журнала или фотогалерее, постарайтесь получить изображения как можно более высокого разрешения. Узнайте больше о том, как создать изображение в высоком разрешении с помощью Photoshop здесь.
  • Сжатие: Сжатие происходит, когда размер файла уменьшается из-за того, как он сохраняется.Существуют форматы файлов с потерями, которые снижают качество изображения, чем сильнее сжат файл, и есть форматы файлов без потерь, которые можно сжимать без снижения качества изображения. Например, JPEG с потерями, а RAW без потерь.

Если вы планируете использовать изображение для печати, сохраните его в формате PDF. Photoshop PDF поддерживает векторные изображения, что означает, что изображение не потеряет своего качества при увеличении или уменьшении масштаба. После печати изображение на бумаге будет таким же, как и в программе.

Если вы планируете использовать свое изображение в Интернете, экспортируйте фотографию, выбрав «Файл» → «Экспорт» → «Сохранить для Интернета» (может отображаться как SFW). Это откроет окно SFW. Если вы работаете с фотографией, сохраните ее в формате JPEG, так как это лучше всего для Интернета. Если вы хотите экспортировать баннер, логотип или другую графику, рекомендуется использовать формат GFI.

Делайте больше со своими изображениями. Найдите идеи для дизайна и ресурсы на нашей странице дизайна. Для всех ваших потребностей в изображениях просмотрите библиотеку изображений Shutterstock сегодня. .

Как увеличить изображение цифровым способом без потери качества

С сегодняшними камерами, имеющими больше мегапикселей, вы с большей вероятностью уменьшите фотографию, чем увеличите ее. Но бывают случаи, когда увеличение размера изображения действительно может пригодиться. К сожалению, увеличить изображение без потери качества бывает непросто.

Есть несколько способов решить эту проблему, и в этой статье мы опишем два из лучших способов увеличить изображение без потери качества.

О чем следует помнить при увеличении изображения

Когда вы увеличиваете размер изображения, вы просите свой компьютер добавить информацию.Короче говоря, вы говорите ему взорвать изображение, потеряв детали, и для этого «угадываете», как будет выглядеть большее изображение.

Это означает, что вы никогда не получите идеального воссоздания своей фотографии в большем размере, потому что это вопрос формата и программного обеспечения: одни приложения справятся с этим лучше, чем другие, а некоторые изображения будут изменять размер лучше, чем другие.Но все они должны гадать.

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

Как изменить размер изображения с увеличением на 10 процентов

Это обычно рекомендуемый метод, чтобы узнать, насколько масштабным масштабированием можно обойтись при увеличении изображения без потери качества.Лучше всего это работает, если вы , а не , пытаетесь масштабировать изображение до определенного размера, а пытаетесь увеличить изображение до максимально возможного размера, не делая его плохим. Мы будем использовать это изображение журналов на журнальном столике в качестве примера.

Это изображение в настоящее время имеет ширину 670 пикселей.Если вы наклонитесь к монитору и прищурится, вы, вероятно, сможете разобрать весь текст. Сейчас все довольно гладко, и изображение выглядит красиво.

Чтобы увеличить изображение, мы воспользуемся функцией Resampling , которая является частью «угадывания», о которой мы рассказывали ранее.И мы собираемся использовать для этого Adobe Photoshop. Вот что происходит, когда мы увеличиваем изображение до колоссальных 2000 пикселей в ширину (просто чтобы показать вам, на что способна программа):

Как изменить размер изображения с помощью Photoshop

Чтобы изменить размер этого изображения в Photoshop, щелкните в верхнем меню приложения и выберите Изображение > Размер изображения .Затем отрегулируйте высоту и ширину в диалоговом окне Размер изображения . Также убедитесь, что Resampling включен, с Bicubic Smoother в качестве предустановки.

Как видите, Photoshop великолепно сглаживает это изображение с 670 до 2000 пикселей.Photoshop CC за эти годы действительно улучшился стремительно, и хотя это изображение определенно размыто по краям, а текст не такой резкий, вы все равно можете легко разобрать большую его часть.

Однако легко представить, что некоторые детали на другом изображении станут неразличимыми.Поэтому вместо того, чтобы делать скачок до 2000 пикселей, мы просто добавим 10 процентов к исходному размеру изображения.

Чтобы увеличить размер изображения до 10 процентов в Photoshop, выберите «Изображение »> «Размер изображения ».Затем — вместо настройки ширины и высоты по пикселям — выберите Percent . Наберите 110% и убедитесь, что Resampling: Bicubic Smoother все еще включен.

Вот как выглядит изображение, если увеличить его на 10 процентов:

Как видите, все еще выглядит довольно четко.Чтобы поэкспериментировать с этим, продолжайте увеличивать изображение в Photoshop на 10 процентов за раз, пока не начнете видеть некоторую зернистость. Поскольку мы пытаемся сделать небольшие шаги, чтобы максимально увеличить изображение, сохраняя при этом качество самого изображения, зернистость — это ваш сигнал, чтобы остановиться.

Если вы собираетесь использовать этот метод, очень важно убедиться, что Resample включен в вашем приложении для редактирования фотографий.Вот как это выглядит в диалоговом окне Размер изображения в Photoshop:

Вы также можете использовать такое приложение, как Pixelmator или GIMP, для передискретизации изображения.Оба хороши и предложат аналогичный вариант. Если вам повезет, вы сможете выбрать алгоритм интерполяции (то есть метод «угадывания» компьютера) для масштабирования. Когда вы увеличиваете масштаб, вариант Bicubic Smoother будет хорошим вариантом.

Как использовать специальное приложение для увеличения изображения

Поскольку так много людей нуждаются в больших фотографиях, на самом деле существует ряд приложений, специально разработанных для увеличения изображения без потери качества.

Например, Sharper Scaling — это бесплатное приложение для Windows, которое обещает лучшее масштабирование, чем Photoshop.Результаты, опубликованные на его сайте, впечатляют. Это приложение делает одно и только одно — увеличивает размер изображения — но оно бесплатное, поэтому его определенно стоит скачать.

Бесплатные эквиваленты для macOS менее многочисленны, но это не значит, что у вас нет вариантов.Waifu2x — надежный онлайн-вариант. Waifu показал очень впечатляющие результаты при увеличении аниме-изображения и прояснении его, хотя это может быть немного непредсказуемо с фотографиями.

В конце концов, вам, возможно, придется попробовать несколько из этих вариантов, чтобы увидеть, какое приложение лучше всего подходит для увеличения вашего изображения.Выше приведен пример того, что Waifu может сделать для нашего изображения по сравнению с Photoshop бок о бок.

Даже не увеличивая изображение, чтобы сделать его ясным, вы, вероятно, увидите, что изображение из Waifu очень похоже на последнюю версию Photoshop.Использование сайтом глубоких сверточных нейронных сетей (что такое нейронные сети?) Делает его очень искусным в «угадывании», о котором мы упоминали ранее, и в результате получаются значительно более чистые увеличенные фотографии.

Однако, если Waifu вам не подходит, вы можете попробовать Online Image Enlarger, Simple Image Resizer или Rsizr.

Теперь вы можете увеличивать изображение без потери качества

Эти два метода увеличения размера изображения, вероятно, лучше всего подходят, если вы хотите увеличить изображение без потери качества.Ни один из них не идеален, но из-за ограничений технологий они — лучшее, что мы можем сделать.

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

Кредит изображения: фрактал-ан / Shutterstock

Эти 10 функций делают Edge более производительным, чем Chrome

Об авторе Шианн Эдельмайер (138 опубликованных статей)

Шианн имеет степень бакалавра дизайна и опыт работы в подкастинге.Сейчас она работает старшим писателем и 2D-иллюстратором. Она занимается творческими технологиями, развлечениями и производительностью для MakeUseOf.

Ещё от Shianne Edelmayer
Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Еще один шаг…!

Подтвердите свой адрес электронной почты в только что отправленном вам электронном письме.

.

Как изменить размер изображения без потери качества

Узнайте, как изменить размер изображений без потери качества с помощью Shutterstock Editor. Также узнайте, как быстро преобразовать изображения в пиксели.

Изображение на обложке через Романа Самборского.

Каждое изображение имеет три основные функции, о которых вам нужно знать при загрузке в Интернет.

  • Размер файла , измеряется в байтах (килобайтах, мегабайтах и ​​т. Д.)
  • Размер , ширина x высота в любой единице измерения (пиксели для цифровых, дюймы или сантиметры для печати)
  • Разрешение , которое измеряется в точках на дюйм для печати (DPI) или пикселей на дюйм для цифровых (PPI)

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

«Изменение размера» может означать одно из двух: уменьшение размера файла изображения и изменение размеров изображения. Эти два понятия идут рука об руку, но для целей этой статьи мы обсудим , как изменить размеры изображения , , .

При изменении размера изображения вы изменяете размеры и плотность пикселей, которые определяют его качество. Связь между разрешением и размером напрямую связана. Если вы уменьшите количество пикселей на квадратный дюйм (PPI) в изображении, вы фактически увеличите размеры. Размеры будут определять размер изображения на экране.

Если это сбивает с толку, просто помните:

  • Больше пикселей на дюйм = лучшее разрешение
  • Меньше пикселей на дюйм = более низкое разрешение

Конвертировать дюймы в пиксели

Пиксели — это стандартная единица измерения экранов.На веб-сайтах и ​​цифровых платформах требования к размерам будут указаны в пикселях, поскольку дисплеи мониторов и телефонов измеряются в пикселях. Итак, если вы готовите изображения для использования в Интернете, вы хотите установить единицы измерения в пикселях. С другой стороны, требования к печати будут в дюймах или сантиметрах, в зависимости от системы или страны происхождения.

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

Чтобы преобразовать пиксели в дюймы, разделите размеры в пикселях на разрешение.Например, изображение размером 1000 x 500 пикселей с разрешением 72 DPI имеет высоту 13,89 x 6,95 дюйма.

Чтобы узнать разрешение (DPI) изображения, вам нужно знать ширину как в пикселях, так и в дюймах. Разделите размеры в пикселях на размеры в дюймах. Например, изображение шириной 1000 пикселей и 13,89 дюйма будет иметь 72 точки на дюйм.

Чтобы преобразовать дюймы в пиксели, умножьте ширину изображения в дюймах на разрешение или DPI. Например, 13,89 дюйма при 72 пикселях на дюйм — это 1000 пикселей в ширину.

Используйте эту диаграмму для преобразования обычных дюймов в пиксели и наоборот.


Можете ли вы изменить размер изображения на любой, какой хотите?

Вы всегда можете уменьшить изображение без потери качества, но вы не можете увеличить изображение, пока не заметите резкое снижение качества.

В цифровом изображении количество пикселей представлено DPI (или PPI) и размерами ширины x высоты. Например, изображение размером 2000 x 2000 пикселей с разрешением 72 DPI имеет всего 4 000 000 пикселей.Чтобы уменьшить изображение, скажем, 1000 x 1000 пикселей, я могу просто уменьшить его в размере, и он сохранит тот же уровень детализации, только в меньшем изображении.

Если я хочу сделать то же изображение больше исходного размера, необходимо создать пиксели. Это означает, что компьютер умножает количество пикселей, чтобы соответствовать новым размерам, создавая искажения и другие эффекты, используя информацию в изображении, чтобы угадать, что следует использовать для увеличения. Это связано с тем, что пиксели искусственно создаются из других пикселей, а не из исходной информации.

Однако есть еще несколько способов увеличить изображение без потери всех деталей.

1. Сохранить детали 2.0

Это относительно новая функция Photoshop. Вы можете включить его, нажав Command + K , чтобы открыть окно «Настройки», а затем нажать «Предварительный просмотр технологий». Или щелкните Photoshop в верхней части экрана, наведите курсор на «Настройки» и выберите «Предварительный просмотр технологий».

Перед тем, как перейти к следующему шагу, убедитесь, что включен параметр «Включить сохранение подробностей 2.0».

2. Используйте Resample

Resampling позволяет изменять разрешение и размеры отдельно, а также позволяет Photoshop смешивать пиксели в увеличенном изображении, чтобы изображение оставалось гладким.

Вы найдете опцию Resample во всплывающем окне Image Size. Установите флажок, чтобы включить Resample, и изучите параметры увеличения в верхней половине раскрывающегося меню рядом с ним. Photoshop настроен на автоматический режим, но для наших целей вам нужно выбрать Preserve Details 2.0.

Изображение цветочного поля от NumbernineRecord.

3. Снижение шума

После выбора «Сохранить детали 2.0» вы увидите ползунок «Подавление шума». Используйте предварительный просмотр в левой части окна, чтобы увидеть, как перемещение ползунка меняет изображение. При слишком низком перемещении изображение выглядит зернистым и пиксельным, а при слишком высоком — размытым. Отрегулируйте ползунок, пока не найдете значение, которое снижает шум, не размывая детали.


Как изменить размер изображения в Photoshop

Вы не можете добавлять пиксели к изображению, но изменить размер изображения все равно проще, чем вы думаете. Photoshop может показаться сложным, но здесь мы разберем его до самых простых шагов. Или, если вы хотите более подробно изучить изменение размеров и разрешения изображения, следуйте этому подробному руководству, чтобы узнать, как изменить размер изображения в Photoshop.

1. Размер открытого изображения

Щелкните Image в верхнем левом углу окна Photoshop или удерживайте Command + Open и нажмите I .Эти шаги откроют окно размера изображения. Оказавшись там, вы найдете варианты изменения размеров и разрешения вашего изображения.

Изображение носорога, сделанное Stasinho12.

2. Изменить размеры изображения

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

Вставьте нужные размеры в поля Ширина и Высота. Вы найдете следующие варианты единиц измерения в раскрывающихся меню рядом с полями размеров.

  • Percent — позволяет выполнять быстрые вычисления в процентах
  • Pixels — установить конкретные размеры пикселей
  • дюймов — устанавливает PPI ​​(пикселей на дюйм)
  • Единицы линейных измерений прочие

Выберите единицу измерения, которая лучше всего подходит для вашего проекта.Если вы планируете поделиться изображением в цифровом виде, измените размер изображения, используя размеры в пикселях для того места, где вы будете публиковать (например, заголовок Facebook или профиль Twitter). Или, если вы печатаете свое изображение, подогнать его под размер окна изображения в программе макета, чтобы получить наилучшее разрешение.

3. Сохраните копию

После установки размеров нажмите OK . Photoshop вернет вас обратно в окно изображения, где вы можете либо сразу сохранить, либо завершить любую другую работу по редактированию, которую захотите.

Когда вы будете готовы к сохранению, нажмите Command + Shift + Plus , чтобы открыть окно Сохранить как , или щелкните меню «Файл» в левом верхнем углу и выберите Сохранить как . Рекомендуется сохранить отредактированное изображение как отдельную копию на тот случай, если вам понадобится оригинал для внесения изменений. Переименуйте копию с измененным размером и сохраните ее в новом месте. Вы даже можете создать новую папку для ваших правок, если вы изменяете размер пакета из нескольких изображений.


Как изменить размер изображения без Photoshop
1.Найдите или загрузите изображение в редактор

Перейдите в редактор Shutterstock и щелкните Начало работы .

Загрузите изображение в онлайн-редактор фотографий с помощью раскрывающегося меню «Файл». Или вы можете найти изображение в коллекции Shutterstock, щелкнув значок увеличительного стекла на левой панели инструментов. Введите ключевые слова и нажмите Enter / Return, чтобы увидеть результаты поиска.

Щелкните изображение, чтобы просмотреть его, затем нажмите Заменить фон , чтобы добавить его на холст.

2. Измените разрешение для вашей среды

В правой части экрана найдите Размер холста. Справа от него будет меню выбора единиц измерения.

  • Для изображений, которые вы планируете использовать в сети , выберите пикселей .
  • Для изображений, которые вы собираетесь напечатать , выберите дюймов или сантиметров .

Справа находится меню выбора разрешения.

  • Для веб-изображений выберите 72 DPI .
  • Для изображений печати с низким разрешением выберите 150 DPI .
  • Для печати изображений с высоким разрешением выберите 300 DPI .
3. Измените размер холста для вашей платформы

Помните, что загрузка изображения правильных размеров гарантирует без потери качества, поэтому важно выбрать правильные размеры для конечного использования изображения.

В редакторе Shutterstock вы можете легко изменить размер изображений до популярных веб-размеров, включая

  • Размер изображения Facebook: 1200 x 1200 пикселей
  • Размер обложки Facebook: 1702 x 630 пикселей
  • Размер сообщения Instagram: 1080 x 1080 пикселей
  • Размер истории Instagram: 1080 x 1920 пикселей
  • Размер сообщения Twitter: 1024 x 512 пикселей
  • Размер сообщения Pinterest: 736 x 1128 пикселей

Вы также можете создавать собственные размеры холста, вводя измерения в поле ширины и высоты.Используйте кнопку блокировки, чтобы ограничить пропорции, то есть ширина и высота будут изменяться относительно друг друга.


Редактор Shutterstock позволяет легко изменять размер изображения в пикселях или размер изображения в дюймах. Если вы хотите переключить единицы измерения, просто выберите новую единицу из раскрывающегося списка и посмотрите, как Редактор преобразует единицы измерения из одной в другую — никакой работы!
4. Отрегулируйте размер изображения

Щелкните и перетащите одну из синих точек по углам изображения, чтобы изменить ее размер по размеру холста.Пропорции остаются неизменными, поэтому вам не нужно беспокоиться об искажении изображения. Размер холста составляет 1200 x 700 пикселей, поэтому я уменьшаю изображение по сравнению с исходным размером.

5. Загрузите и сохраните

Когда вы довольны своим изображением, дважды проверьте разрешение и размер, затем нажмите красную кнопку Загрузить в правом верхнем углу экрана.

Вам будет предложено проверить имя файла, размер и выбрать лицензию. Нажмите License и продолжите .Затем выберите формат файла и разрешение. Это делается за вас, когда вы выбираете разрешение в главном окне редактора. Нажмите «Загрузить», выберите место для сохранения файла, и все готово.


Примените код купона 202020 при оформлении заказа. Акция
заканчивается 9 ноября 2020 года.

Сэкономьте сегодня

Заинтересованы в улучшении своих знаний об изображениях и фотографиях? Прочтите эти важные статьи:

.

Решено: Как увеличить изображение без потери качества? — Сообщество поддержки Adobe

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

1) Перейдите в диалоговое окно размера изображения и настройте его на повторную выборку с помощью метода интерполяции «сохранить детали» и увеличьте ширину и высоту, но не сходите с ума, удваивая число пикселей легко, насколько вы показали.

2) Photoshop теперь будет делать расчетные предположения о цветах пикселей, которые будут соседствовать с реальными пикселями в изображении, и создавать их, что неизбежно будет делать ошибки, которые проявляются как снижение резкости. Чтобы компенсировать это, сохраните увеличенное изображение как «Смарт-объект» или вы могли бы сделать это на шаге 1. Теперь продублируйте слой ctrl-J или cmd-J, установите режим наложения на «мягкий свет» и примените Фильтр высоких частот

Отрегулируйте предварительный просмотр, чтобы получить более четкие края, как показано ниже.Это метод проб и ошибок, поэтому смарт-объект лучше всего использовать в качестве смарт-фильтра, доступного для повторных попыток.

Эта процедура повышает резкость изображения контролируемым образом, компенсируя потерю фокуса во время увеличения.

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

Лучшие результаты могут быть получены с помощью сторонних плагинов, таких как Alien Skin Blow UP, поскольку они имеют более сложные алгоритмы увеличения, но этот метод работает очень хорошо

.

Как сохранить фото для контакта без потери качества в фотошопе

Главная » Разное » Как сохранить фото для контакта без потери качества в фотошопе

Как пережать фото без потери качества для контакта

Все мы знаем, что «контакт» очень портит качество размещаемых фотографий. Если на фотографиях с «мыльницы» это не так заметно, то для фотографов, потративших немало времени и усилий на обработку фотографий, разница очевидна. Красочная и яркая фотография блекнет после добавления в альбом «контакта». Работа превращается из шедевра в обычную «фотку», которых миллионы.
Для обработки изображений воспользуемся программой Photoshop.

Изменяем размер

Фотография в «контакте» при просмотре не растягивается больше 1000 px в ширину. Возьмем это значение за максимальный размер по ширине/высоте. Но при уменьшении размера качество ухудшается, фотография «замыливается». Для того чтобы свести к минимуму негативный эффект, воспользуемся следующим алгоритмом:

  1. Переходим в окно изменения изображения (Изображение -> Размер изображения)
  2. Изменяем размер фотографии до полуторного от нужного (1500px по большей стороне)
  3. Выбираем Интерполяцию «Бикубическая, четче» и сохраняем
  4. Снова переходим в окно изменения изображения
  5. Изменяем размер фотографии до нужного (1000px по большей стороне)
  6. Выбираем Интерполяцию «Бикубическая» и сохраняем

Сохраняем правильно!

Если сохранять стандартно, через «Файл -> Сохранить как», то с фотографией сохранится много лишней информации. Это увеличит размер фотографии. Такая фотография будет хорошо отображаться на локальном компьютере, но не в интернете. Для того чтобы сохранить фотографию для интернета выполняем следующие действия:

  1. Переходим в окно сохранения изображения для web (Файл -> Сохранить для web и устройств)
  2. Выбираем формат JPEG
  3. Качество 80
  4. Ставим галочку «Преобразовать в sRGB » и сохраняем

Применяя такой алгоритм наши фотографии не потеряют в качестве при размещении в социальной сети «контакт».
Всем отличных фотографий!

P. S. Если вам помог этот способ — расскажите о нем своим друзьям в соц. сетях, с помощью кнопочек ниже.

«Вконтакте» портит фотографии при загрузке

Вконтакте довольно сильно портит качество загружаемых фотографий. В некоторых случаях это особенно заметно (например, при загрузке очень большого изображения). Я даже размещал примеры того, как были испорчены некоторые фотографии. Возможно, некоторым пользователям это не заметно, но наметанный глаз свадебного фотографа, или просто внимательного человека видит две разные фотографии. Итак, как с этим бороться? До недавнего времени я просто менял размер фотографии, однако, периодически все равно замечал, пусть не такое значительное, но все же ухудшение качества фото. Почитав о данной проблеме в интернете, почерпнул интересную методику, которой (слегка улучшенной) поделюсь с вами.

Итак, у нас есть большое и красивое фото. Сразу оговорюсь, пишу только для тех, у кого есть фотошоп — как делать подобные операции в других редакторах, я не интересовался, но принцип должен быть тот же. Как же нам выложить это фото вконтакт так, чтобы прямые линии не стали зубчатыми, а цвета остались такими, какими мы их видим? Если вкратце, то тут есть три момента:

1) Сильно увеличиваем резкость фотографии. В полноразмерном виде фотография должна стать даже слишком резкой, перешарпленной, но после уменьшения резкость придет в норму.

2) Хитрым образом уменьшаем размер фото до того, который любит контактик (1024 по высоте для вертикальных фото, и 1280 по ширине для горизонтальных).

3) Сохраняем не менее хитрым образом, так, чтобы фото не содержало лишней информации, было в цветовом пространстве sRGB и было оптимального качества.

Теперь подробнее. Для примера я взял свою фотографию с красивой lovestory-фотосессии в заброшенной усадьбе.

1. Открываем фото в фотошопе.

2. Создаем дубликат слоя, применяем к нему фильтр — другое — цветовой контраст с радиусом примерно 3 пикселя. Затем выставляем слой в режим «Перекрытие» и делаем сведение. Таким образом, мы увеличили резкость фотографии.

3. Выбираем пункт Изображение -> размер изображения.

4. Выставляем: Для горизонтального изображения — ширину 1920, для вертикального — высоту 1536 (размеры в полтора раза больше конечных), ресамплинг — Бикубическая, с уменьшением (в других версиях фотошопа — Бикубическая, четче), применяем.

5. Выбираем пункт Изображение -> размер изображения.

6. Выставляем: Для горизонтального изображения — ширину 1280, для вертикального — высоту 1024, ресамплинг — Бикубическая, плавные градиенты (в других версиях фотошопа — Бикубическая, наилучшая для плавных градиентов), применяем.

7. Нажимаем Файл -> Сохранить для Web и устройств. Выставляем качество 80, и ставим галочку «Преобразовать в sRGB».

Полученный файл и загружаем в контакт. В результате, потери качества будут минимальны, а цвета будут соответствовать тому, что вы видели на своем мониторе. Я думаю, что данная методика подходит не только для вконтакте, но и для других социальных сетей, и просто передачи файлов через интернет, потому что в результате вы получаете изображение оптимального веса, размера и четкости, которое будет одинаково отображаться в любом цветовом пространстве (т.е. на любом компьютере).

P.S. Вот что пишет поддержка вконтакте по этому поводу:

Качество фотографий при загрузке портится, что делать?

Чтобы минимизировать визуальные потери качества, лучше загружать снимки поменьше (до 1000 пикселей по любой из сторон) и перед загрузкой чуть увеличивать их резкость. Кроме того, лучше не нажимать на строчку «Добавить новые фотографии», а перетаскивать на неё снимок прямо из папки компьютера.

Есть и ещё одна важная деталь: наш загрузчик недолюбливает цветовой профиль Adobe RGB, поэтому перед загрузкой лучше преобразовать картинку для Web. Алгоритм действий такой: в Photoshop’е нужно выбрать «Сохранить для WEB» (Alt+Shift+Ctrl+S), затем редактировать настройки качества и непременно отметить «Конвертировать в sRGB».

Самые ценные снимки стоит загружать в раздел документов — https://vk.com/docs.

О том, как сделать такой ресайз пакетно с наложением логотипа или копирайта для всей папки с фотографиями — читайте тут.

Update:

На текущий момент VK увеличил размеры хранимых фотографий. На данный момент это 1800х1200, соответственно, вы можете заменить все размеры из статьи на новые.

Как сохранять фотографии без потери качества | Статьи

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

PSD

  • Предпочтение этому формату следует отдавать при сохранении многослойных изображений для дальнейшего распечатывания с использованием продуктов Adobe;
  • PSD сохраняет стили, режимы, маски и прочие настройки всех слоёв;
  • Файлы PSD из-за многослойности обычно обладают значительными размерами;
  • Просмотр сохранённых изображений PSD возможен лишь в Фотошопе или других приложениях Adobe;
  • Если изображение предназначено для размещения в сети, то PSD не даст Вам такой возможности. Нужен другой формат.

TIFF

  • Наилучший по качеству формат, если Ваш приоритет — печать фотокниги или фото. Практически не имеет потерь;
  • Информация в слоях изображения TIFF сохраняется в зависимости от того, как был сохранён файл;
  • Величина файлов TIFF значительна.

JPEG

  • Весьма популярный формат, пригодный как для печати фото, так и для отображения в Интернете. Распознаётся практически всеми программами;
  • JPEG – формат утрачиваемый, и в этом его главный недостаток. При каждом открытии и сохранении изображения файл сжимается, и часть данных теряется.
  • Например, если отправляет фотографию в формате JPEG с телефона через мессенджеры (например WhatsApps, Viber), они их сильно сжимают, тем самым теряется качество изображения. Конечно, это не является большой проблемой, если Вы планируете просматривать изображения в мобильном приложении. Но если вы хотите распечатать фотографии для семейного архива, тогда лучше перенести файл с телефона на компьютер без сжатия.

PNG

  • Формат PNG создаёт файлы изображений небольшого размера без потери качества, что удобно для публикаций в сети;
  • Сохраняется прозрачность фона;
  • Файлы .png применимы для графического контента вместе с GIF;
  • Извлечение информации происходит путём переоткрытия и пересохранения, потери отсутствуют.

GIF

  • GIF очень хорош для цифровой графики с элементами анимации, но плохо приспособлен для хранения фотографий;
  • Степень обработки фотографий слабая, цветовая палитра ограниченная;
  • Незначительный размер файлов изображений способствует быстрой их загрузке в сеть;
  • Потери отсутствуют, информация извлекается путём переоткрытия и пересохранения файла.

Теперь Вы можете более осознанно подходить к выбору формата – по степени их близости к Вашему стилю. Хороших и плохих форматов нет, к ним прибегают в зависимости от поставленных задач. Допустим, мы знаем, что формат JPEG утрачиваемый, но потери не будут значительными, если не открывать и не сохранять файл много раз.

Планируете вернуться к редактированию изображения, к его маскам, слоям, непрозрачности – PSD, это правильный выбор. Закончили обработку – смело используйте JPEG. Требуется прозрачность для работы над собственным сайтом – выберите PNG. И не бойтесь эксперимента!

Как сохранить фото в Фотошопе


После завершения всех операций над изображением (фотографией) его необходимо сохранить к себе на жесткий диск, выбрав место, формат и дав какое-нибудь имя.

Сегодня поговорим о том, как сохранять готовые работы в Фотошопе.

Первое, с чем необходимо определиться, прежде чем начать процедуру сохранения, это формат.

Распространенных форматов всего три. Это JPEG, PNG и GIF.

Начнем с JPEG. Данный формат универсален и подходит для сохранения любых фотографий и изображений, не имеющих прозрачного фона.

Особенностью формата является то, что при последующем открытии и редактировании могут возникнуть так называемые «JPEG артефакты», причиной которых является потеря некоторого количества пикселов промежуточных оттенков.

Из этого следует, что данный формат подходит для тех изображений, которые будут использоваться «как есть», то есть не будут больше Вами редактироваться.

Дальше идет формат PNG. Этот формат позволяет сохранить картинку без фона в Фотошопе. Изображение может также содержать полупрозрачный фон или объекты. Другие форматы прозрачность не поддерживают.

В отличие от предыдущего формата, PNG при повторном редактировании (использовании в других работах) не теряет в качестве (почти).

Последний на сегодня представитель форматов – GIF. В плане качества это самый худший формат, так как имеет ограничение по количеству цветов.

Вместе с тем, GIF позволяет сохранить анимацию в Фотошопе CS6 в один файл, то есть один файл будет содержать все записанные кадры анимации. Например, при сохранении анимации в PNG, каждый кадр пишется в отдельный файл.

Давайте немного попрактикуемся.

Для вызова функции сохранения необходимо перейти в меню «Файл» и найти пункт «Сохранить как», либо воспользоваться горячими клавишами CTRL+SHIFT+S.

Далее, в открывшемся окне, выбираем место для сохранения, имя и формат файла.

Это универсальная процедура для всех форматов, кроме GIF.

Сохранение в JPEG

После нажатия кнопки «Сохранить» появляется окно настроек формата.

Подложка

Ка мы уже знаем, формат JPEG не поддерживает прозрачность, поэтому при сохранении объектов на прозрачном фоне, Фотошоп предлагает заменить прозрачность на какой-нибудь цвет. По умолчанию это белый.

Параметры изображения

Здесь выставляется качество картинки.

Разновидность формата

Базовый (стандартный) выводит изображение на экран построчно, то есть обычным способом.

Базовый оптимизированный использует для сжатия алгоритм Хаффмана (Huffman). Что это такое, объяснять не буду, поищите сами в сети, это к уроку не относится. Скажу только, что в нашем случае это позволит немного уменьшить размер файла, что на сегодняшний день не сосем актуально.

Прогрессивный позволяет улучшать качество изображения пошагово по мере его загрузки на веб странице.

На практике чаще всего применяются первая и третья разновидность. Если не совсем ясно, для чего вся эта кухня нужна, выбирайте Базовый («стандартный»).

Сохранение в PNG

При сохранении в этот формат также выводится окно с настройками.

Сжатие

Эта настройка позволяет значительно сжать итоговый PNG файл без потери качества. На скриншоте настроено сжатие.

На картинках ниже Вы можете увидеть степень компрессии. Первый скрин со сжатым изображением, второй – с несжатым.

Как видим, разница значительная, поэтому имеет смысл поставить галку напротив «Самый маленький/медленно».

Чересстрочно

Настройка «Снять выделение» позволяет показывать файл на веб странице только после того, как он полностью загрузится, а «Чересстрочно» выводит изображение с постепенным улучшением качества.

Я пользуюсь настройками, как на первом скриншоте.

Сохранение в GIF

Для сохранения файла (анимации) в формате GIF необходимо в меню «Файл» выбрать пункт «Сохранить для Web».

В открывшемся окне настроек ничего менять не придется, так как они оптимальны. Единственный момент – при сохранении анимации необходимо выставить количество повторений воспроизведения.

Надеюсь, что изучив этот урок, Вы составили максимально полное представление о сохранении изображений в Фотошопе.

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
ДА НЕТ

Как сохранить фото в Фотошопе CS6 и CC

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

В этой статье речь как раз пойдет о том, как и в каких форматах сохранять изображения.

Существует довольно много форматов фото, но в основном используются только вот эти 3:

Содержание: “Как сохранить фото в Фотошопе”

О Форматах:

*.JPEG

Разговор наш начнем с формата JPEG, он применяется для большего числа изображений и он не поддерживает прозрачный фон.

Каждый раз, когда вы будете сохранять и редактировать изображение в данном формате, оно будет терять некоторое количество пикселей в промежуточных областях, такие потери называют «артефактами».

Становится понятно, что изображения в данном формате следует сохранять без какого-либо редактирования, то есть такими, какие они есть. Сюда относятся различные фотографии.

*.PNG

Следующим по популярности идет формат PNG. Это единственный формат, который может существовать без фона, однако возможен не только прозрачный, но и полупрозрачный фон или различные объекты.

Этот формат изображений, в отличие JPEG, при частом редактировании почти не теряет в качестве, поэтому с ним часто работают в редакторах фотографий.

*.GIF

Следующим файлом в нашем разборе будет GIF, в плане качества он сильно отличается от двух форматов указанных выше, так как имеет небольшое количество доступных цветов.

Однако у него есть значительные плюсы, среди них – анимация. Когда вы хотите добавить или создать анимацию в Фотошопе, лучше всего использовать именно формат GIF, так как он все кадры анимации объединяет в одной файле, в отличие от PNG, где каждый кадр анимации необходимо сохранять отдельным файлом.

С теорией закончили, следующим шагом будет практика.

Сохранить изображение можно 2 путями:

  • Зайти в главное меню и выбрать кнопку «Сохранить как», и затем настроить в этом меню все показатели так, как нужно вам.
  • С помощью сочетания горячих клавиш CTRL+SHIFT+S также откроется меню «Сохранить как».

Используя эти 2 способа, вы откроете окно, в котором необходимо выбрать место сохранения файла, его имя и необходимый формат, это процедура универсальна для всех форматов, кроме GIF.

Сохраняем в JPEG

После того как нажмете кнопку «Сохранить» появится меню по настройки формата.

Работа с подложкой или прозрачностью очень проста, так как данный формат ее не поддерживает, но вам все равно будет предложено выбрать цвет фона. В этой графе можно ничего не выбирать, при выборе по умолчанию стоит белый цвет.

В параметрах картинки следует выбрать необходимое качество.

Сам JPEG делится на 3 формата:

  • Базовый
  • Оптимизированный базовый
  • Прогрессивный

Первый выводит изображение стандартным образом, с помощью строк.

Второй делает то же самое, только используя алгоритм Хаффмана. Что это такое? Сейчас мы об этом рассказывать не будем, ведь вы можете найти информацию, загуглив запрос. Если кратко, то он немного уменьшает размер изображения, но в наш век, с мощными компьютерами, это почти не нужно.

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

Чаще всего используются 1 и 3 формат, и если вы не хотите разбираться в этом, то выбирайте базовый формат.

Сохраняем в PNG

Раньше, при сохранении данного формата появлялось меню с 2 характеристикам: «Сжатие» и «Чересстрочно».

Тепер все немного по-другому. Смотрим скриншот:

Первый пункт “Большой файл размер” дает возможность быстро сохранить изображение, не лишаясь при этом качества, на скриншоте точка выбора стоит именно на этом пункте.

Следующий пункт – «Чересстрочно», а в нашем случае “Чересстрочная развертка”. Если у вас версия Фотошопа CS6, то у вас будет еще и выбор в подкатегории “Чересстрочно”. Если вы выберете кнопку «Снять выделение», то изображение на сайте появится только после того, как полностью загрузится. А если выберете кнопку «Чересстрочно», то картинка на сайте будет загружаться постепенно.

Лучше всего выбирать первый вариант. В нашем варианте выбора нет, он в любом случае уйдет с настройкой “Чересстрочно”. Мы в данном уроке используем Photoshop CC 2018.

Сохраняем в GIF

Сохранять картинки в этом формате довольно просто, но метод сохранения совсем другой, надо также нажать на кнопку «Файл», но выбрать пункт «Сохранить для Web». В нашем случае сперва “Файл”, затем “Экспортировать” и уже потом “Сохранить для Web”? как показано на скриншоте:

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

Единственное что надо выбрать, это количество повторений анимации: бесконечно или один раз.

Итог

Из этой небольшой статьи вы узнали, как сохранять изображения в 3-х самых популярных форматах. Надеемся, вам это пригодится.

Все дело в формате или как правильно сохранить картинку в фотошопе | DesigNonstop

Все дело в формате или как правильно сохранить картинку в фотошопе

10

Сегодня мы поговорим о том, как правильно сохранить и оптимизировать картинку в фотошопе и в каком формате это лучше сделать. А ведь правильный выбор формата сохранения очень сильно влияет на качество и внешний вид картинки, а также на вес картинки в килобайтах. Это особенно важно для тех, кто учитывает расход трафика. Итак, давайте разберемся по порядку с jpg, gif и png.

  

1. В каких форматах сохранять картинки
После того, как вы открыли в фотошопе любимую фотографию и каким-то образом поколдовали над ней или, вообще, создали с нуля коллаж собственного производства, вам предстоит сохранить этот файл у себя на компьютере. Для сохранения файла существуют три самых распространенных формата.

  

Формат jpg. Пожалуй, самый распространенный формат. Подходит для сохранения сложных графических изображений со множеством цветов и оттенков и насыщенной текстурой. То есть фотографии лучше всего сохранять в этом формате. Среди его недостатков — не поддерживает прозрачность и очень чувствителен к красному цвету.

  

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

  

Формат png. Похож на предыдущий формат, но более продвинут и эффективнее сжимает картинки. В png очень удобно сохранять клипарты на прозрачном фоне. Существует в двух форматах png-8 (для простых картинок, поддерживает 256 цветов) и png-24 (для более сложных изображений, хорошо поддерживает цвета).

  

2. Сохраняем с помощью функции «Сохранить как…» (Save as…)
Можно сохранить картинку используя старый добрый способ через меню «Файл» -> «Сохранить как…» (Save as…) или комбинация клавиш «Shift+Ctrl+S». В выпадающем меню выбирается формат файла, в котором хотим сохранить файл. (Смотрим рисунок ниже) Этот способ используется когда сохраняемая картинка останется на вашем компьютере и не предназначается для публикации в интернете.

  

3. Сохраняем с помощью функции «Сохранить для Web» (Save for Web…)
Если же ваша картинка предназначена для того, чтобы быть вывешенной в интернете, то лучше воспользоваться функцией «Сохранить для Web» (Save for Web…). При таком способе картинка лучше и качественнее сохраняется именно для интернета и плюс там есть несколько удобных возможностей. Выбираем в меню «Файл» -> «Сохранить для Web…» (Save for Web…) или комбинация клавиш «Alt+Shift+Ctrl+S». Откроется диалоговое окно.

  

Для того, чтобы сохранить картинку в формате jpg в выпадающем меню (1) выбираем формат JPEG. Ставим качество сохранения (2) от 75% до 95%. Я всегда ставлю 75%. Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). После этого нажимаем «Сохранить».

  

Для того, чтобы сохранить картинку в формате gif в выпадающем меню (1) выбираем формат GIF. Выбираем количество цветов для сохранения (2). Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). После этого нажимаем «Сохранить».

  

Для того, чтобы сохранить картинку в формате png в выпадающем меню (1) выбираем формат PNG-8. Выбираем количество цветов для сохранения (2). Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). Ставим галочку в чекбоксе «Прозрачность» (6) для того, чтобы фон был прозрачным. После этого нажимаем «Сохранить».

  

Если сразу не понятно, в каком режиме сохранять, лучше всего перепробовать все режимы сохранения, на глаз определяя оптимальное для вас сочетание качества картинки и ее веса после оптимизации. Вообще, полезно поэкспериментировать с настройками, чтобы понять, как работает та или иная функция.

Решено: Как увеличить изображение без потери качества? — Сообщество поддержки Adobe

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

1) Перейдите в диалоговое окно размера изображения и установите для него повторную выборку с помощью метода интерполяции «сохранить детали» и увеличьте ширину и высоту, но не сходите с ума, удваивая число пикселей легко, насколько вы показали.

2) Photoshop теперь будет делать расчетные предположения о цветах пикселей, которые будут соседствовать с реальными пикселями в изображении, и создавать их, что неизбежно будет делать ошибки, которые проявляются как снижение резкости. Чтобы компенсировать это, сохраните увеличенное изображение как «Смарт-объект» или вы могли бы сделать это на шаге 1. Теперь продублируйте слой ctrl-J или cmd-J, установите режим наложения на «мягкий свет» и примените Фильтр высоких частот

Отрегулируйте предварительный просмотр, чтобы получить более четкие края, как показано ниже.Это метод проб и ошибок, поэтому смарт-объект лучше всего использовать в качестве смарт-фильтра, доступного для повторных попыток.

Эта процедура позволяет очень контролируемым образом повышать резкость изображения, компенсируя потерю фокуса во время увеличения.

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

Лучшие результаты могут быть получены с помощью сторонних плагинов, таких как Alien Skin Blow UP, поскольку они имеют более сложные алгоритмы увеличения, но этот метод работает очень хорошо

.

Как экспортировать изображение высочайшего качества в Photoshop

После того, как вы выполнили всю тяжелую работу по созданию изображения в Photoshop, пришло время сохранить и экспортировать его, чтобы вы могли его использовать. Это должна быть самая простая часть, верно? Не совсем. Photoshop позволяет сохранять изображение в нескольких различных форматах и ​​параметрах, каждый из которых предлагает свои уникальные преимущества. Тем не менее, независимо от того, в каком формате вы выберете для сохранения изображения, есть два фактора, которые будут определять, экспортируете ли вы формат изображения самого высокого качества из Photoshop.

  • Разрешение: Насколько высокое или низкое разрешение вам нужно, все зависит от того, как вы планируете использовать свое изображение. Если вам просто нужны файлы изображений для блогов или электронной почты, лучше более низкое разрешение. Однако, если вы планируете использовать свои изображения в журнальном развороте или фотогалерее, постарайтесь получить изображения как можно более высокого разрешения. Узнайте больше о том, как сделать изображение в высоком разрешении с помощью Photoshop здесь.
  • Сжатие: Сжатие происходит, когда размер файла уменьшается из-за того, как он сохраняется.Существуют форматы файлов с потерями, которые снижают качество изображения, чем сильнее сжат файл, и есть форматы файлов без потерь, которые можно сжимать без снижения качества изображения. Например, JPEG с потерями, а RAW без потерь.

Если вы планируете использовать изображение для печати, сохраните его в формате PDF. Photoshop PDF поддерживает векторные изображения, что означает, что изображение не потеряет своего качества при увеличении или уменьшении масштаба. После печати изображение на бумаге будет таким же, как и в программе.

Если вы планируете использовать свое изображение в Интернете, экспортируйте фотографию, выбрав «Файл» → «Экспорт» → «Сохранить для Интернета» (может отображаться как SFW). Это откроет окно SFW. Если вы работаете с фотографией, сохраните ее в формате JPEG, так как это лучше всего для Интернета. Если вы хотите экспортировать баннер, логотип или другую графику, рекомендуется использовать формат GFI.

Делайте больше с вашими изображениями. Найдите идеи для дизайна и ресурсы на нашей странице дизайна. Для всех ваших потребностей в изображениях просмотрите библиотеку изображений Shutterstock сегодня. .

Как изменить размер изображения в Photoshop без потери качества

Выполните простые шаги из этого руководства, чтобы изменить размер любого изображения в Photoshop без потери качества или разрешения.

Предотвращение нежелательных эффектов, таких как растяжение, обрезка и пикселизация, в ваших силах. Просто используйте это руководство, чтобы контролировать размер и разрешение ваших изображений.

В качестве бонуса мы добавили раздел об изменении размера без потери качества изображения.Благодаря Photoshop мы можем увеличивать изображения до точки без типичных артефактов увеличения пикселей, которые могут ухудшить их внешний вид.

Изменение размера изображений может не только предотвратить автоматическое изменение размера. Это просто удобно. В конце концов, чем больше вы можете делать сами, тем меньше вы полагаетесь на других, что экономит время и деньги. Кроме того, это будет очень просто, если вы разберетесь с условиями и функциями. Итак, приступим к делу.


Изменение размера изображения в Photoshop

Изображение предоставлено Stasinho12

Мы хотим изменить размер этого изображения носорога с высоким разрешением.Как видите, мы не хотим упускать много деталей, поэтому вот как их поддерживать.

1. Открыть размер изображения

Параметры изменения размера находятся в окне «Размер изображения». Чтобы получить доступ к окну, откройте файл изображения. Затем щелкните Image в верхней части рамки приложения и щелкните Image Size . Или, удерживая Command + Option , нажмите на клавиатуре I .

Здесь вы увидите ряд параметров, полей и раскрывающихся меню, позволяющих управлять размерами и разрешением изображения.

В этом руководстве нам нужно только обратиться к полям Ширина и Высота . Если вы оставите значок ссылки в состоянии на , вам не придется беспокоиться об искажении изображения из-за случайного неправильного ввода или несоответствия значений. Они автоматически синхронизируются друг с другом. То есть, когда вы меняете одно значение, другое изменяется, чтобы соответствовать исходному соотношению размеров.

Маленький значок звена цепи в левой части области рамки — это переключатель звена.Это состояние «выключено», что означает, что вы можете редактировать размеры независимо. Вы хотите, чтобы он выглядел как изображение выше, с линиями, соединяющими его с шириной и высотой, чтобы гарантировать, что они остаются синхронизированными.
2. Установите свои размеры

Введите ваши конкретные размеры. В раскрывающихся меню справа от каждого поля измерения вы можете выбрать единицы измерения:

  • Процент — позволяет выполнять быстрые вычисления в процентах
  • Пиксели — устанавливать конкретные размеры пикселей
  • дюймов — устанавливает PPI ​​(пикселей на дюйм)
  • Другие единицы линейного измерения

Просто выберите, какие единица соответствует вашей цели.Рекомендуется использовать изображение с предварительно заданным размером для использования в предполагаемой среде, чтобы другие приложения или службы не могли изменять ваши изображения без вашего ведома. Это означает, что нужно сделать изображение именно того размера, который вам нужен, чтобы вы могли разместить его на 100%.

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

3. Сохраните копию

После того, как вы установили размеры, нажмите OK . Теперь вы вернетесь в окно изображения, где сможете выполнить другую работу по редактированию или просто сохранить и закрыть. Рекомендуется сохранить копию этого изображения и оставить оригинал без изменений на тот случай, если вам потребуется внести изменения.

Нажмите Command + Shift + S , чтобы открыть диалоговое окно Сохранить как , которое также доступно в меню «Файл» вверху. Здесь вы можете переименовать файл с измененным размером, чтобы отличить его от оригинала, а также сохранить его в новом месте.Если у вас есть пакет изображений, размер которых нужно изменить, рекомендуется создать новую папку для новых изображений на всякий случай.


Увеличить изображение в Photoshop

Мы хотим сделать это больше, но не потерять ценные детали. Изображение с NumbernineRecord

Поскольку цифровое изображение состоит из пикселей, то есть маленьких монотонных квадратов с резкими краями, мы не сможем разделить их, если вы увеличите масштаб достаточно близко, чтобы увидеть их по отдельности. Мы будем полагаться на высокоуровневые технологии Photoshop для пересчета изображения.

Вот где важно разрешение . Это показатель детализации изображения, измеряемый количеством пикселей в пределах одного квадратного дюйма или PPI (пикселей на дюйм). Ниже вы можете увидеть, как выглядят разные разрешения. Больше пикселей на квадратный дюйм изображения дает больше деталей и резкости.

Обратите внимание на настройки здесь, чтобы проиллюстрировать различное разрешение при одинаковых размерах. Это соотношение влияет на качество изображения, даже если изображение остается того же физического размера.

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

1. Включить сохранение подробностей 2.0

Photoshop представил эту функцию высококачественного увеличения в 2018 году. Чтобы включить ее, нажмите Command + K, чтобы открыть окна настроек, затем щелкните Технологические превью в списке слева от окна.

Вы также можете щелкнуть Photoshop в верхней части экрана, навести курсор на «Настройки» и щелкнуть «Предварительный просмотр технологий».

Просто убедитесь, что включен параметр «Включить сохранение подробностей 2.0 Upscale», и все готово. Если нет, щелкните по нему. Нет необходимости перезагружать. Теперь вернитесь в окно размера изображения и обратитесь к переключателю Resample.

2. Включить повторную выборку

При выключении размеры в пикселях и разрешение остаются связанными. Если вы увеличите разрешение (в окне это отображается как «Пиксели / дюйм»), размеры уменьшатся, чтобы отразить изменение, и наоборот.Это просто означает, что Photoshop — это , а не , добавляя или удаляя пиксели, общее количество пикселей остается постоянным, и изменяется только количество пикселей на квадратный дюйм.

Теперь отметьте Resample on, и опции для метода передискретизации в раскрывающемся списке рядом с ним станут доступными. Это параметры для отдельного изменения разрешения и размеров, позволяющие Photoshop смешивать пиксели различными способами, чтобы изображение оставалось гладким при увеличении или уменьшении. Варианты увеличения находятся в верхней половине списка.

Верхняя часть списка предназначена для увеличения, в частности, «Сохранить детали» 2.0
3. Выберите «Сохранить детали» 2.0

Режим увеличения по умолчанию — Автоматически , но можно установить последний использованный метод. Если для него установлено значение «Автоматически», Photoshop не будет использовать «Сохранить детали» 2.0, поэтому выберите этот параметр вручную, чтобы обеспечить высокое качество результатов. Так что для достижения наилучших результатов выберите Preserve Details 2.0 .

4.Подавление шума

Когда вы выберете из списка «Сохранить детали 2.0», вы увидите ползунок для процента уменьшения шума. Инстинктивно может показаться, что можно полностью перебросить ползунок на 100%, но используйте предварительный просмотр в левой части окна, чтобы увидеть, как это повлияет на изображение. Иногда это может смазывать детали изображения, если установлено слишком высоко. Выберите значение, которое снижает шум, но не делает детали слишком кремовыми.

При удвоении разрешения до 600 пикселей на дюйм это изображение потребует некоторого шумоподавления. Однако посмотрите, как NR при 100% слишком много. В таком случае используйте значение от 0 до 100.

Теперь сделайте последнюю проверку предварительного просмотра изображения, увеличивая и уменьшая масштаб и панорамируя изображение. При необходимости измените шумоподавление. Нажмите ОК и снова проверьте изображение на весь экран. Если вы хотите сравнить, нажмите «Отменить» (Command + Z) и снова откройте «Размер изображения». Воспользуйтесь другими методами увеличения из раскрывающегося меню и проверьте результаты. Скорее всего, Preserve Details 2.0 будет лучшим вариантом для высококачественного увеличения без потери качества изображения.


Ищете другие полезные советы по Photoshop? Проверьте это.

.

Как увеличить изображение цифровым способом без потери качества

С сегодняшними камерами, имеющими больше мегапикселей, у вас больше шансов уменьшить фотографию, чем увеличить ее. Но бывают случаи, когда увеличение размера изображения действительно может пригодиться. К сожалению, увеличить изображение без потери качества бывает непросто.

Есть несколько способов решить эту проблему, и в этой статье мы опишем два из лучших способов увеличить изображение без потери качества.

Что нужно иметь в виду при увеличении изображения

Когда вы увеличиваете размер изображения, вы просите свой компьютер добавить информацию.Короче говоря, вы говорите ему взорвать изображение, потеряв детали, и для этого «угадываете», как будет выглядеть большее изображение.

Это означает, что вы никогда не получите идеального воссоздания своей фотографии в большем размере, потому что это вопрос формата и программного обеспечения: одни приложения справятся с этим лучше, чем другие, а некоторые изображения будут изменять размер лучше, чем другие.Но все они должны гадать.

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

Как изменить размер изображения с увеличением на 10 процентов

Это обычно рекомендуемый метод, чтобы узнать, насколько масштабным масштабированием можно обойтись при увеличении изображения без потери качества.Лучше всего это работает, если вы , а не , пытаетесь масштабировать изображение до определенного размера, а пытаетесь увеличить изображение до максимально возможного размера, не делая его плохим. Мы будем использовать это изображение журналов на журнальном столике в качестве примера.

Это изображение в настоящее время имеет ширину 670 пикселей.Если вы наклонитесь к монитору и прищурится, вы, вероятно, сможете разобрать весь текст. Сейчас все довольно гладко, и изображение выглядит красиво.

Чтобы увеличить изображение, мы собираемся воспользоваться функцией Resampling , которая является частью «угадывания», о которой мы говорили ранее.И мы собираемся использовать для этого Adobe Photoshop. Вот что происходит, когда мы увеличиваем изображение до колоссальных 2000 пикселей в ширину (просто чтобы показать вам, на что способна программа):

Как изменить размер изображения с помощью Photoshop

Чтобы изменить размер этого изображения в Photoshop, щелкните в верхнем меню приложения и выберите Изображение > Размер изображения .Затем отрегулируйте высоту и ширину в диалоговом окне Размер изображения . Также убедитесь, что Resampling включен, с Bicubic Smoother в качестве предустановки.

Как видите, Photoshop великолепно сглаживает это изображение с 670 до 2000 пикселей.Photoshop CC за эти годы действительно улучшился стремительно, и хотя это изображение определенно размыто по краям, а текст не такой резкий, вы все равно можете легко разобрать большую его часть.

Однако легко представить, что некоторые детали на другом изображении станут неразличимыми.Поэтому вместо того, чтобы делать скачок до 2000 пикселей, мы просто добавим 10 процентов к исходному размеру изображения.

Чтобы увеличить размер изображения до 10 процентов в Photoshop, выберите «Изображение »> «Размер изображения ».Затем — вместо настройки ширины и высоты по пикселям — выберите Percent . Наберите 110% и убедитесь, что Resampling: Bicubic Smoother все еще включен.

Вот как выглядит изображение, если увеличить его на 10 процентов:

Как видите, все еще выглядит довольно четко.Чтобы поэкспериментировать с этим, продолжайте увеличивать изображение в Photoshop на 10 процентов за раз, пока не начнете замечать некоторую зернистость. Поскольку мы пытаемся сделать небольшие шаги, чтобы максимально увеличить изображение, сохраняя при этом качество самого изображения, зернистость — это ваш сигнал, чтобы остановиться.

Если вы собираетесь использовать этот метод, очень важно убедиться, что Resample включен в вашем приложении для редактирования фотографий.Вот как это выглядит в диалоговом окне Размер изображения в Photoshop:

Вы также можете использовать такое приложение, как Pixelmator или GIMP, для передискретизации изображения.Оба хороши и предложат аналогичный вариант. Если вам повезет, вы сможете выбрать алгоритм интерполяции (то есть метод «угадывания» компьютера) для масштабирования. Когда вы увеличиваете масштаб, вариант Bicubic Smoother будет хорошим вариантом.

Как использовать специальное приложение для увеличения изображения

Поскольку так много людей нуждаются в больших фотографиях, на самом деле существует ряд приложений, специально разработанных для увеличения изображения без потери качества.

Например, Sharper Scaling — это бесплатное приложение для Windows, которое обещает лучшее масштабирование, чем Photoshop.Результаты, опубликованные на его сайте, впечатляют. Это приложение делает одно и только одно — увеличивает размер изображения — но оно бесплатное, поэтому его определенно стоит скачать.

Бесплатные эквиваленты для macOS менее многочисленны, но это не значит, что у вас нет вариантов.Waifu2x — надежный онлайн-вариант. Waifu показал очень впечатляющие результаты при увеличении аниме-изображения и прояснении его, хотя это может быть немного непредсказуемо с фотографиями.

В конце концов, вам, возможно, придется попробовать несколько из этих вариантов, чтобы увидеть, какое приложение лучше всего подходит для увеличения вашего изображения.Выше приведен пример того, что Waifu может сделать для нашего изображения по сравнению с Photoshop бок о бок.

Даже не увеличивая изображение, чтобы сделать его ясным, вы, вероятно, увидите, что изображение из Waifu очень похоже на последнюю версию Photoshop.Использование сайтом глубоких сверточных нейронных сетей (что такое нейронные сети?) Делает его очень искусным в «угадывании», о котором мы упоминали ранее, и в результате получаются значительно более чистые увеличенные фотографии.

Однако, если Waifu вам не подходит, вы можете попробовать Online Image Enlarger, Simple Image Resizer или Rsizr.

Теперь вы можете увеличивать изображение без потери качества

Эти два метода увеличения размера изображения, вероятно, лучше всего подходят, если вы хотите увеличить изображение без потери качества.Ни один из них не идеален, но из-за ограничений технологий они — лучшее, что мы можем сделать.

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

Кредит изображения: фрактал-ан / Shutterstock

Google Now позволяет вам практически посетить 100 культурных сайтов в поиске

Об авторе Шианн Эдельмайер (138 опубликованных статей)

Шианн имеет степень бакалавра дизайна и имеет опыт работы в подкастинге.Сейчас она работает старшим писателем и 2D-иллюстратором. Она занимается творческими технологиями, развлечениями и производительностью для MakeUseOf.

Ещё от Shianne Edelmayer
Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Еще один шаг…!

Подтвердите свой адрес электронной почты в только что отправленном вам электронном письме.

.

Подготовка фотографии для Интернета

25 декабря 2019 в 17:01 — последнее обновление

Урок №2

Подготовить фотографию к размещению в интернете не могут большинство начинающих пользователей. Пытаются «всунуть» фотографию огромного размера на свой сайт, а потом удивляются, почему страница сайта очень долго грузится, или почему искажены пропорции фотографии.


При подготовке фото для интернета, нужно максимально уменьшить объем файла, что бы посетители не ушли с сайта до окончательной загрузки фотоснимка, в то же время, что бы качество снимка не сильно пострадало при сжатии.

Итак, сначала определяемся, какой размер будет у нашей фотографии.

Смотрим исходный размер. То есть, в меню Изображение, выбираете пункт Размер изображения.

Открывается окно Размер изображения

Как видите, у приведенной мной для образца фотографии размер слишком большой — объем файла будет тоже не маленький. Поскольку самое распространенное на данный момент экранное разрешение — 1024х768 пикселей, то и фотографию больше этого размера делать не стоит.

Вводим вместо 2048 (у вас скорее всего там другие цифры) 1024 в окошко «ширина», при этом в окошке «Высота» автоматически появится цифра 768 (потому, что перед фразой Сохранить пропорции стоит галочка)

Нажимаем кнопку «ОК» — теперь у Вашей фотографии нужный размер!
Кстати, если вы на первом уроке кадрировали снимок до нужного размера, то этот абзац можете пропустить.

Примечание: Если исходный размер снимка меньше, чем 1024х768, то увеличивать его не стоит. Он, конечно, растянется до требуемого размера, но качество изображения ухудшится. Поэтому, если фотография и не закрывает весь экран — то пусть радует глаз красотой а не размерами. Ведь еще Ленин говорил по этому поводу: «Лучше меньше — да лучше!»

С размерами определились, переходим непосредственно к сохранению.

Сохранение фотографии для Интернета

В меню Файл, выбираете пункт Сохранить для Web.

Открывается диалоговое окно Save For Web

Как видите, появляется 2 снимка для сравнения качества изображения: оригинал и тот снимок, который получится при устанавливаемых Вами параметрах.

Вы спросите: какие параметры устанавливать?

Во-первых, в окошке 2 выберите формат GIF или JPEG.

Формат GIF поддерживает не больше 256 цветов и подойдет только для сохранения рисунков и чертежей (рисунки 6-8 на этой странице сохранены в формате GIF с поддержкой 64 цветов, поэтому весят по 7-11 кб — мелочь, а приятно!)

Конечно, красивую фотографию в этом формате не сохранишь, поэтому выбираем формат JPEG.

В окошке 3 выбираем качество фотографии: низкое, среднее, высокое, максимальное. Вы скажете: конечно максимальное?

Да, если бы речь шла о сохранении на винчестер, то так бы оно и было. Но Вы же собираетесь эти фотографии размещать в Интернете для скачивания почитателями Вашего таланта! А кто любит долго ждать открытия страницы? Вот именно, никто!

Представленная фотография сохранена при среднем качестве и «весит» 36 кб. При высоком качестве она бы весила около 100 кб, а при максимальном — 200! Вообщем, я особой разницы между средним и высоким качеством не вижу, зато вижу большую разницу в объеме получаемого файла.

А вы можете поэкспериментировать. Меняя значения, вы будете видеть, как у вас на глазах меняется качество правого снимка. Кроме того, под правым снимком увидите, как меняется размер К (в килобайтах) снимка, в зависимости от качества.

Наконец, когда выбор размера изображения, формата и качества закончен, нажимаем кнопку Save (Сохранить). Как обычно, потребуется назвать файл (поскольку файл готовите для Интернета — сразу напишите латинскими буквами) и определить папку для сохранения. Когда вы это сделали — опять нажимаете кнопку Сохранить.

Если шибко грамотный фотошоп при этом выдаст вам предупреждение, что «некоторые имена файлов несовместимы с некоторыми веб-браузерами», скажите, что и без него все знаете и нажмите ОК .

Всё, снимок готов!

Внимание! Пока Вы полностью не закончите работу над фотографией, сохраняйте ее в «родном» фотошоповском формате PSD. Потому что многократное повторное сжатие в форматах GIF и JPEG приводит к безвозвратной потере качества.

Перейти к другим урокам по фотошопу:

  1. Кадрирование фотографии.
  2. Тоновая коррекция изображения
  3. Маскировка некоторых дефектов на фото с помощью Заплатки
  4. Удаление «эффекта красных глаз» с помощью Photoshop
  5. Подготовка фотографии к печати

Передовой опыт по оптимизации изображений для вашего веб-сайта

Добавляя изображения на свой веб-сайт, вы должны убедиться, что они оптимизированы для Интернета.

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

Мы составили список рекомендаций по оптимизации изображений для вашего сайта, чтобы полностью раскрыть его потенциал.


Сохранить изображение для Интернета

Убедитесь, что вы используете подходящий тип файла (предпочтительно jpg или png) и сохраните изображение. Если вам предоставляется возможность выбрать качество экспорта или сохранения, A Better Lemonade Stand, ведущее сообщество технической поддержки, рекомендует использовать качество около 60%.


Выбирайте имя файла с умом

Программы блокировки рекламы часто смотрят на имена файлов фотографий, чтобы определить, является ли что-то рекламным. Чтобы ваши изображения не блокировались в определенных браузерах, избегайте:

  • ключевых слов объявлений в имени файла, таких как баннеры, реклама, реклама и т. д.- Пример: имена файлов фотографий, например «GroupPhoto_homepage AD .jpg»


Сжатие изображений

Это способ уменьшить общий размер файла изображения. Вы можете увидеть потерю качества вашей фотографии, если вы сожмете слишком маленькое изображение. Обратите внимание на размер файла вашего изображения после сохранения. Tech Republic рекомендует, чтобы размер вашего файла не превышал 200 КБ для Интернета в качестве абсолютного максимума. См. № 3 ниже для инструмента для сжатия изображений.


Размеры изображения

Если вы заметили, что размер вашего изображения значительно превышает ширину 2400 пикселей для больших изображений или 800-1200 пикселей для обычных фотографий веб-сайта в тексте, вы можете подумать об уменьшении размера изображения.


Параметры редактирования изображения в Novi: Масштабирование и перетаскивание

Для изображений, загруженных в Novi и используемых как:

  • Избранное изображение по умолчанию

  • Блог, статья о продукте или событие или избранное изображение

  • 6 9 Image

  • компании Логотип

Есть два варианта редактирования:

  1. Zoom: ZOOM BAR для изменения размера изображения

  2. Перетащите: Возможность нажать и перетащите изображение в рамку

Если изображение необходимо изменить, используйте функции масштабирования и перетаскивания, чтобы настроить подгонку.

  • После того, как изображение правильно оформлено, нажмите кнопку Set Crop (под изображением). Это сохранит изображение, включая все сделанные вами настройки. Он , а не изменит исходный файл jpg/png.

  • Если изображение выглядит хорошо, нажмите кнопку Сохранить (вверху справа).

  • Если изображение по-прежнему нуждается в настройке, нажмите кнопку Edit Crop .


1.Photoshop — позволяет сохранить нужный размер (в пикселях), тип файла и качество. Это отличный инструмент, чтобы делать все эти вещи в одном.

2. Бесплатные инструменты . Если у вас нет доступа к Photoshop, вы можете изменить размер изображений с помощью одного из рекомендованных ниже инструментов:

Примечание: Canva и Pixlr предлагают другие инструменты редактирования также могут оказаться полезными, например, добавление текста к изображению.

3. Сжать — Кроме того, если вам нужно сжать, мы иногда используем инструмент: http://compressjpeg.COM /


Быстрая статистика

Рекомендуемые размеры файлов — Идеальный размер 400 КБ или до

  • Избранные изображения (Главная страница Топ-сайт, слайдер и т. Д.) Оптимальный Размер составляет 2400 х 1000 пикселей.
    Для оптимального использования их ширина не должна превышать 2400 пикселей. Для получения дополнительной информации о выборе избранных изображений нажмите здесь.

  • Логотипы событий оптимальный размер 525 x 225px.
    Обратите внимание, что если у вас нет этих точных размеров, изображение все равно будет отображаться, но может быть некоторая обрезка. Если вы не загрузите логотип, появится значок по умолчанию для категории событий.

  • Отдельные хедшоты — 300 x 300px.
    Поскольку это изображения меньшего размера, размер файла также должен быть немного меньше. Это минимальный размер снимков головы, который должен быть для оптимального качества изображения, но для больших размеров вы можете использовать наш инструмент для изменения размера изображения.

  • Изображения продукта — 250 x 250 пикселей
    Так как это изображения меньшего размера, размер вашего файла также должен быть немного меньше. Это минимальный размер изображения продукта, который должен быть для оптимального качества изображения, но для больших размеров вы можете использовать наш инструмент изменения размера изображения.

  • Таблица лидеров — Для раздела таблицы лидеров оптимальным размером является 728×90. Однако раздел будет меняться в зависимости от того, какой контент вы туда поместите — это может быть текст, изображение и т. д.


Статьи по теме:

Как оптимизировать изображения для мобильного Интернета — Бренд

Когда дело доходит до выбора типов и размеров файлов для ваших изображений, помните о качестве, времени загрузки страницы, возможностях масштабирования и требованиях рынка, особенно если вы продаете на нескольких платформах. Давайте посмотрим на оптимизацию изображений для Интернета  и на то, как выбрать тип файла, не забывая при этом о мобильных устройствах, чтобы улучшить взаимодействие с пользователем.

Выбор правильных размеров изображения

Крайне важно соблюдать баланс между изображениями, которые достаточно велики, чтобы пользователи могли их увеличивать, и изображениями оптимального размера, чтобы они не занимали слишком много места и не замедляли загрузку страницы. На Shopify вы можете загружать изображения размером до 4472 x 4472 пикселей с размером файла до 20 МБ. Но создатели веб-сайтов обычно рекомендуют использовать квадратные фотографии товаров размером 2048 x 2048 пикселей. Это изображения с высоким разрешением, которые придают вашему магазину профессиональный и всесторонний вид с большими возможностями масштабирования.Имейте в виду, что для работы функции масштабирования ваши изображения должны иметь размер более 800 x 800 пикселей.

Точно так же Amazon и Etsy предъявляют требования к изображению размером 1000 x 1000 пикселей для включения масштабирования.

Чтобы сохранить единообразный внешний вид всей линейки продуктов и страниц коллекций, вы должны сохранять одинаковое соотношение ширины и высоты всех ваших тематических изображений, например квадратное. Ваше функциональное изображение — это первое изображение продукта, которое появится в вашем магазине — на главной странице, странице корзины, странице оформления заказа и на различных страницах коллекций.Все миниатюры должны быть одинакового размера и формы, чтобы придать магазину изысканный вид. Имейте в виду, что многие из ваших клиентов также будут просматривать сайты на мобильных устройствах, а квадратные изображения легче перемещать для небольших экранов.

Источник: Beardbrand

Выбор правильного формата изображения

Давайте взглянем на форматы файлов, наиболее широко используемые в предметной фотографии, и на то, что каждый из них приносит на стол. Они перечислены здесь по тому, насколько часто они используются в фотографии продукта.

JPG

JPG является наиболее распространенным форматом файлов цифровых изображений.Он широко поддерживается и может похвастаться небольшим размером файла с хорошей цветовой гаммой. Его сжатие позволяет найти баланс между размером файла и качеством изображения. Shopify рекомендует JPG, в частности, потому что он может предоставлять изображения относительно небольшого размера и хорошего качества, что хорошо подходит для фотографий продуктов.

PNG

PNG был создан для улучшения формата GIF за счет снятия ограничения на 256 цветов. Он широко распространен, без потерь (уменьшает размер файла без снижения качества) и поддерживает прозрачность (скажем, для прозрачного фона).Недостатком является то, что размеры файлов PNG могут быть большими из-за сжатия без потерь, а формат не так универсально совместим, как JPG.

HEIC

Файлы

HEIC представляют собой компактный формат файлов, который занимает примерно половину места по сравнению с эквивалентным файлом JPEG с использованием передовой технологии сжатия. Чаще всего он используется для хранения фотографий на устройствах iOS, поскольку это стандартный формат файлов Apple.

ВЕБП

WebP — это современный формат изображений, обеспечивающий превосходное сжатие изображений в сети, при этом средний размер файла экономится более чем на 30 % по сравнению с традиционными форматами файлов, такими как PNG и JPEG

GIF

GIF предлагает небольшой размер файла за счет сжатия и уменьшения изображения до 256 цветов.Хотя он был широко заменен PNG, он по-прежнему используется для анимации, поскольку это единственный формат, который поддерживает его и повсеместно распознается браузерами.

ТИФФ

TIFF — это формат сжатия без потерь, который широко поддерживается рядом редакторов и веб-приложений. Он предлагает высокое качество разрешения, и несколько изображений и страниц могут быть удобно сохранены в одном файле. Однако размер файла имеет тенденцию быть большим.

В целом, JPG, безусловно, является наиболее удобным, когда речь идет о сочетании меньшего размера с достойным качеством.Хотя PNG предлагает сжатие без потерь более высокого качества, это достигается за счет увеличения размера файла. GIF полезен, если вы предлагаете 360-градусные снимки и хотите легковесные файлы. TIFF, для сравнения, может предложить отличное качество, но в натуральную величину обычно довольно тяжелый и непрактичный.

Источник: Jaelynn Castillo

Размер изображений для мобильных устройств

Shopify автоматически изменяет размер ваших изображений, чтобы они подходили для небольших экранов, но некоторые изображения иногда требуют ручного редактирования. Имейте в виду, что экраны настольных компьютеров и мобильных устройств не только разного размера, но и имеют противоположную ориентацию.И хотя Shopify пытается приспособиться к этому с помощью аккуратной обрезки, будет лучше, если ваши изображения будут квадратными, а ваш продукт будет центрирован по вертикали и горизонтали.

Кроме того, изображения со слишком большим разрешением, скажем, максимальным разрешением Shopify 4000 x 4000 пикселей, могут получиться размытыми при изменении размера для мобильных устройств. Таким образом, уменьшение вашего изображения до более удобного размера и формы с учетом мобильных устройств может помочь вашему магазину выглядеть лучше на всех устройствах. Имейте в виду, что большие файлы также замедляют время загрузки вашего сайта.А в электронной коммерции, и особенно в мобильной, важна каждая секунда, поэтому оптимизация ваших изображений должна быть приоритетом.

Таким образом, хотя сжатие без потерь может обеспечить изображение самого высокого качества, оно часто создает большие файлы, загрузка которых занимает целую вечность (особенно в пакетном режиме), и может замедлить время загрузки вашей страницы, заставляя посетителей покинуть ваш магазин. Это особенно актуально для мобильных устройств, где скорость интернета может быть ниже, а ожидание появления изображения расстраивает покупателей.

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

Об авторе

Холли Кардью — основательница Pixc, платформы, помогающей магазинам электронной коммерции редактировать и оптимизировать фотографии товаров, чтобы увеличить продажи. Pixc превращает обычные изображения продуктов в красивые, редактируя и удаляя фон в течение 24 часов. Начав в подростковом возрасте, продавая на eBay и создавая собственную онлайн-площадку, Холли имеет опыт работы в электронной коммерции, онлайн-маркетинге, графическом дизайне и создании распределенных команд. У нее также есть опыт создания и управления магазинами Shopify и увеличения количества подписчиков в социальных сетях.В 2016 году Холли была включена в список Forbes «Розница и электронная коммерция 30 до 30». Холли живет в Сан-Франциско, Брисбене и Сиднее. Когда Холли не работает, она любит путешествовать, исследовать новые места, красивый дизайн, типографику и придумывать новые бизнес-идеи.

Как сохранить фотографии для крупноформатной печати

Очень важно сохранить фотографию в ее оптимальном состоянии для крупноформатной печати, так как это может существенно повлиять на качество фотопечати.Здесь, в Xpozer, мы печатаем тысячи больших фотографий в год, и мы вложили все наши знания и опыт в эти пошаговые инструкции для вас.

Как сохранить фотографии для широкоформатной печати

Обратите внимание: Эти шаги предназначены для фотографов, которым нужна фотопечать высочайшего качества. Простого сохранения фотографии в хорошем формате файла с максимальным разрешением обычно достаточно для хорошей фотопечати.Если вы хотите делать это так, как это делают профессионалы, читайте дальше!

Шаг 1. Выберите правильный формат файла

Многие фотографы снимают и редактируют в формате RAW. Это рекомендуемый формат файла, так как он позволяет вам легко настраивать фотографии без негативного влияния на качество фотографии. Однако RAW не является форматом файла, который можно использовать для печати.

Когда вы закончите редактирование фотографии, мы рекомендуем вам сохранить ее в формате JPG и отправить в этом формате для печати.Сохраненная в виде файла JPG, ваша фотография имеет максимальное качество, которое может обработать принтер.

Хотя технически фотография, сохраненная в формате TIFF, имеет больше цветовых каналов и часто представляет собой файл большего размера, по опыту мы знаем, что это не приводит к более высокому качеству печати. Разница между печатью из файла JPG или файла TIFF невооруженным глазом не видна, а только в размере файла. Лучше сохранять фотографии в виде файла JPG для фотопечати на стене.

Если ваша фотопечать содержит векторные рисунки (текст, логотипы, рисунки и т.), мы рекомендуем сохранить изображение в виде файла PDF.

В Photoshop вы можете выбрать желаемый формат файла, выбрав Файл > Сохранить как . Затем вы можете выбрать формат файла из выпадающего меню. В Lightroom при выборе «Файл» > «Экспорт » вы можете выбрать нужный формат файла, а также размер и качество. Убедитесь, что все они максимальны для достижения наилучших результатов.

На изображении вы можете увидеть варианты сохранения фото в Lightroom.

Шаг 2. Выберите цветовое пространство

При сохранении фотографии вы также можете установить предпочтительные цветовые пространства. Разные помещения предлагают разный уровень насыщенности цвета. Наиболее известными цветовыми пространствами являются RGB (имеющее несколько вариаций) и CMYK.

Для печати фотографий на стенах мы настоятельно рекомендуем сохранять фотографии в цветовом пространстве sRGB. sRGB предлагает более широкий диапазон цветов или более широкую гамму, чем CMYK. Это означает, что насыщенность цвета будет лучше, и ваш настенный отпечаток будет отражать все цветовые нюансы вашей фотографии.

Разница между AdobeRGB и sRGB на распечатанной фотографии практически незаметна. Однако, поскольку AdobeRGB не читается многими мониторами, интернет-браузерами и принтерами, мы настоятельно рекомендуем вам сохранять фотографии в цветовом пространстве sRGB.

К счастью, при заказе настенной печати у Xpozer и использовании цветового пространства AdobeRGB это не проблема! Наши мониторы и принтеры могут считывать оба цветовых пространства.

Шаг 3: Сохраните в максимальном разрешении для печати большого размера

Хотя тип файла и цветовое пространство важны при сохранении фотографии, разрешение еще более важно при печати фотографии на стену.Мы рекомендуем всегда сохранять фото с максимальным качеством и размером файла. Было бы обидно напечатать вашу потрясающую фотографию с качеством ниже максимального. Вы потеряете детали и цвет.

В Lightroom: выберите размер фотографии, которую вы хотите распечатать, в разделе «Размер изображения» (например, настенная печать 36 x 24 дюймов). Всегда выбирайте максимальное количество ppi (пикселей на дюйм) или dpi (точек на дюйм).

Шаг 4. Заточка по типу бумаги 

Если вы хотите напечатать абсолютно идеальную настенную печать, вы можете выбрать тип бумаги, на которой вы будете печатать.Некоторые типы бумаги записывают детали вашей фотографии лучше, чем другие. Выбрав тип бумаги в настройках, которые вы используете для сохранения фотографии, вы можете создать максимальную резкость на своей фотографии. Тип бумаги можно установить в Lightroom в разделе «Повышение резкости на выходе».

Преобразуете цифровую фотографию в настенную печать Xpozer ? Если да, то при экспорте вашей фотографии выберите параметр « Матовая бумага » в настройках « Выходная резкость » и установите значение « Высокий ».Фотопринты Xpozer печатаются на нашем матовом фотоматериале Vivid Satin, изготовленном на заказ.

Выше вы видите обзор предпочтительных настроек для экспорта в Lightroom.
Дополнительные советы:

Узнайте больше о том, как превратить ваши потрясающие цифровые фотографии в Xpozer Prints, из других наших статей:

Вот как вы редактируете фотографию для печати с помощью Lightroom

Быстрое редактирование фотографий для печати на больших стенах с помощью Luminar

Как проверить разрешение фотографии перед печатью

3 способа определить пропорции вашей фотографии

Лучший размер изображения для веб-сайтов 2021 | Полное руководство

Изображения являются важной частью каждого веб-сайта.Они не только помогают привлечь внимание вашего посетителя, но и помогают в общем SEO. Ключом к хорошим изображениям для вашего веб-сайта является поиск или использование высококачественных изображений и обеспечение их правильного размера. Знание оптимального размера изображения для веб-сайтов необходимо для привлекательного контента и хорошей скорости загрузки страницы.

 

Какой размер изображения лучше всего подходит для веб-сайтов?

Размер ваших изображений зависит от того, где вы хотите разместить их на своем веб-сайте.Оптимальный размер файла для изображений на веб-сайте — не более 200 КБ, а для полноэкранных фоновых изображений — от 1500 до 25000 пикселей в ширину, а для большинства других изображений максимальная ширина — 800 пикселей. Хранение изображений между этими периметрами обеспечит их правильную загрузку на компьютерах и экранах мобильных устройств.

 

Оптимальный размер изображения заголовка

Оптимальный размер изображения для заголовка веб-сайта — 1024 пикселя в ширину. Большинство веб-сайтов имеют разрешение 1024 x 768 пикселей. Таким образом, изображение заголовка размером 1024 пикселя будет хорошо отображаться в верхней части вашего веб-сайта, не замедляя скорость вашей веб-страницы.

 

Оптимальный размер фонового изображения

Для фоновых изображений оптимальным размером является 1920 пикселей в ширину и 1080 пикселей в высоту. Это идеальное соотношение 16:9 заполнит всю поверхность веб-страницы без ущерба для качества изображения. С точки зрения пикселей на дюйм (ppi), изображение должно быть не менее 72. Но старайтесь, чтобы размер файла был как можно меньше, иначе это может замедлить время загрузки вашего сайта.

 

Лучший размер изображения логотипа

Оптимальный размер изображения логотипа для веб-сайтов обычно составляет 250 пикселей в ширину и 100 пикселей в высоту и не более 320 пикселей в ширину и 70–100 пикселей в высоту.Но если на вашем сайте есть вариант логотипа «retina», то эти размеры должны быть удвоены. Однако в целом, поскольку мобильные устройства имеют ширину от 320 до 500 пикселей, размер изображения логотипа для мобильных веб-сайтов должен находиться в пределах этого диапазона, чтобы обеспечить его отображение на экране.

 

Какой формат изображения лучше всего подходит для Интернета?

Золотым правилом для типов файлов изображений являются форматы файлов JPG для фотографий и файлы PNG или SVG для логотипов и иллюстраций. Это гарантирует, что ваши изображения будут загружаться правильно и не замедлят скорость загрузки вашей страницы.Если вы работаете с веб-сайтом на WordPress, важно знать, что WordPress не поддерживает типы файлов SVG. Вот почему мы рекомендуем плагин под названием SVG Support для клиентов, которым он нужен.

 

PNG и JPG для Интернета — в чем разница?

PNG-изображения больше, чем JPG, что означает, что они обычно загружаются медленнее. С другой стороны, PNG поддерживают прозрачность и имеют более высокое качество, чем JPG. Большинство изображений на веб-сайтах могут быть в формате JPG, но иногда вам может понадобиться PNG.Если это так, убедитесь, что у вас правильный размер файла PNG, и используйте инструмент сжатия, чтобы уменьшить размер файла.

 

Как ускорить загрузку фотографий на веб-сайте

Перед загрузкой изображений на веб-сайт убедитесь, что они изменены до нужного размера. Еще один способ ускорить загрузку изображений и не замедлить скорость страницы — сжать их до меньшего размера. Существуют бесплатные инструменты сжатия изображений, такие как Optimazilla или TinyJPG, которые помогут оптимизировать ваши изображения.

 

Почему скорость загрузки так важна?

Скорость загрузки важна для общего состояния и производительности вашего веб-сайта. Если у вас медленно загружаются страницы, ваши посетители могут уйти, чтобы найти более быстрый веб-сайт, что приведет к более высокому показателю отказов для вашего веб-сайта. Показатель отказов является жизненно важным элементом для поисковой оптимизации. Поисковые системы, такие как Google, вознаградят веб-сайт с более низким показателем отказов и быстрой загрузкой, появившись в верхней части результатов поиска.

 

Нужна помощь в создании веб-сайта? Дайте нам знать!

Если размеры изображений и типы файлов, а также коэффициенты сжатия вас не устраивают, дайте нам знать! Мы — местное цифровое агентство в Ванкувере, штат Вашингтон, с более чем десятилетним опытом создания эффективных веб-сайтов и их оптимизации для SEO.Наша команда встретится с вами, чтобы обсудить ваше видение и проведет вас через весь процесс.

Руководство по оптимизации изображений для мобильных устройств — Smashing Magazine

Краткий обзор ↬ Вы хотите создать мобильный веб-сайт или PWA, который превращает посетителей в потенциальных клиентов или клиентов. Но поскольку Google и потребители становятся все более требовательными к скорости загрузки, что еще вы можете сделать? ImageKit, служба оптимизации цифровых изображений, может иметь нужное вам универсальное решение.

( Это рекламная статья. ) Вы знаете, как важно создавать сайты, которые загружаются быстро. Все, что требуется, — это чтобы страница загружалась на одну секунду дольше, чтобы начать терять посетителей и продажи. Кроме того, теперь, когда Google сделал индексацию для мобильных устройств по умолчанию, вы действительно не можете позволить какой-либо оптимизации производительности отойти на второй план, учитывая, насколько сложно сделать ваш мобильный сайт таким же быстрым, как ваш рабочий стол.

Google принимает во внимание множество факторов при ранжировании веб-сайта, а посетители принимают во внимание, возможно, несколько факторов, решая изучить сайт.На пересечении двух сайтов скорость .

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

Изображения — это мощная сила в Интернете.

Хорошо подобранные изображения не только улучшают внешний вид сайта, но и облегчают посетителям просмотр контента.Конечно, у изображений есть и SEO-преимущества.

Итак, сегодня давайте сосредоточимся на том, как вы можете создавать столько изображений, сколько хотите, не замедляя работу вашего веб-сайта. Это потребует от вас обновления стратегии оптимизации изображений и использования инструмента под названием ImageKit, но вам не потребуется много усилий, чтобы внедрить эту новую систему. Необходимость стратегии оптимизации изображения для мобильных устройств5 КБ .

  • Средний размер мобильного веб-сайта в 2019 году составляет 1745,0 КБ .
  • Архив HTTP показывает, сколько килобайт в среднем занимают настольные и мобильные веб-сайты. (Источник: HTTP-архив) (Большой предварительный просмотр)

    Если мы не справимся с этим ростом, будет невозможно удовлетворить потребности потребителей и Google, когда дело доходит до предоставления быстрых веб-сайтов. Это или нам придется сделать действительно хорошим для оптимизации скорости.

    Говоря о скорости, давайте посмотрим, что HTTP Archive может сказать о весе изображения.

    HTTP Archive показывает, сколько весят изображения на настольных и мобильных веб-сайтах. (Источник: HTTP-архив) (Большой предварительный просмотр)

    На сегодняшний день:

    • Средний размер изображений на рабочем столе составляет 980,3 КБ из общего размера 1939,5 КБ.
    • Средний размер изображений на мобильных устройствах составляет 891,7 КБ из общего размера 1745,0 КБ.

    Итог: изображения придают веб-сайтам большой вес и потребляют много трафика. И хотя эти данные показывают, что средний размер изображений на мобильных устройствах меньше, чем на настольных компьютерах, доля изображений на веб-сайте немного выше.

    Тем не менее, если у вас есть правильная стратегия оптимизации изображения, это можно легко исправить.

    Вот что должна включать в себя эта стратегия:

    1. Правильно масштабируйте изображения

    Существует множество утомительных задач, которые вам пришлось бы выполнять без соответствующей автоматизации. Например, изменение размера ваших изображений.

    Но ты должен это сделать, верно?

    Допустим, вы используете Unsplash для получения ряда изображений для веб-сайта, над которым вы работаете.

    Пример фотографии, которую вы можете найти на Unsplash. Фотография сделана Марком Боссом.(Источник: Unsplash) (Большой предварительный просмотр)

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

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

    Это исходные размеры изображения Unsplash: 5591×3145 пикселей.(Источник: Unsplash) (Большой предварительный просмотр)

    Это конкретное изображение экспортировано как файл размером 3,6 МБ и изображение размером 5591×3145 пикселей. Это слишком много для любого веб-сайта.

    Нет причин загружать изображения размером более 1 МБ — и это даже подталкивает. Что касается размеров? Что ж, это зависит от ширины вашего сайта, но я думаю, что где-то между 1200 и 2000 пикселей должно быть максимальное значение.

    Вам придется пройти один и тот же процесс, независимо от того, получены ли изображения со стокового сайта или с чьей-либо DSLR.Дело в том, что ни одно исходное изображение никогда не будет иметь «правильный» размер для вашего веб-сайта, а это означает, что в какой-то момент должно произойти изменение размера.

    Более того, адаптивные веб-сайты отображают изображения разных размеров в зависимости от устройства или браузера, в котором они просматриваются. Кроме того, есть разные варианты использования — например, полноразмерное изображение против эскиза или полноразмерное фото продукта против избранного изображения.

    Таким образом, есть еще изменения размера, которые необходимо выполнить даже после того, как вы преодолели трудности с их ручным изменением.

    Вот что не следует делать :

    • Изменяйте размер изображений по одному по своему усмотрению. Это долго и неэффективно.
    • Используйте изменение размера браузера для корректного отображения изображений, поскольку это может вызвать проблемы.

    Вместо этого вы можете интегрировать существующий сервер изображений (на веб-узле) или службу внешнего хранилища (например, S3) с ImageKit. Или вы можете использовать медиатеку ImageKit для хранения ваших файлов.

    Вот как просто загрузить новый файл в медиатеку ImageKit.(Источник: ImageKit) (Большой предварительный просмотр)

    Как видите, ImageKit принял загрузку этой фотографии Unsplash в исходных размерах и размерах. То же самое касается того, откуда исходят ваши файлы.

    Однако, как только вы интегрируете свои изображения или хранилище изображений с ImageKit, инструмент возьмет на себя управление размером вашего изображения. Вы можете увидеть, как это делается здесь:

    Конечные точки URL изображения ImageKit позволяют пользователям более легко управлять параметрами изменения размера изображения. (Источник: ImageKit) (Большой предварительный просмотр)

    Позвольте мне кратко объяснить, что вы видите выше:

    • Предпочтение источника изображения сообщает ImageKit, откуда изображения должны быть оптимизированы.В данном случае это медиа-библиотека ImageKit, и они будут обслуживаться на моем веб-сайте.
    • URL-адрес старого изображения — это напоминание о том, где наши изображения находились на сервере.
    • Новые URL-адреса изображений поясняют, где ваши изображения будут оптимизированы с помощью ImageKit.

    Формула достаточно проста. Вы берете исходный URL-адрес своего изображения и преобразуете его с помощью нового URL-адреса ImageKit.

    Только URL-адрес ImageKit мгновенно уменьшит размер ваших файлов изображений.Однако, если вы хотите немного изменить размер изображения, пока вы на нем, вы можете использовать для этого параметры преобразования.

    Например, это фотография Unsplash из медиатеки моего веб-сайта. Он живет на моих собственных серверах, поэтому адрес показывает мой собственный URL:

    Как может выглядеть полноразмерное изображение из Unsplash, если вы оставите его как есть на своем сервере. (Источник: Unsplash) (Большой предварительный просмотр)

    Чтобы увидеть, как это выглядит после преобразования ImageKit, я заменил свое доменное имя на конечную точку, предоставленную ImageKit.Затем я добавляю параметры изменения размера изображения (они также позволяют делать больше, чем просто изменение размера) и снова присоединяю оставшуюся часть URL-адреса, который указывает на мое хранилище изображений.

    Вот что происходит, когда я использую ImageKit для автоматического изменения размера моего изображения до 1000×560 пикселей:

    Конечные точки ImageKit позволяют пользователям определять, как должны изменяться их изображения, как в этом примере. (Источник: ImageKit) (Большой предварительный просмотр)

    Чтобы создать это изображение с измененным размером, я преобразовал URL-адрес ImageKit в следующий:

    https://imagekit.io/vq1l4ywcv/ tr:w-1000,h-560/…

    Параметры ширины (w-) и высоты (h-) уменьшили размеры файла.

    Теперь, как вы можете видеть, это не так идеально по пикселям, как исходное изображение, но это потому, что я применил к файлу довольно небольшое сжатие (80%). Ниже я расскажу, как это работает.

    А пока давайте сосредоточимся на том, насколько великолепно выглядит изображение, а также на приросте скорости, который мы собираемся получить.

    Вот что может произойти после того, как пользователи ImageKit изменят размер своих изображений.(Источник: Unsplash) (Большой предварительный просмотр)

    Раньше это был файл размером 3,6 МБ для изображения 5591×3145 пикселей. Теперь это файл размером 128 КБ для изображения размером 1000×560 пикселей.

    Чтобы еще больше подсластить сделку, ImageKit упрощает изменение размера изображений таким образом, используя преобразование изображений на основе URL. По сути, это работает так:

    • Вы сохраняете один эталонный образ в медиатеку ImageKit или на предпочитаемый вами сервер.
    • ImageKit автоматически использует несколько методов для значительного уменьшения размера изображения.
    • Затем вы можете использовать параметры изменения размера и обрезки ImageKit, чтобы изменить каждое изображение, чтобы оно соответствовало различным разрешениям и размерам устройств.

    Когда компания 91mobiles воспользовалась этой формой оптимизации изображения, она каждый месяц экономила 3,5 ТБ своего веб-сайта. И им ничего не нужно было делать, кроме как интегрироваться с платформой. Не было необходимости перемещать их изображения в ImageKit или другой сторонний сервис хранения. Все это происходило в их устаревшей инфраструктуре.

    2. Используйте форматы изображений с более быстрой загрузкой

    Не только размер ваших изображений истощает пространство для хранения и пропускную способность. Типы файлов, которые вы используете, также оказывают влияние.

    PNG , как правило, используются для таких вещей, как логотипы, изображения, содержащие текст и другие сверхчеткие изображения с прозрачным фоном. Хотя вы можете использовать их для сохранения своих фотографий, они, как правило, имеют самые большие размеры. Даже когда применяется сжатие без потерь, файлы PNG по-прежнему остаются больше по размеру, чем файлы других типов.

    GIF-файлы являются анимированным аналогом PNG и также используют сжатие без потерь.

    JPG , с другой стороны, лучше всего подходят для цветных изображений и фотографий. Они меньше по размеру и уменьшаются при сжатии с потерями. Можно сжать JPG до приемлемого размера, но нужно быть осторожным, так как сжатие с потерями ухудшает общее качество файла, и пути назад уже нет.

    WebP набирают популярность с тех пор, как Google представил их в начале 2010-х годов.Согласно исследованию Google, файлы WebP могут быть на 25-34% меньше, чем файлы JPG. Более того, вы можете использовать как сжатие с потерями, так и сжатие без потерь в WebP, чтобы уменьшить их размер.

    При работе с WebP следует помнить, что они не являются общепринятыми. На момент написания этой статьи WebP не принимались устройствами iOS. Однако последние версии всех других браузеров, Google или других, с удовольствием их отобразят.

    Что касается того, как ImageKit помогает в этом, на самом деле все просто:

    Этот параметр ImageKit возлагает на ImageKit ответственность за предоставление наилучшего формата файла.(Источник: ImageKit) (Большой предварительный просмотр)

    Если этот параметр настроен, ImageKit автоматически определяет лучший формат файла для доставки каждого из ваших файлов. устройство это поддерживает.

    Файлы JPG, PNG и GIF будут конвертированы в WebP, когда это возможно, например, если посетитель заходит из Chrome (который их принимает). Если это невозможно — скажем, если посетитель заходит из Safari (который их не принимает) — ImageKit конвертирует в лучшее (т.е. наименьший) формат с определенными преобразованиями. Это может быть PNG или JPG.

    Компания Nykaa смогла извлечь выгоду из этой стратегии оптимизации изображений от ImageKit. Несмотря на то, что их веб-сайт уже был разработан с использованием сочетания JPG и PNG и хранился в нескольких местах в Интернете, ImageKit позаботился об автоматизации форматов изображений прямо из исходных URL-адресов.

    3. Сжатие изображений

    Далее нам нужно поговорить о сжатии изображений. Я уже упоминал об этом пару раз, но он делится на два типа:

    Без потерь

    Эта форма сжатия используется в PNG и GIF.Для сжатия файла метаданные удаляются. Таким образом, целостность изображения остается неизменной, но размер файла не так значителен, как при сжатии с потерями.

    С потерями

    Эта форма сжатия применяется к файлам JPG и WebP. При сжатии файла некоторые части изображения «теряются», что может придать некоторым участкам более зернистый вид, чем исходное изображение. В большинстве случаев это едва заметно, если вы внимательно не посмотрите на два изображения рядом.Но вашим посетителям легко не заметить деградацию, поскольку нет оригинала, с которым можно было бы сравнить.

    При сжатии с потерями вы можете контролировать процент деградации файла. Безопасным диапазоном будет от 70% до 80%. ImageKit по умолчанию устанавливает оптимизацию на 80%, и, по его оценкам, вы можете сэкономить от 20% до 25% размера вашего файла только за счет этого. В действительности, однако, это, вероятно, больше (мы рассматриваем более 40%, как в примере с изображением Unsplash выше):

    Этот параметр ImageKit позволяет пользователям решать, какое сжатие с потерями они хотят применить к своим JPG.(Источник: ImageKit) (Большой предварительный просмотр)

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

    Независимо от того, используете ли вы параметры оптимизации по умолчанию или свои собственные, не забудьте включить дополнительные параметры сжатия, доступные на вкладке «Дополнительно».

    ImageKit предоставляет расширенные настройки оптимизации изображений для файлов JPG и PNG. (Источник: ImageKit) (Большой предварительный просмотр)

    Эти три параметра, в частности, позволят вам максимально безопасно сжимать файлы.

    Первая настройка, например, «Сохранить копию», сохраняет исходные изображения на сервере ImageKit. Таким образом, у вас есть копия предварительного сжатия изображения, и вам не нужно управлять его бременем на своем собственном сервере.

    Второй параметр «Сохранить метаданные изображения» позволяет применять сжатие без потерь, когда это возможно.

    И последняя настройка «Режим сжатия изображений PNG» позволяет вам решить, какой уровень оптимизации без потерь вы хотите использовать для своих PNG: максимальный, минимальный или нулевой.

    Когда вы закончите, вы получите такие результаты, как это параллельное сравнение:

    Это параллельное сравнение изображения Unsplash от Luke Jeremiah показывает сжатый файл и исходный JPG. (Источник: Unsplash) (Большой превью)

    Это JPG из Unsplash. Можете ли вы сказать, что является оригиналом, а что сжатой и измененной версией из ImageKit?

    Левая с черной окантовкой:

    • 1500×1005 px
    • 266 КБ
    • Сжато на 95%

    Правая с белой окантовкой:

    89 3

    83

    83 пкс

  • 2.5 МБ
  • Оригинал
  • Вам решать, какие параметры сжатия и оптимизации ImageKit вам удобнее использовать, а затем настраивать их соответствующим образом.

    4. Сохранение и получение изображений с внешнего сервера

    Существует два способа запуска изображений с помощью ImageKit.

    Во-первых, загружая изображения непосредственно в свою медиатеку:

    ImageKit позволяет пользователям хранить свои изображения в своей медиабиблиотеке, а не на своих собственных серверах.(Источник: ImageKit) (Большой предварительный просмотр)

    Второй — путем интеграции с вашим веб-сайтом или внешней службой хранения. На самом деле мы уже видели эту часть ImageKit. Здесь вы получаете конечные точки URL, чтобы определять параметры изображения:

    ImageKit интегрируется с системами управления контентом, сторонними хранилищами и Cloudinary. (Источник: ImageKit) (Большой предварительный просмотр)

    Даже со всеми вышеперечисленными оптимизациями у вас могут возникнуть проблемы с хранением и обслуживанием образов — либо из-за того, как они влияют на вашу скорость, либо из-за того, сколько памяти вам нужно для их хранения.

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

    Когда вы создаете огромные магазины электронной коммерции или бизнес-сайты с тысячами или даже миллионами изображений и изображений соответствующих размеров, вы не можете позволить себе размещать эти изображения самостоятельно. Конечно, есть способ быстрее обслуживать их для посетителей (о чем я объясню в следующем пункте), но зачем брать на себя бремя и затраты на дополнительное хранилище, если вам это не нужно?

    5.Добавить CDN

    CDN — еще один важный инструмент оптимизации для больших хранилищ изображений. Думайте об этом как о втором сервере, только этот кэширует (копирует) ваш сайт и обслуживает их через центры обработки данных, расположенные значительно ближе к вашим посетителям по всему миру.

    В результате время, необходимое для отправки вашего веб-сайта и его тысяч изображений продуктов из Нью-Йорка, Нью-Йорка в Бангладеш, Индия, происходит безумно быстро.

    Используя ImageKit, вы получаете возможность предоставлять свои изображения не только через его основные серверы обработки, но и через CDN AWS ​​CloudFront (входит во все планы), который имеет более 150 местоположений по всему миру.

    Sintra, клиент ImageKit, заметила значительный скачок в производительности после перехода на ImageKit. С CDN изображений ImageKit (у которого есть узлы доставки по всему миру) время загрузки страниц сократилось на 18%.

    Подведение итогов

    Что особенно приятно в ImageKit, так это то, что это не просто превентивная мера против замедлений, вызванных изображениями. Вы можете использовать его для исправления и улучшения мобильных веб-сайтов и PWA, даже если на них уже есть миллионы изображений. Более того, центр производительности позволяет легко следить за изображениями вашего веб-сайта и выявлять возможности для повышения скорости.

    Кроме того, как вы можете видеть из приведенных выше советов, ImageKit упростил большую часть работы, которую вам в противном случае пришлось бы выполнять, независимо от того, выполняете ли вы ее вручную или настраиваете с помощью плагина.

    Поскольку потребители и Google с каждым днем ​​становятся все более разборчивыми в отношении скорости загрузки веб-сайтов на мобильных устройствах, вам нужна именно такая стратегия оптимизации изображений. Это облегчит вашу нагрузку, гарантируя, что любые изображения, добавленные до или после ImageKit, будут максимально оптимизированы. Более того, ваши клиенты получат больше лидов и больше конверсий.

    (yk)

    2. Подготовка изображений для публикации в Интернете

    2. Подготовка изображений для публикации в Интернете

    2. Подготовка изображений для Интернета

    Одно из наиболее распространенных применений GIMP, заключается в подготовке изображений для веб-сайтов. Это значит, что изображения должны выглядеть как можно лучше при сохранении файла размер как можно меньше. Это пошаговое руководство демонстрирует как создавать небольшие файлы с минимальной потерей Качество изображения.

    2.1. Изображения с оптимальным соотношением размера и качества

    Оптимальное изображение для Интернета зависит от типа изображения и файла. формат. Используйте JPEG для Фотографии, потому что они обычно имеют много цветов и большую детализацию. Изображение с меньшим количеством цветов, например кнопка, значок или снимок экрана, лучше подходит для PNG формат.

    1. Сначала откройте изображение как обычно.Я открыл наш Уилбер как пример изображения.

      Рисунок 6.7. Изображение Уилбера, открытое в режиме RGBA


    2. Теперь изображение находится в режиме RGB с дополнительным Альфа-канал (РГБА). Обычно нет необходимости иметь альфа-канал для вашего веб-изображение.Вы можете удалить альфа-канал, сглаживание изображения.

      Фотография редко имеет альфа-канал, поэтому изображение откроется в режиме RGB, а не в режиме RGBA; и не надо будет удалять альфа-канал.

      Примечание

      Если изображение имеет плавный переход в прозрачные области, не следует удалять альфа-канал, так как информация используемые для перехода, не сохраняются в файле.Чтобы экспортировать изображение с прозрачными областями, не имеющими мягкий переход, (похожий на гиф), удалить альфа-канал.

    3. После того, как вы сгладили изображение, экспортировать изображение в формате PNG для вашего веб-сайта.

    Примечание

    Вы можете экспортировать изображение в формате PNG с настройками по умолчанию.Всегда используйте максимальное сжатие при создании образа. Максимальное сжатие не влияет на качество изображения или время требуется для отображения изображения, но экспорт занимает больше времени. Однако изображение в формате JPEG теряет качество при увеличении сжатия. Если ваше изображение представляет собой фотографию с большим количеством цветов, вам следует используйте jpeg. Главное найти лучший компромисс между качеством и сжатием. Вы можете найти больше информацию по этой теме в Разделе 1.2.2, «Экспорт изображения в формате JPEG».

    Как оптимизировать изображения и фотографии для Интернета (без потери качества)

    Сколько внимания вы уделяете оптимизации изображения вашего магазина?

    Часто бренды слишком много думают над логотипом — тратят дни, недели или даже месяцы, прежде чем запустят отличную идею, просто пытаясь выяснить, какой символ подходит для бренда, который они еще даже не начали.

    А потом, когда дело доходит до фактического запуска, слишком много предпринимателей тратят слишком мало времени, сосредотачиваясь на отличных фотографиях продуктов и изображениях брендов.

    И все же образы продолжают оставаться катализатором нашей эпохи — средством коммуникации, с помощью которого люди понимают ценность или пренебрежение и переходят к следующему.

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

    И вы везде используете свои фотографии:

    • На страницах ваших товаров.
    • На страницах ваших категорий.
    • На главной странице.
    • В вашей брошенной корзине сообщений.
    • В вашем блоге.
    • В ваших социальных аккаунтах.
    • Для вашей рекламы в Facebook.
    • Для вашего потока Google Покупок.

    На самом деле единственное, для чего вы не используете изображения, — это Google AdWords. А Google AdWords часто является самой дорогой платной платой за клик, которая у вас будет.

    Что такое ускоренное обновление Google?

    Несмотря на то, что AdWords не содержит изображений, Google вкладывает значительные средства в изображения вашего бренда и продуктов.

    В январе 2018 года компания объявила, что алгоритмы мобильного поиска начнут учитывать скорость загрузки страниц с июля 2018 года.

    Это обновление называется Speed ​​Update.

    И есть 2 вещи, которые замедляют скорость загрузки страницы:

    1. Слишком много javascript часто вызвано слишком большим количеством приложений и недостаточным количеством встроенных на ваш сайт.
    2. Слишком большие изображения, которые не оптимизированы для размера экрана.

    Меньше приложений. Больше продаж.Только на BigCommerce

    «Недавно мы перешли с Shopify Plus на BigCommerce. Я не могу объяснить, как я зол на то, что в течение нескольких месяцев мы платили Shopify многие тысячи долларов за функциональность, которая входит в стандартную комплектацию BigCommerce!

    Как только мы решили, что собираемся отключить Shopify, мы буквально потратили три дня на BigCommerce, установив шаблон, настроив его, а затем завершив полный импорт продукта.

    Отзывы, которые я получил от людей, с которыми я уже поделился сайтом: «Он загружается намного быстрее! Мобильный опыт стал намного лучше!»

    – Ричард Эйб, Монро и Кент

    Проверьте свои данные в BigCommerce

    Такие платформы, как BigCommerce, решают эту проблему за счет:

    1. Расширение функциональности платформы. В среднем магазины BigCommerce используют от 2 до 5 приложений. На других платформах SaaS средний показатель составляет +15.
    2. Автоматическая оптимизация всех изображений для скорости загрузки страниц на любом устройстве. BigCommerce сотрудничает с Akamai, лидером в области оптимизации изображений в Интернете, чтобы автоматически оптимизировать все изображения для всех клиентов — без дополнительных усилий или затрат с их стороны.

    Меньше технического долга. Больше продаж

    «Решение о переходе на сеть Akamai Image Manager стало стимулом для наших продавцов, позволив им сократить время загрузки сайта и повысить общую производительность мобильного сайта.

    Более того, продавцам не нужно было тратить время и силы на дальнейшую разработку оптимизированных изображений для различных устройств, что привело к увеличению вовлеченности и конверсии сайта, особенно для мобильных покупателей».

    — Фрэнк Морралл, президент VisionCourse Media, агентства онлайн-маркетинга и дизайна, партнер BigCommerce.

    Вся правда об оптимизации изображений, скорости и прибыли

    Да, изображения — это один из, если не самый важный актив вашего интернет-магазина.

    И тем не менее, слишком часто ими пренебрегают – владельцы магазинов совершенно забывают оптимизировать изображения для Интернета.

    Почему?

    • Потому что оптимизация изображений для Интернета — это всего лишь еще один шаг в бесконечном списке дел.
    • Часто считается низкоприоритетным и поэтому забывается.

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

    Но с чего начать?

    Мы вас прикроем.

    В этом руководстве мы рассмотрим наиболее важные для вас понятия, связанные с вашими изображениями, и покажем, как вы можете начать применять советы по увеличению конверсии — прямо сейчас.

    Почему изображения так важны

    Прежде чем мы начнем, важно понять, почему изображения могут иметь такое большое влияние на ваш магазин. Вот вид на высоком уровне.

    1. Учитываются первые впечатления.

    Изображения — это первое, что видят ваши клиенты, просматривая страницу продукта, и эти первые несколько секунд могут иметь решающее значение для определения того, является ли продукт тем, что они ищут.

    На самом деле, в исследовании, проведенном в 2017 году по заказу BigCommerce и Square, американские онлайн-покупатели назвали дополнительные фотографии продуктов главным требованием, которого они хотят больше от онлайн-брендов.

    Комплексное исследование покупательских привычек современных потребителей

    Поскольку электронная торговля растет на 23% в годовом исчислении, используйте это исследование, чтобы узнать, как сделать онлайн-продажи и личные продажи более удобными (и заработать больше долларов США!)

    Получить данные сейчас

    2.Картинка стоит 1000 слов.

    Изображения помогают покупателю удостовериться в качестве и деталях продукта лучше, чем любое описание.

    Вместо того, чтобы чувствовать продукт, как в розничном магазине, отличная фотография продукта позволяет пользователю изучить различные детали продукта вблизи.

    Действительно, в том же исследовании, проведенном BigCommerce и Square, почти половина респондентов (49%) назвали невозможность потрогать, пощупать или попробовать товар одним из наименее любимых аспектов онлайн-покупок.

    Это был второй наиболее ненавистный аспект онлайн-покупок в исследовании.

    3. Мобильный телефон берет верх.

    По мере того, как мобильные покупки становятся все более распространенными, изображения будут становиться все более важными, о чем свидетельствует действие Google Speed ​​Update.

    Пользователи все чаще используют изображения вместо текста, чтобы судить о пригодности продукта и даже для навигации.

    Как вы думаете, покупатель сначала прочитает каждое описание или посмотрит фото?

    Наличие более четких и привлекательных изображений продуктов электронной коммерции означает, что ваши продукты будут просматриваться, кликать по ним и покупаться чаще.

    4. Изображения действительно могут навредить вашему сайту.

    Использование непрофессиональных или плохо оптимизированных изображений для Интернета может серьезно повлиять на ваши впечатления от покупок и даже на ваш рейтинг в поисковых системах.

    • Ваши изображения загружаются медленно?
    • Вы не добавили метаописание?
    • Люди подпрыгивают, как только приземляются?

    С таким поведением вы никогда не попадете на первую страницу.

    Имея это в виду, давайте рассмотрим, как вы можете убедиться, что у вас есть оптимизированные фотографии профессионального качества в вашем интернет-магазине.

    Оптимизация изображений и фотографий: краткое руководство

    Первый шаг к оптимизации фотографии продукта (или любого изображения на вашем сайте) — начать с отличных фотографий. И, если вам нужна помощь в поиске профессиональных изображений для использования на вашем веб-сайте, ознакомьтесь с этим исчерпывающим ресурсом: 35+ сайтов для получения бесплатных стоковых изображений для коммерческого использования.

    Но после этого многие процессы оптимизации остаются за кадром.

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

    В конце концов, они не могут видеть, что вы делаете, но вы получите более высокий рейтинг в поиске, что означает:

    Объедините это с мощью и настраиваемостью SEO-оптимизации вашего сайта (т. е. полным контролем URL-адресов по всем направлениям), и вы выиграете в Google.

    Давайте посмотрим, как это сделать независимо от того, на какой платформе вы работаете.

    Автоматическая оптимизация изображений и полный контроль SEO

    Интернет-магазины, использующие BigCommerce, получают автоматическую оптимизацию изображений Akamai для всех изображений, загруженных на их витрину.

    • Без дополнительных затрат.
    • Не теряйте время зря.

    Кроме того, BigCommerce — единственная платформа SaaS, которая позволяет полностью настраивать все URL-адреса и метаданные сайта. Непатентованный язык кодирования платформы также получает бонусные баллы от Google.

    Переместите данные прямо сейчас и убедитесь сами в 15-дневной бесплатной пробной версии.

    Испытайте управляемую вами платформу.

    1. Начните с хороших фотографий.

    Хорошая фотография для электронной коммерции начинается с правильного снимка.

    Для вашей фотосъемки не обязательно использовать дорогую камеру или оборудование. На самом деле, вы можете создать свою собственную установку для фотосъемки своими руками, которая будет выполнять эту работу.

    Но есть несколько советов, которым вы можете следовать, чтобы начать с наилучших фотографий.

    Убедитесь, что у вас правильные настройки.

    Установка для фотосъемки электронной коммерции не обязательно должна быть дорогой, но если вы только начинаете, есть несколько вещей, на которые стоит инвестировать, чтобы делать качественные фотографии:

    1. Бытовая цифровая зеркальная камера или смартфон. В большинстве современных смартфонов есть камера, которой более чем достаточно для съемки стандартных фотографий товаров. Использование смартфона также дает вам доступ к сотням приложений для фотосъемки.
    2. Источник света. Наличие источника света помогает обеспечить равномерное освещение вашего изображения и будет иметь огромное значение для качества ваших фотографий. Если вы только начинаете, вам может быть проще работать с естественным источником света. В этом случае использование заполняющего света поможет вам избавиться от теней на изображении.
    3. Белый размах. Развертка поможет равномерно распределить свет по всему изображению и значительно облегчит редактирование фотографий в дальнейшем. Это может быть что угодно, от белого листа до рулонов бумаги.
    4. Устойчивая поверхность. Если вы делаете несколько фотографий, наличие устойчивой поверхности позволяет легко размещать изображения последовательно.
    5. Штатив для фотоаппарата. Аналогичным образом, наличие штатива для фотоаппарата гарантирует, что вы всегда сможете получать фотографии с неизменного положения.Это также упрощает перенастройку ваших продуктов без необходимости одновременно манипулировать камерой.

    2. Продемонстрируйте свою продукцию под разными углами.

    Посмотрите на любой успешный интернет-магазин, и вы редко встретите в нем всего одну фотографию для любого изображения.

    Фотография продукта может использоваться для демонстрации лучших аспектов продукта, поэтому важно включать в него различные снимки.

    Например, в интернет-магазине одежды Olive Ave они используют различные кадры для демонстрации своего продукта.

    Можно и без моделей. Посмотрите на этот пример из KAOS.

    Различные фотографии могут помочь продемонстрировать различные аспекты.

    • Общие планы, показывающие продукт на модели, могут помочь пользователю визуализировать, как продукт будет выглядеть в реальной ситуации.
    • Средние снимки помогают им определить общий вид самого продукта.
    • Крупные планы иллюстрируют мельчайшие детали и качество продукта, которые действительно могут продавать свою ценность.

    3. Используйте белый фон для своих продуктов.

    Замена фона фотографий на белый фон гарантирует, что у вас всегда будут великолепно выглядящие изображения, независимо от их порядка на вашем сайте или того, как вы их используете в Интернете.

    Белый фон является стандартным почти для каждого интернет-магазина, и на это есть несколько веских причин:

    1. Ваши товары будут выделяться на белом фоне
    2. Ваши изображения будут выглядеть одинаково на страницах коллекции
    3. Это сэкономит вам деньги и время при редактировании
    4. Вы можете легко повторно использовать или заменить фон на любой из ваших фотографий
    5. Торговые площадки, такие как Google Shopping и Amazon, теперь требуют белого фона

    Использование изображений на белом фоне упрощает сравнение товаров.Источник: jenis.

    Вы можете использовать программное обеспечение, такое как Photoshop или Pixlr, чтобы вручную заменить фон фотографий вашего продукта на белый фон, или позволить службам, таким как Pixc, сделать всю работу за вас.

    4. Сохраняйте изображения с правильными размерами.

    Обратите внимание на размер вашего изображения, если вы не на BigCommerce.

    • Если размер слишком большой, у вас возникнут проблемы со временем загрузки страницы.
    • Если изображение слишком маленькое, оно будет выглядеть зернистым (т.е. низкое качество).

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

    Ваш iPhone будет иметь что-то вроде 12-мегапиксельной камеры, что означает, что фотографии, которые он делает, состоят из двенадцати миллионов пикселей. Фотографии, сделанные 12-мегапиксельной камерой, будут иметь разрешение 3000 x 4000 пикселей.

    Для фотографии электронной коммерции этот размер не нужен. Например, в BigCommerce оптимальный размер фотографий вашего продукта — 1028 на 1028 пикселей, в то время как другие ваши фотографии должны быть меньше 1000 пикселей с обеих сторон.

    Квадратность изображений гарантирует, что они будут отображаться правильно и хорошо выглядеть независимо от того, длиннее или выше содержимое фотографии.

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

    И, если у вас включен масштаб продукта, вы можете отобразить изображение с гораздо более высоким разрешением.

    Изображения можно масштабировать до различных размеров.Источник: Магазин кафе Марты Стюарт

    .

    Если у вас нет доступа к программному обеспечению для изменения размера изображений, например Photoshop, не беспокойтесь.

    Сервисы

    , такие как Pixlr, Canva и Image Resizer, могут помочь вам с базовыми потребностями редактирования и изменения размера.

    Более быстрые кассы. Меньше развития.

    Опять же, если вы используете BigCommerce, платформа использует Akamai за кулисами для оптимизации и изменения размера всех изображений в зависимости от устройства, с которого заходит ваш покупатель. Это означает более высокую скорость загрузки страницы и меньше работы для вас.

    5. Увеличьте скорость загрузки страницы, используя правильный формат изображения.

    Легко просто выбрать параметр сохранения по умолчанию при создании изображений, но знание разницы между форматами файлов и настройками может оказать огромное влияние на ваш сайт.

    Ваш магазин BigCommerce поддерживает три разных формата изображений: JPG/JPEG, GIF или PNG. Каждый из них имеет различные преимущества и недостатки.

    • Файлы GIF имеют более низкое качество, но также и размер файла. Если вам нужно создать изображение специально для маленьких значков или эскизов, вы, вероятно, захотите использовать GIF. Кроме того, это единственный доступный формат, поддерживающий анимацию (хотя следите за APNG). Однако по мере увеличения размера изображения GIFS становятся менее эффективными при обработке цветов.
    • Файлы PNG поддерживают более широкий диапазон цветов, а также единственный формат, поддерживающий прозрачный фон. Однако все это достигается за счет увеличения размера файла. Если вам нужно отредактировать фотографию несколько раз, вы можете экспортировать ее в виде файла PNG.
    • Изображения в формате JPEG являются наиболее распространенным форматом, используемым цифровыми камерами и в Интернете. Они поддерживают широкий диапазон цветов, но настройки сжатия JPEG позволяют найти баланс между качеством изображения и размером файла.

    JPEGS предлагает хороший баланс между размером файла и качеством, в то время как GIFS предлагает плохой размер файла для более сложных изображений. Источник изображения: Брук Ларк

    6. Поэкспериментируйте с настройками качества.

    В большинстве случаев JPEG будет предпочтительным типом файла для ваших изображений.Он предлагает высокое качество изображения при разумных размерах файлов.

    Одним из больших преимуществ формата файла jpeg является возможность выбора желаемого уровня сжатия. Настройка параметров сжатия позволяет уменьшить размер файла за счет снижения качества изображения.

    Посмотрите на этот пример, где одна и та же фотография была сохранена с разными уровнями сжатия:

    Результат использования высокой, средней и низкой степени сжатия JPEG.Источник изображения: Алекс Джонс

    Когда не использовать JPEG.

    Хотя JPEG является наиболее популярным форматом веб-изображений, в некоторых случаях лучше использовать файл с более высоким разрешением, например PNG. Например:

    • Если ваше изображение состоит в основном из линий, значков или резких изображений: сжатие JPEG может размыть границу между изображением и фоном и сделать контраст менее заметным.
    • Когда изображение подвергается многократному редактированию: Сжатие каждый раз немного меняет изображение и после нескольких правок может заметно исказить изображение.

    Нет на BigCommerce? Сжимайте изображения с помощью этого бесплатного инструмента.

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

    Если вы находитесь на BigCommerce, еще раз, вам не нужно беспокоиться об этом разделе. Идите дальше и читайте следующий раздел.

    Для всех остальных… начнем здесь:

    Если вы не знакомы с единицей данных Byte, каждый байт равен 1024 предыдущего.

    Итак, чтобы уточнить:

    1024 байта (b) = 1 килобайт (kb). 1024 килобайта = 1 мегабайт (мб). 1024 мб = 1 гигабайт (Гб)

    Вам не нужно помнить об этом, но просто учтите, что обычно вы стремитесь к фотографиям размером менее 100 КБ, чтобы сократить время, необходимое для отображения всего на вашей странице.

    Типичный размер файла фотографии на iPhone 7 составляет около 3 МБ, что соответствует 3072 КБ, или более чем в 30 раз больше оптимального размера изображения!

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

    Большинство инструментов для редактирования изображений позволяют регулировать уровень сжатия файлов JPEG.

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

    TinyJPG — одна из таких бесплатных служб — бесплатный оптимизатор изображений, который принимает изображения как в формате JPG, так и в формате PNG.

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

    TinyJPG показывает исходное изображение в сравнении с оптимизированным изображением.

    Даже если вы уже сжимаете изображения при сохранении, вы будете удивлены, какое влияние может оказать их обработка с помощью такого сервиса, как TinyJPG.

    Поисковая оптимизация изображений 101

    Изображения — это фантастический источник органического контента, который может повысить ваш рейтинг в Google.

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

    1. Используйте информативные имена файлов.

    Названия изображений — это первая часть информации, которую вы можете предоставить Google, чтобы сообщить им, о чем ваше изображение.

    Имя файла по умолчанию, которое исходит от вашей камеры и выглядит как строка цифр, ничего не говорит о том, о чем на самом деле фотография.

    При именовании изображений описывайте содержание фотографии и используйте тире вместо пробелов. BigCommerce не допускает пробелов в именах файлов изображений.

    Переименование файла для оптимизации ключевых слов, включая рисование линий и счастливую женщину.

    2. Включите соответствующий замещающий текст.

    Альтернативный текст задуман как функция доступности, и именно так к нему следует подходить.

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

    Но Google также использует замещающий текст, чтобы лучше понять, что содержит изображение.

    Это делает ценным место для включения релевантного поискового запроса, который будут искать люди, ищущие ваш продукт.

    Сопоставление моего оптимизированного имени файла изображения с моими метаданными, заголовком страницы и структурой URL-адреса на моей серверной части страницы продукта.

    3. Обеспечьте контекст вашего изображения.

    Содержимое, окружающее изображение, также важно.

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

    Это может быть особенно полезно на страницах товаров, где вы можете использовать уникальные описания, чтобы лучше описать товар на фотографии.

    Здесь я обновил описание своего продукта, включив в него все ключевые слова: художественная печать на заказ, линейный рисунок, счастливая женщина. Я также включил дополнительный контент и детали в целях брендинга.

    4. Используйте изображения для улучшения опыта.

    Вы также можете сделать все возможное и создать отличный пользовательский опыт, выполнив следующие действия со своими изображениями:

    • Используйте качественные фотографии без размытия. При наличии смартфонов и бесплатного программного обеспечения для редактирования действительно нет оправдания тому, что у вас нет фотографий хорошего качества. Это повышает удобство работы, и люди с большей вероятностью будут ссылаться на страницы с более качественными фотографиями.
    • Разместите их выше на странице. Люди не всегда прокручивают страницу вниз, поэтому убедитесь, что ваши изображения находятся выше на странице, где читатели смогут их увидеть.
    • Укажите ширину и высоту каждого изображения. Если браузеру известно, насколько большим будет изображение, он может загрузить остальную часть содержимого на месте, ожидая завершения загрузки изображения. Это может сократить время, необходимое для загрузки вашей страницы, и улучшить взаимодействие с пользователем.

    Предоставление дополнительной SEO-информации и оптимизация изображений для обеспечения наилучшего просмотра поможет увеличить объем органического трафика на ваш сайт и увеличить количество времени, которое покупатели проводят на нем.

    Секретный трюк: используйте открытый график, чтобы показать правильное изображение в социальных сетях

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

    Источник: Келти

    Используя то, что называется протоколом Open Graph, вы можете убедиться, что отображается ваше лучшее изображение продукта, а не общий логотип или несвязанное изображение.

    Здесь вы можете сделать это в бэкэнде BigCommerce для каждого отдельного продукта.

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

    Возможно, вы обнаружите, что для некоторых страниц BigCommerce, таких как ваша домашняя страница, вам может потребоваться создать отдельный файл HTMLHead, в котором вы можете указать, какое изображение будет использоваться.

    Контрольный список оптимизации изображения продукта

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

    Помните, что ваши клиенты не могут взять и почувствовать продукт.Они полагаются исключительно на ваши описания и визуальные эффекты, которые вы им даете — в виде изображений продуктов электронной коммерции.

    Итак, вы применяете эти передовые методы, когда дело доходит до изображений ваших продуктов?

    Вот контрольный список, чтобы убедиться, что вы — 100% времени.

    1. Настройтесь на успех.

    • Прежде всего, установите камеру на штатив (или на любую твердую и устойчивую поверхность) во избежание сотрясения камеры.
    • Затем убедитесь, что вы снимаете при достаточном освещении , чтобы осветить как ваш продукт, так и все пространство для фотосессии.Вы можете сделать это, используя несколько источников света (подойдут вспышки, стробоскопы и даже обычные настольные лампы), но проще всего использовать естественное освещение.
    • Используйте солнце в качестве непрямого источника света. Сфотографируйтесь возле окна, и если оно слишком яркое, рассейте свет белыми одеялами, простынями или бумагой. Освещение вашего продукта на этапе съемки позволит получить более качественную фотографию, а также сэкономит вам много времени на редактирование.
    • Рассмотрите вариант съемки на белом фоне. Настройка занимает немного больше времени, но потом проще удалить фон, если вы решите это сделать, и это поможет при калибровке баланса белого вашей камеры. Кроме того, белый цвет отражает свет, тогда как более темные цвета его поглощают, так что ваш продукт естественным образом получится ярким и контрастным.

    2. Сделайте несколько снимков.

    Всем нравится удобство онлайн-покупок, но давайте будем честными, ничто не сравнится с возможностью физически прикоснуться к товару.

    Когда дело доходит до онлайн-покупок, трудности с визуализацией того, как продукт будет выглядеть в реальной жизни, являются одной из основных причин сопротивления покупке. Чтобы помочь покупателю визуализировать продукт, сделайте фотографии с разных ракурсов.

    • Начните с «изображения героя». Это первое из серии изображений вашего продукта. Лучший вариант для основного изображения — либо фронтальный снимок, либо снимок под углом 45 градусов, в зависимости от продукта. В некоторых случаях, например, в обуви, более уместным может быть снимок сбоку.Фотография должна быть простой и содержать только тот товар, который вы продаете, чтобы не запутать зрителя.
    • В продолжение основного изображения включите фотографии сверху, снизу, сбоку, сзади и т. д.

    3. Делайте снимки в контексте.

    Затем продайте свой продукт с помощью нескольких фотографий продукта в контексте.

    Покажите фотографии вашего продукта в действии. Например. дополните пару брюк красивой обувью, тарелку вкусным салатом или вазой с красивыми цветами.

    Зритель должен хотеть видеть все на фотографии (включая ваш продукт подмигнуть подмигнуть подтолкнуть подтолкнуть).

    Однако вам следует воздержаться от использования этого изображения в качестве основного изображения, потому что в конечном итоге вы хотите продемонстрировать (и продать) свой продукт, а не свои навыки фотографа.

    4. Подчистите готовые фотографии.

    Есть также несколько рекомендаций, о которых следует помнить после того, как вы положили камеру.

    Хорошей идеей является удаление фона и пусть ваши продукты говорят сами за себя.

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

    5. Подберите правильный размер.

    Когда дело доходит до загрузки фотографий продуктов электронной коммерции в ваш магазин, размер и качество изображения имеют значение!

    При настройке интернет-магазина вы выбираете размеры изображения продукта для своего шаблона.

    Для наилучшего размера изображения продукта я рекомендую использовать шаблон, который превышает средние 500 и 700 пикселей.Это мало для изображения.

    Не совершайте ошибку, вручную изменяя размер изображений до нужного размера перед их загрузкой в ​​BigCommerce.

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

    Я всегда рекомендую 1200 пикселей на самой длинной стороне изображения, чтобы быть в безопасности, что также дает вам изображение приличного размера, если вы решите использовать функцию масштабирования продукта.

    При этом не существует технологии, которая может увеличивать изображения, сохраняя при этом их четкость, поэтому при настройке шаблона убедитесь, что функция масштабирования продукта не превышает размеры загружаемого файла.

    Вот настройки вашего магазина Bigcommerce. Akamai автоматически изменит размер для устройства, которое использует ваш клиент, чтобы ваша страница загружалась как можно быстрее, повышая ваш рейтинг в мобильном поиске.

    • Создайте холст нужного размера в Photoshop и перетащите фотографии на новый холст, изменяя их размер в пределах нового холста, а не исходных файлов.
    • Если у вас нет Photoshop или вы хотите что-то более простое в использовании, используйте Canva. Просто создайте дизайн с использованием нестандартных размеров, загрузите свои изображения и измените их размер. Это слишком просто!

    6. Будьте последовательны.

    Наконец, вы хотите, чтобы ваши изображения выглядели последовательно.

    В вашем шаблоне BigCommerce они будут одинакового размера, а белый фон сделает все красиво и аккуратно.

    Но если вы хотите, чтобы изображения товаров выглядели чуть более профессионально, отрегулируйте фотографии товаров так, чтобы они занимали 80-90% холста.

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

    Итак, вот оно. Чек-лист по фотографии продукта и оптимизации изображения, чтобы ваш сайт загружался быстро, изображения выглядели великолепно, а вы получали больше продаж за меньшую работу.

    Часто задаваемые вопросы по оптимизации изображений

    Улучшение изображений ваших магазинов электронной коммерции — один из наиболее эффективных способов улучшить качество покупок для ваших клиентов.

    Более качественные изображения могут помочь покупателям быть уверенными в продуктах, которые они покупают, повысить ваш рейтинг в поисковых системах и сократить время загрузки вашего сайта.

    Благодаря советам, которые вы получили в этом руководстве, у вас есть все необходимое, чтобы начать оптимизировать изображения продуктов электронной коммерции, чтобы привлечь больше трафика и увеличить продажи.

    В заключение давайте ответим на несколько кратких часто задаваемых вопросов по оптимизации изображений.

    Что такое сжатие изображений?

    Когда вы впервые загружаете изображение, размер в пикселях и файле часто намного больше, чем необходимо для вашего сайта.

    Сжатие изображения сжимает размер изображения (уменьшает его) без ущерба для качества в зависимости от устройства, с которого человек просматривает изображение.

    Например, размер файла, необходимый для высококачественной печати фотографии, очень велик. Для этого вам нужно изображение с высоким разрешением (hi-res), то есть изображение 4608 x 3456 даст отпечаток 15 x 11. Потребности в веб-изображениях ниже.

    Что такое сжатие без потерь?

    Сжатие без потерь описывает сжатие файла изображения, при котором все исходные данные могут быть восстановлены, когда файл не сжат.

    При сжатии без потерь каждый бит данных, который изначально был в файле, остается после распаковки файла.

    Нужно ли вашему магазину беспокоиться об этом? Это зависит.

    Лучше всего сохранять все исходные файлы в облаке вместе с резервной копией. Другими словами, используйте Google Диск, Dropbox или Box, чтобы сохранить исходные большие файлы.

    Что такое сжатие с потерями?

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

    Это означает, что исходный файл не может быть восстановлен.

    Для вашего интернет-магазина, если вы используете этот метод, вам нужно будет использовать файл облачного хранилища с резервной копией для сохранения исходных файлов.

    Этот тип сжатия не сохранит исходные файлы, но увеличит скорость загрузки страницы. Качество изображения, скорее всего, не будет замечено в зависимости от устройства.

    В чем разница между сжатием с потерями и без потерь?

    Разница между сжатием с потерями и без потерь заключается в способе сжатия изображения.

    При сжатии с потерями невозможно восстановить исходный файл.

    При сжатии без потерь можно восстановить исходный файл.

    В любом случае исходные файлы следует хранить в облачной службе с резервной копией на жестком диске.

    Заметят ли пользователи оптимизацию фотографий товаров?

    Нет. Изображения оптимизированы для размера устройства без ущерба для визуального качества изображения.

    Пользователи не увидят заметной разницы, кроме более высокой скорости загрузки страниц.

    Какие еще средства оптимизации изображений вы рекомендуете?

    Должны ли изображения быть адаптивными?

    Да, изображения на вашем сайте должны быть адаптивными. Это означает, что они сжимаются и оптимизируются в зависимости от устройства, которое использует браузер.

    В

    магазинах BigCommerce это делается автоматически бесплатно. Если вы используете другие платформы электронной коммерции, уточните у них предлагаемые решения и стоимость.

    Как не дизайнеры могут создавать качественные изображения для веб-сайта?

    Мы настоятельно рекомендуем нанимать профессиональных фотографов для всех изображений продуктов и использовать опытных графических дизайнеров, чтобы гарантировать, что у вас есть изображения самого высокого качества на вашем веб-сайте.Однако такие инструменты, как Canva, Piktochart, Aviary и LogoGarden, могут помочь вам создавать высококачественные изображения, не имея большого опыта в дизайне.

    .

    Станьте первым комментатором

    Добавить комментарий

    Ваш адрес email не будет опубликован.

    2019 © Все права защищены. Интернет-Магазин Санкт-Петербург (СПБ)