Как уменьшить в фотошопе вес картинки: Photoshop: размер и разрешение изображения

Уменьшаем вес фотографии без потери качества

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

Для этого нам понадобиться программа Photoshop и немного времени. Начнем. Открываем вашу фотографию с помощью фотошопа, и начинаем работу над ним. Я выбрал вот это фото и до обработки оно весило почти 4 мегабайта, размерность 4000 на 3000 пикселей, а разрешение 480 пикс/дюйм . Представляете если у го медленный интернет, он вообще его не посмотрит, терпения не хватит ждать, пока оно загрузиться.

Теперь нажимаем Alt+Ctrl+I, либо через меню “Изображение”-“Размер изображения…”, перед нами откроется вот такое окошко, в котором будут указаны параметры вашего фото.

Теперь нам нужно изменить значение “Разрешение”, в данном примере оно равно 480 пикс/дюйм, но для интернета это слишком большое значение, изменяем его на 72 пикс/дюйм. Но хочу напомнить, если вы выкладываете для последующей печати, например детское фото, то не стоит пользоваться этим методом. Данный пример обработки подходит только для дальнейшего просмотра в интернете.

После того, как вы ввели значение 72, вы увидите, что размерность вашего фото тоже уменьшилась и размеры фотографии теперь пригодны для интернета. На мониторе фото будет смотреться лучше, чем было до этого, оно не будет вылезать за рамки монитора и не придется двигать “ползунки”. Размер уменьшился на 600Х450. Соответственно и вес фотографии тоже стал меньше. Сохраните и посмотрите сами, теперь он около 500 килобайт, Значительное сокращение в объеме. Уже намного лучше. но можно добиться и еще лучше результата.

До этого вы сохранили обычным способом, “Файл”-“Сохранить как”, это приемлемо, но есть и другой способ. Выберите меню “Файл”-“Сохранить для Web устройств” или нажмите сочетание клавиш Alt-Shift-Ctrl-S, появиться вот такое окно (Картинка кликабельна, откройте для полного просмотра)

Теперь в установках выбираем формат, это JPEG и качество устанавливаем “Очень высокое”, если выбрать “Максимальное”, то фото только не намного потеряет в весе, а С “Очень высокое” оно заметно уменьшиться в размерах. Теперь сохраняем и смотрим результат, в моем примере фото стало 221 килобайт. Как видите очень заметное уменьшение в размере с 4 мегабайт до 211 килобайт.

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

Как видите все довольно просто и если знать порядок действий, то и делается это в течении 5 минут, но за то эти 5 минут избавляют от кучи неудобств. Теперь ваше фото готово для размещения в сети. Удачных вам снимков!

Источник: photodes.ru

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

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

СОДЕРЖАНИЕ СТАТЬИ:

Почему именно Photoshop?

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

С чего начать?

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

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

Обратите внимание на формат. Если Вы сохранили объекты редактирования с интернета или скопировали из фотоаппарата, то чаще всего они будут иметь расширение «jpeg/jpg». Но может быть и «gif» или «png». Для последнего типа характерна прозрачность заднего фона, что делает такие изображения уникальными. Если хотите при сжатии оставить эти свойства, то лучше подобные объекты помещать в отдельное место (папку). Далее Вы узнаете почему.


Процесс пошел!

Переходим к инструкции, как сжать фото без потери качества фотошопе. Она очень простая!

Все описанные ниже шаги актуальны для версии CC 2014 — 2015

  • Запускаем редактор Adobe Photoshop. Лучше использовать свежую версию, хотя описанный ниже функционал присутствует даже в «старых» редакциях софта.
  • Открываем нужный объект обработки (или несколько) используя соответствующий пункт в меню «Файл» или просто нажимаем на клавиатуре Ctrl + O :

Стоит отметить, что изначально исходник занимал на диске 442 Кб!

  • Теперь снова идем в «Файл» и там кликаем по варианту «Сохранить для Вэб…»:
  • Откроется новое окно с множеством настроек. Но не стоит паниковать, сейчас разберемся. Справа сверху можно выбрать из выпадающего списка формат сохранения (по умолчанию — jpeg) и указать качество от 0 до 100, используя «бегунок». Есть возможность указать предустановленные настройки сжатия: минимальное, среднее и т.д.
  • Под зоной предварительного просмотра можно видеть новый размер элемента. В данном случае он уменьшился до 232 Кб. Но и это не предел. Вы можете менять качество (уменьшать) до тех пор, пока не начнете замечать цифровые артефакты — неровности краев, волны, кубики. Также, Вы вправе изменить разрешение элемента, указав другую ширину и высоту. Возможно, Вам не нужен такой большой «лев». Это позволит еще больше минимизировать вес.

Теперь Вы знаете, как сжать размер фото в фотошопе. Но позвольте рассказать немного об особенностях формата «png».


Инструкция для PNG

  • Допустим, Вы сохранили исходник, который размещена на прозрачном фоне.
  • Если попытаться сохранить её вышеуказанным способом, то фон будет залит сплошным белым цветом:
  • Необходимо сверху изменить тип на PNG-8 или PNG-24:
  • Если выбран первый вариант (8), то чуть правее будет доступен выбор количества цветов (от 2 до 256). Вы можете пробовать менять эти значения и смотреть на изображение. Стоит отметить, что это решение оптимально, если Ваш исходник не слишком насыщен и разнообразен в плане цветности, и Вас особо не беспокоит ровность краев.
  • Для лучшего качества следует выбирать режим 24, который не имеет особых настроек. Да и сильно сжать не получиться. Поэтому, лучше немного поиграться с PNG-8.

Предлагаю посмотреть следующее видео, которое более подробно покажет, как уменьшить фото в Фотошопе без потери качества:


Уточнение для Photoshop версии CC 2016 и выше

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

Обратите внимание, что выше расположен пункт «Экспортировать как…», клик по которому откроет обновленный интерфейс утилиты сжатия.

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

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

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

Для чего нужно уменьшать вес фото? Это может понадобится по трем причинам:

  1. Вы нужно уменьшить вес архива для хранения. Современные фотокамеры, в том числе, камеры в телефонах, имеют высокое качество печати, и как следствие, фотографии имеют большой размер. То есть, фотографии могут иметь размер от десяти и более мегабайт. И если вы фотографируете много, то даже не смотря на большой размер диска компьютера, вскоре у вас не останется места для хранения. Проблема тем более актуальна, если вы храните файлы в облаке или непосредственно в памяти телефона.
  2. Вам нужно передать большое количество фоторафий. И опять-таки, если у вас только мобильный интернет, то это может быть проблемой.
  3. Ну и наконец, сжатие изображений очень актуально для сайтостроения. Чем больший вес, тем фото дольше будет загружаться с хостинга. А если, например, вставить в пост 20 изображений, которые занимают по 10 Mb? Вы представляете, какая там будет скорость загрузки этой страницы. Человек просто откроет статью, и, не дождавшись пока она загрузиться – закроет ;-).

Каждая поисковая система учитывает при ранжировании скорость загрузки сайта. И ми должны делать все, чтобы наш ресурс просто летал. Для этого я и написал статью: «Как ускорить wordpress блог? 10 фишек для ускорения wordpress», а также вы можете установить P3 Performance Profiler и узнать какой плагин тормозит блог.

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

Два метода уменьшения.

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

Можно уменьшить вес картики в пикселях. То есть, если оригинал изображения у нас был скажем 6000 на 4000, то мы можем обрезать изображение и оставить только нужную нам часть

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

Другой метод, это увеличение сжатия картинки. Дело в том, что есть форматы изображений без потери качества, такие как TIFF, RAW, PSD. А есть и широко используемые: JPG, PNG. (есть и другие форматы, но эти, самые распространенные).

Так вот, вот эти последние, позволяют просто сжать картинку. Причем, вы можете сжать как по пикселям, то есть, «упаковать» картинку размером 6000×4000 в размер 3000×2000 пикселей. Или просто сжать картинку. И таким образом, значительно уменьшить вес картики в байтах.

Фактически, на практике обычно применяют сжатие по количеству пикселей и по степени сжатия.

Сжатие с помощью онлайн сервиса

Вы переходите на сайт squoosh.app и просто перетаскиваете туда изображение.

Таким образом, если оригинальное изображение имело размер 8 мегабайт, то теперь изображение стало весить меньше четырех мегабайт.

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

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

Уменьшение с помощью специальных программ.

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

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

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

Таким образом, программа даёт хорошее соотношение качества изображения, к его размеру.

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

Для начала нужно скачать программу фотошоп и установить себе на компьютер, если у вас еще ее нет. Эта программа просто замечательна, в ней можно делать с картинками все что угодно. Посмотрите, какие я делаю красивые фото в начале статьи. Это все фотошоп. Хотя эта программа платная, но если вы будете хорошо искать, то можете найти и бесплатно ;-). У меня, например, установлена бесплатная версия Adobe CS5.

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

Потом выбирайте нужную вам картинку на компьютеры и нажмите на кнопку «Открыть»

Картинка, которую я загрузил, занимает 2,9 Mb. Ее ширина – 2560, а высота – 1920. Для того чтобы уменьшить вес картинки, можно сначала уменьшить ее размер. Таким образом уменьшиться размер пикселей и соответственно увеличиться качество изображения. Для этого я нажимаю на панели «Изображения» и выбираю «Размер изображения». Ставлю ширину 550, а высота уменьшается пропорционально. Потом нажимаю «Ок»

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

Теперь нам нужно сохранить картинку так, чтобы не потерять ее качество и уменьшить вес. Для этого нажимаем «Файл» в левом верхнем углу и выбираем «Сохранить для web устройств». Выбираем формат JPEG и указываем качество изображения. И здесь, опять же, чем больше качество картинки, тем больший у нее будет вес. Поэтому вы должны выбрать такое качество, при котором внешний вид картинки не ухудшиться, но вес будет минимальный. Экспериментируйте :smile:. Как показывает практика качество изображения лучше всего ставить примерно от 40 до 80. Если ставить меньше, то внешний вид ухудшиться. Ну, а больше 80 также не стоит ставить. Ми же хотим уменьшить вес фото.

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

Таким образом, я уменьшил вес картинки с 2, 9 Мб до 27, 6 КБ. И при этом качество изображения не изменилось. Такие действия я делаю каждый раз перед публикацией статьи. На это у меня уходит несколько секунд, а загрузка страницы увеличивается очень сильно. Также я экономлю место на хостинге.

Уменьшение веса на мобильнике.

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

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

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

Заключение.

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

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

Как уменьшить размер файла JPG в Paint, Фотошопе или онлайн сервисе —

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

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

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

Содержание статьи:

  • Способы уменьшения JPG файла
  • Как уменьшить размер файла JPG в Adobe Photoshop
  • Как уменьшить размер файла JPG с помощью Paint
  • Уменьшение размера файла JPG с помощью онлайн сервиса
  • Выводы

Способы уменьшения JPG файла

В общем случае уменьшения размера картинки можно достичь двумя способами:

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

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

Как уменьшить размер файла JPG в Adobe Photoshop

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

Уменьшаем разрешение. Для начала нужно открыть исходное изображение. Нажмите на картинке ПКМ и выберите «Открыть с помощью» —> «Adobe Photoshop».

После того, как изображение откроется, перейдите в раздел «Изображение» —> «Размер изображения» или просто нажмите комбинацию клавиш «Alt+Ctrl+I».

На экране появится окно, с помощью которого можно задать разрешение картинки. Для этого введите соответствующие значения в полях «Ширина» и «Высота». После внесения изменения не забываем нажать «Ок».

Снижаем качество. Для уменьшения размера JPG файла путем понижения качества нужно открыть картинку с помощью Adobe Photoshop. После этого нажимаем «Файл» —> «Сохранить как» или комбинацию клавиш «Shift+Ctrl+S».

Выбираем место сохранения, вводим название файла и задаем формат «JPG», нажимаем «Сохранить».

В поле «Параметры изображения» смещаем ползунок качества картинки в левую сторону. Для среднего качества установите ползунок на уровне 6−7. Нажмите «Ок».

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

Мы скачали тестовое изображение в отличном качестве и с разрешением Ultra HD (3840×2160 пикселей). Его исходный размер составил 1.13 МБ. После снижения качества до 8 и понижения разрешения до Full HD (1920×1080 пикселей) его размер составил 380 КБ. Визуально качество картинки не изменилось. Как видите, с помощью указанных выше методов вполне реально можно уменьшить размер файла JPG. Ну а мы продолжим рассмотрение вопроса и опишем еще несколько способов уменьшения размера картинки.

Как уменьшить размер файла JPG с помощью Paint

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

Если на Вашем компьютере не установлен Adobe Photoshop, а уменьшить размер картинки очень нужно, то используйте Paint. Для начала откройте нужное изображение. Для этого нажмите на нем ПКМ и выберите «Открыть с помощью» —> «Paint».

Далее нажмите комбинацию клавиш «Ctrl+W». На экране появится окно, с помощью которого можно изменить размеры картинки. Для этого в поле «Изменить размеры» откорректируйте значения «По горизонтали» и «По вертикали». Вы можете установить селектор как напротив пункта «Проценты» (тогда Вы будете изменять размеры изображения в процентном соотношении) или напротив пункта «Пиксели» (размеры будут изменяться в пикселях).

После всех изменений нажимаем «Ок» и сохраняем картинку зайдя в «Paint» —> «Сохранить как».

Советуем использовать Paint для уменьшения размера JPG файла только в крайнем случае. Если есть возможность — используйте Photoshop или онлайн сервис, который мы рассмотрим далее.

Уменьшение размера файла JPG с помощью онлайн сервиса

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

К преимуществам можно отнести:

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

К недостаткам можно отнести:

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

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

Один из таких сервисов это www.imgonline.com.ua/compress-image.php.

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

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

Выводы

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

Источник: komputer-info.ru

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

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

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

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

Во-вторых, что происходит с качеством картинки после изменения его размеров?

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

Подобный вопрос был рассмотрен в уроке, связанном с изменением размера слоя, рекомендую к ознакомлению

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

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

Способ 1 — Диалоговое окно Размер изображения

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

Откройте изображение в фотошопе.

Откройте диалоговое окно Изображение — Размер изображения (или комбинация клавиш — Alt+Ctrl+I). Появится вот такое окно:

Сразу обратите внимание на поля Ширина и Высота. Те значения, что там будут указаны — это текущие размеры изображения. По умолчанию они измеряется в пикселях.

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

Пропорции

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

Пример без сохранения пропорций

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

Пример с сохранением пропорций

Способ 2 — Изменение размера с помощью трансформации

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

  • уменьшить или увеличить размер всего изображения;
  • уменьшить или увеличить вставленную картинку в фотошоп.

Размер подробнее каждый случай.

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

Шаг 1

Откройте картинку. Выберите команду Редактирование — Свободное трансформирование или нажмите комбинацию клавиш Ctrl + T.

Примечание

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

Чтобы разблокировать фоновый слой, сделаете по нему двойной клик. Появится окно Новый слой, нажмите на Ок.

Подробнее о блокировке фонового слоя.

Шаг 2

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

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

Шаг 3.1 Случай при увеличении

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

Но если настаиваете на том, чтобы изображение было показано полностью, выберите команду Изображение — Показать все.

Шаг 3.2 Случай при уменьшении

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

Чтобы отрезать пустоту, выберите команду Изображение — Тримминг.

Совет

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

Как уменьшить или увеличить вставленную картинку в фотошоп

Описанный выше случай в любом случае берите себе на вооружение. А именно умение пользование командой Свободное трансформирование (Ctrl+T). Этот прием понадобиться, чтобы осуществить такую часто встречающуюся операцию, как уменьшение или увеличение вставленной картинки, предмета, объекта (называйте как хотите).

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

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

Способ 3 — Размер холста

Не самый популярный способ, но тем не менее его также рассмотрим — команда Размер холста.

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

То есть, допустим, ваша картинка 700х700 пикселей. Через Изображение — Размер холста вы задаете размер 500х500. В итоге фотошоп обрезает лишние 200 пикселей по высоте и ширине. В настройках можно указать откуда отрезает: это либо равномерно со всех сторон, либо можно выбрать конкретную сторону.

Способ 4 — Кадрирование

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

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

Мы рассмотрели 4 способа по уменьшению размеров изображения. Из них два способа: Размер холста и Кадрирование не связаны с потерей качества. Фактически (ширина и высота) картинки становятся меньше, но само содержимое остается прежнего масштаба. Чтобы этого добиться, нужно пожертвовать частью картинки, другими словами, просто обрезать ее до нужного размера. Подробнее как это делать смотрите выше по тексту.

Как уменьшить вырезанное изображение в фотошопе

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

О том как вырезать объекты читайте в других статьях. Подробнее остановимся на уменьшении.

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

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

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

Заметили ошибку в тексте — выделите ее и нажмите Ctrl + Enter. Спасибо!

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

Как уменьшить вес фотографии в фотошопе

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

На странице фотомонтаж фотографий робот Отик собрал ссылки на классные сайты, где из обычной своей фотографии вы сможете создать сами классный фотомонтаж. Создать его бесплатно и за пару минут. На странице Подготовка фото, уменьшаем её вес, я уже написал зачем вес фотографии желательно уметь уменьшать. Там же выложил простенькую программку для уменьшения веса фотографий, скачаете за минутку — она очень лёгкая и простая. В отличии от фотошопа.

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

Итак — уменьшаем  вес фотографии.

1- Для начала уменьшим размер фотографий или изображений. Я изначально сделал чтоб все фото (почти все, бывают исключения)  у меня были были одного размера. Все рисунки делю на три категории маленький, большой и средний размеры. Маленькие изображения — это ширина 180, большие это ширина 420,  а средние делаю ширина 320 пикселей.

Чтоб сделать размер из исходной фотографии  ширина которой  1280 и высота  960  ( к примеру), открываю это изображение в фотошоп. Кликаю на вкладку изображение + размер изображения У  вас откроется окно «РАЗМЕР РИСУНКА».

Если поставите галочку сохранять пропорции, то введя только размер ширины (там где выделил) вместо 1280 на 960 (прямо в поле новое значение и вписывайте), то вместе с шириной автоматически будет изменятся и высота. Это очень удобно.   Если вам надо изменить размер не только ширины но и высоты, тогда убирайте галочку сохранять пропроции, и вписывайте какие вам нужны значения в поле «высота и ширина». Затем нажимайте ОК.

Все, изображение будет в новом размере ( к примеру я вписал значение новое вместо ширины 1280 — вписал 320)

Это важно. Вместе с размером у нас частично изменился вес фотографии. Вес фотографии уменьшился. Изначально был 420 Кб, сейчас стал 225 Кб.

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

Итак — мы уменьшили размер  фотографии в фотошопе, вместе с ним уменьшился вес фотографии. Но это еще не всё. Вес фотографии сейчас  225 Кб. Мы можем его еще немного сжать, без ущерба качества изображения.

В общем пробуйте так друзья.  Заходите в меню в раздел файл, затем ищете строку сохранить для веб.  Откроется  вот такое окно. Чтоб было проще разобраться сначала выберете пункт 2up.

В левом окошке — отображается  вес который есть сейчас изображения он 225 Кб.  В правом отображается вес фотографии после ваших изменений. Кстати когда вы будете уменьшать вес фотографии, сразу же в правом окошке будет меняться и качество картинки. Сравнивая исходную картинку ( слева ) вы можете уменьшить вес картинки (которая справа) пока качество изображения будет для вас удовлетворительным. Менять вес в той панельки что выделил красным —  LOW — МИНИМАЛЬНЫЙ РАЗМЕР, СООТВЕТСТВЕНО  MAXIMUM — максимальный. Есть и другие значения —  выбирайте, пробуйте, смотрите разницу. Насколько уменьшается вес фотографии в фотошопе. Я обычно беру параметры Медимум или GIGT.   Когда определитесь со значениями и весом, нажимайте кнопку сохранить «Save». Всё ваше  изображение сохранено. Был изначально вес изображения 420Кб, стал 29Кб.

Неплохо мы уменьшили вес в фотошопе фотографии, правда девочки и мальчики?

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

И еще можете посмотреть (у кого «быстрый» интернет) этот забавный мультик ребята.

Похожие записи на сайте

Как уменьшить вес картинки в Фотошопе простыми способами?

Здравствуйте всем, кто заглянул на мою страничку! Сегодня я вам расскажу как уменьшить вес картинки в Фотошопе на примере одной моей фотографии. Снимаю я полупрофессиональной камерой Nikon D7000 в формате RAW. Недостаток этого формата — большой вес файлов.

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

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

Первоначальный вес — 18314 КБ.

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

Проведем эксперимент. Сохраним изображение в формате jpeg и сравним вес двух снимков.

Размер картинки я не меняла и сохранила фотографию с самым высоким процентом качества изображения.

Давайте таперь сравним два файла и посмотрим насколько изменился вес картинки.

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

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

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

Вес картинки значительно уменьшился, а насколько изменилось качество? Попробую сравнить визуально два снимка.

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

Как бы я уменьшила вес этой фотографии перед публикацией в блог?

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

Посмотрите каких результатов мне удалось достичь. Вес файла вместо 18314 КБ стал 29 КБ, но это еще не все, проводим эксперимент дальше.

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

Далее перехожу по вкладке: «Файл — Сохранить для Web». Устанавливаю значение качества изображения и сохраняю файл в формате jpeg.

Посмотрим сколько весит наш файл перед публикацией в интернете.

А весит он уже не 29 KБ, а 42КБ.

Делаем вывод: Самый лучший способ уменьшить вес снимка для публикации в блог — это сделать скриншот.

Эксперимент мы проводили над этой фотографией.

Приглашайте детей на свадьбу! Они громче всех кричат: «Горько!»

Большое спасибо за внимание!

Есть желание поделиться информацией с друзьями в социальных сетях? Я не возражаю! Кнопочки социальных сетей под этой статьей. До новых встреч! Наталья Краснова.

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

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

Во-первых, это самый популярный графический редактор!

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

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

В-четвертых, нет зависимости от наличия подключения к Интернету.

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

Открываем в Фотошопе картинку весом 268 Кб и размером 1280 на 960 пикселей.

Выбираем в верхнем меню Изображение => Размер изображения. Советуем запомнить несложное сочетание горячих клавиш для быстрого вызова этого окна — ALT + CTRL + I.

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

Как видим, высота автоматически изменилась на 450 пикселей.

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

Чтобы картинка минимально весила, в Фотошопе предусмотрена специальная функция сохранения для Интернета — Файл => Сохранить для Web  (ALT + SHIFT + CTRL + S). Несмотря на кажущуюся сложность горячих клавиш, нужно немного потренироваться и пальцами только левой руки вы легко сможете нажимать данную комбинацию.

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

Смотрим информацию под картинкой и видим, что вес стал 41 Кб. При этом картинка смотрится весьма прилично, хотя ее размер стал в 10 раз меньше!

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

Если вам не нравится качество, вы сразу же может его изменить на «Высокий», «Очень высокий», «Наилучшее» или ползунком в строке Качество, изменить цифры.

Если картинка была в другом формате, выберите вместо JPEG, соответственно GIF, а в случае с PNG – PNG-24.

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

Совет из собственной практики.Если обрабатываете много однотипных картинок, то после указания формата и качества (например, JPEG – Средняя), данные настройки будут сохранены. Вам останется после появления окна «Сохранить для Web», 3 раза подряд нажать клавишу ENTER. Таким образом, вы мгновенно откроете и закроете окна сохранения и замены файла.

Ну, очень ускоряется обработка изображений!

Как уменьшить вес картинки в фотошопе

Как уменьшить вес картинки? Но сначала: зачем это нужно?

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

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

Помимо всего прочего скорость загрузки страницы — это очень полезно для поведенческого фактора.

Так сложилось, что когда я загружаю страницы через свой 3g модем, а скорость там не слишком высокая, больше всего меня убивают страницы, которые долго грузятся. И все это из-за тяжелых картинок! Это Адски убивает желание заходить на сайт, где страницы грузятся больше чем по 10 секунд. И я уверен, что так везде. Если ваши страницы грузятся очень долго — то это ни куда не годится.

Зачем нужно уменьшать вес картинки?

  • Чтобы ускорить скорость загрузки страницы
  • Чтобы продвинуть сайт в поисковой выдаче
  • Чтобы улучшить поведенческий фактор

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

Теперь, настало время узнать: Как уменьшить вес картинки в фотошопе!

Лучшим и вполне простым инструментом для уменьшения веса картинки является программа Фотошоп.

Давайте уменьшим вес одной картинки…

Картинка вестом 4,2 мб, ее формат: 3200 пикс. х 2400 пикс. — это непозволительно много для сайта, загрузив несколько таких картинок на страницу — он будет грузиться мучительно долго.

Чтобы уменьшить вес картинки в Фотошопе, необходимо:

1. Загрузить картинку в фотошоп, просто перетянув ее в рабочее окно фотошопа.

2. Жмем Файл/Сохранить для Web…

3. Здесь, в настройках сохранения, выбираем формат JPEG и изменяем формат ширины: из 3264 на 1000 пикс. Высота автоматически изменится. И нажимаем Сохранить

И это все что требовалось сделать, теперь вес картинки трансформировался из 4,2 мб в 179 кб, это почти в 24 раза меньше. При этом качество практически не пострадало.

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

Желаю вам успешной оптимизации и быстрой загрузки ваших страниц.

Photoshop: как уменьшить размер PNG для веб-использования

Отвратительные подробности (вы не просили)

Некоторые форматы изображений, такие как JPG, поддерживают сжатие с потерями . Когда изображение с потерянным сжатием сохраняется и затем отображается, изображение не на 100% точно соответствует его дизайну, а просто «близко» к нему, что-то вроде эскиза. Часть оригинальной детали потеряна . Поскольку точность не ожидается, изображения с потерянным сжатием позволяют хранить мало информации об оригинальном дизайне, что приводит к небольшим файлам. Они даже позволяют указать, насколько точным должен быть результат: чем менее точным должен быть результат, тем меньше размер файла.

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

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

Некоторые предложения

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

  • Большие области плоских цветов сжимаются лучше, чем сложные узорные области. Посмотрите, можете ли вы упростить свое изображение.
  • У вас много негативного пространства вокруг изображения? Попробуйте урезать его до минимума.
  • Вы используете прозрачность? Если нет, попробуйте сохранить изображение в формате JPG.
  • Если по какой-либо причине вы не можете сохранить его в формате JPG, но не используете прозрачность, снимите флажок «прозрачность» в параметрах сохранения. Это позволит немного побриться от вашего окончательного результата.
  • Подумайте о том, чтобы разрезать изображение по частям и скомпоновать его в окончательный HTML-код, как какую-то головоломку. Вы можете сохранить части, для которых требуется прозрачность, в формате PNG, а другие части — в формате JPG с высокой степенью сжатия. Общий результат должен быть менее тяжелым.
  • Используйте инструмент сжатия PNG (например, https://tinypng.com/ ). Имейте в виду, эти инструменты используют алгоритм с потерями. Они пытаются упростить ваше изображение, чтобы иметь возможность сохранить его в виде файла меньшего размера. Они значительно уменьшают размер вашего файла, но конечный результат может потерять слишком много деталей. Вы всегда можете попробовать их и оценить результат в зависимости от приложения.

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

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

Узнайте, как изменить размер изображения, обрезать и выпрямить, а также добавить на холст изображения в Adobe Photoshop.

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

Давайте поговорим о том, как изменить размер изображения в Photoshop. Я предлагаю вам начать с этого изображения из загружаемых файлов практики для этого руководства. Я хотел бы установить размер этого изображения, чтобы оно подходило для размещения на определенном веб-сайте, где я знаю, что идеальный размер изображения составляет 900 пикселей в ширину.Прежде чем мы изменим размер этого изображения, давайте сначала проверим, насколько оно велико. В большинстве случаев вы захотите начать с изображения, которое больше или, по крайней мере, не намного меньше, чем изображение с измененным размером, которое вам нужно. Это потому, что если вы сильно увеличите изображение, в какой-то момент оно может начать выглядеть размытым. Я спускаюсь в строку состояния в нижней части окна документа, нажимаю и удерживаю информацию о размере документа. В маленьком всплывающем окне мы видим, что этот файл имеет ширину 1800 пикселей и высоту 1200 пикселей.Поскольку мы хотим разместить его на нашем веб-сайте шириной всего 900 пикселей, это означает, что мы будем уменьшать его масштаб. Чтобы изменить размер этого изображения, я перейду в меню «Изображение» и выберу «Размер изображения …». Откроется диалоговое окно «Размер изображения». Если хотите, вы можете увеличить это окно, перейдя в правый нижний угол и потянув за него. Слева вы можете увидеть предварительный просмотр изображения, а справа — элементы управления для изменения размера изображения. Здесь много информации, но вам не нужно обрабатывать ее всю, особенно когда вы изменяете размер изображения, которое будет отображаться на экране, а не для печати.Как мы в этом примере. Итак, здесь есть пара вещей, которые стоит проверить. Сначала убедитесь, что этот значок ссылки включен. Вот как это выглядит, когда он включен. Если я щелкну по нему, он будет выглядеть вот так, когда он выключен. Итак, мы хотим, чтобы он был включен, чтобы убедиться, что ширина связана с высотой, чтобы при изменении размера изображения сохранялась исходная пропорция ширины к высоте, и изображение не выглядело сжатым или растянутым. Во-вторых, убедитесь, что в этом поле стоит галочка, поле Resample.Когда этот флажок установлен, вы говорите Photoshop, что можно выбросить некоторые пиксели, когда он делает это изображение меньше. Или, если вы увеличивали изображение, добавляли несколько пикселей. И в-третьих, посмотрите справа от полей Ширина и Высота, где вы можете увидеть единицу измерения, которая используется для сообщения размеров изображения. По умолчанию это дюймы. Но когда вы изменяете размер изображения для использования на экране, как мы это делаем в этом примере, правильной единицей измерения являются не дюймы, а пиксели.Итак, я собираюсь щелкнуть любое из этих двух меню и изменить его с дюймов на пиксели, и другое меню тоже изменится, потому что ширина и высота связаны. Пришло время изменить размер. Я перейду в поле «Ширина» и вместо 1800 наберу 900. Вы можете видеть, что поле «Высота» автоматически изменилось, и оно изменилось пропорционально. А теперь бонусный совет: если вы хотите, чтобы изображение имело разные пропорции, скажем, 900 на 400, а не 900 на 600 в данном случае, лучший способ добиться этого — использовать другой инструмент, инструмент Кадрирование, который мы снимаемся в другом фильме.Прежде чем я нажму «ОК», вы можете спросить, почему я не изменил поле «Разрешение». Это потому, что это поле «Разрешение» актуально только тогда, когда вы готовите изображение для печати. Когда вы изменяете размер изображения для использования на экране, как в этом примере, число в этом поле действительно не влияет на размеры изображения. Итак, вы можете оставить все как угодно. Итак, после внесения этих нескольких изменений в диалоговом окне «Размер изображения» мы можем перейти к кнопке «ОК» и щелкнуть там, чтобы закрыть диалоговое окно «Размер изображения» и вернуться в окно «Документ».Если хотите, вы можете вернуться в строку состояния и проверить размер измененного изображения. Я нажимаю и удерживаю информацию там, и вы видите, что теперь у нас есть изображение размером 900 на 600 пикселей вместо оригинала, которое было 1800 на 1200. Все, что осталось сделать, это сохранить изображение. Я перейду в меню «Файл» и выберу «Сохранить как …», а не «Сохранить», потому что я не хочу сохранять исходную версию с разрешением 1800 на 1200 пикселей. Итак, в диалоговом окне «Сохранить как» я дам этой версии другое имя.Вы можете ввести здесь все, что захотите. Я собираюсь набрать «Resize-web.jpg» для моей веб-версии файла. Все остальное оставлю как было и нажму «Сохранить». Я нажимаю ОК в окне параметров JPEG, и теперь все готово. Вот как изменить размер изображения для использования на экране в диалоговом окне Photoshop CC Image Size.

Что вы узнали: как изменить размер изображения

  1. Выберите «Изображение»> «Размер изображения».
  2. Измерьте ширину и высоту в пикселях для изображений, которые вы планируете использовать в Интернете, или в дюймах (или сантиметрах) для изображений для печати.Держите значок ссылки выделенным, чтобы сохранить пропорции. Это автоматически регулирует высоту при изменении ширины и наоборот.
  3. Выберите Resample, чтобы изменить количество пикселей в изображении. Это изменяет размер изображения.
  4. Нажмите ОК.

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

Если вам нравится печатать изображения, вам может быть полезно иметь общее представление о том, что означает разрешение изображения в Photoshop, и как изменить разрешение изображения, чтобы подготовить его к печати.Это делается в диалоговом окне «Размер изображения». Если вы следите за происходящим, давайте откроем это изображение, которое вы найдете в файлах практики для этого урока. Затем перейдите в меню «Изображение» и выберите «Размер изображения» … В диалоговом окне «Размер изображения» вы можете увидеть размеры этого изображения в пикселях. Когда изображение все еще находится на вашем компьютере, мы измеряем его размер в пикселях. Но если бы мы распечатали это изображение, мы бы измерили размер отпечатка в дюймах, а не в пикселях. Здесь, в поле «Разрешение», вы можете увидеть разрешение, которое в настоящее время установлено для этого изображения, это 100.В разрешении 100 нет ничего особенного, это просто круглое число, которое я выбрал, когда настраивал файл для этого урока. Итак, что здесь означает разрешение? Что ж, если вы прочитаете эту строку слева направо, вы сможете это понять. Это говорит нам о том, что разрешение — это определенное число пикселей / дюйм, в данном случае 100 пикселей / дюйм. Другой способ сказать это: если и когда вы распечатаете это изображение, 100 пикселей из общих 1800 пикселей по горизонтали и 1200 пикселей по вертикали будут назначены каждому напечатанному дюйму по горизонтали и вертикали.Теперь, если вам не нравятся математические задачи, вы можете пропустить следующую часть, но если вам нравится думать об этом с точки зрения математики, вот простой пример. Итак, математическая задача: разделите 1800 на 100, и вы получите 18. Это означает, что при разрешении 100 пикселей на дюйм этот файл будет напечатан с размером 18 дюймов. И так же работает по вертикали. Если мы разделим общую высоту 1200 пикселей на группы по 100, то получится 12 групп или 12 дюймов. Итак, высота напечатанного изображения будет 12 дюймов. Итак, если вы понимаете эту основную концепцию, теперь вы, вероятно, задаетесь вопросом, а какое число лучше всего указать в поле «Разрешение» при подготовке изображения к печати? К сожалению, нет однозначного ответа, потому что это зависит от того, какой принтер вы используете.Но если вы печатаете дома на типичном струйном принтере, будет справедливо сказать, что подойдет разрешение около 300 пикселей на дюйм. Если бы я напечатал изображение с разрешением всего 100 пикселей на дюйм, оно могло бы выглядеть нормально, но если бы вы подошли к нему очень близко, оно выглядело бы не лучшим образом. Потому что моему настольному струйному принтеру действительно нужно около 300 пикселей на дюйм. Так как же изменить разрешение печатаемого изображения до 300 пикселей на дюйм в этом диалоговом окне? Первый шаг — убедиться, что флажок Resample не установлен.Потому что, если мы просто меняем разрешение, мы, вероятно, не захотим изменять общее количество пикселей в файле. И это то, что делает Resample. Итак, предположим, что мы хотим, чтобы общее количество пикселей в файле оставалось равным 1800 на 1200. Мы просто хотим перераспределить их на группы по 300, а не на группы по 100. Итак, что я собираюсь сделать, это набрать 300 в поле Разрешение. Предупреждение о спойлере: когда я это сделаю, количество дюймов в полях «Ширина» и «Высота» также изменится. Итак, давайте набираем здесь 300.И, конечно же, ширина и высота изменились с 18 дюймов и 12 дюймов до 6 дюймов на 4 дюйма. И это размер, при котором это изображение будет напечатано с разрешением, необходимым для наилучшего качества печати. Я закончил, поэтому собираюсь нажать ОК. Это закроет диалоговое окно «Размер изображения» и вернет меня в окно «Документ». И вот у меня есть готовое к сохранению и печати изображение размером 6 на 4 дюйма, по 300 пикселей на каждый дюйм.

Что вы узнали: как изменить разрешение изображения

  1. Выберите «Изображение»> «Размер изображения».Разрешение в этом диалоговом окне означает количество пикселей изображения, которое будет назначено на каждый дюйм при печати изображения.
  2. Оставьте для печати ширину и высоту в дюймах.
  3. Снимите флажок «Resample», чтобы сохранить исходное количество пикселей изображения.
  4. В поле «Разрешение» установите количество пикселей на дюйм равным 300 для печати на обычном настольном струйном принтере. Это изменит количество дюймов в полях ширины и высоты.
  5. Нажмите ОК.

Инструмент «Кадрирование» — один из самых полезных инструментов Photoshop CC, особенно для тех из вас, кто делает много фотографий.Вы можете использовать его для улучшения композиции и исправления кривых фотографий. Я открыл это фото из файлов практики для этого урока. Итак, я могу показать вам основы инструмента «Кадрирование». Я начну с выбора инструмента «Кадрирование» на панели «Инструменты». Как только я это сделаю, вы увидите эту рамку вокруг всего изображения. Это поле «Обрезать». Я наведу курсор на любой из углов или на любой из краев поля кадрирования и перетащу, чтобы изменить форму этого поля. Итак, в этом случае я мог бы перетащить его внутрь, чтобы создать композицию, совершенно отличную от исходной фотографии.Когда вы создаете кадрирование, Photoshop показывает вам предварительный просмотр с областями, которые необходимо обрезать, заштрихованными серым цветом. Таким образом, вы сможете оценить, что именно вы собираетесь удалить, прежде чем завершить сбор урожая. Теперь, прежде чем я завершу эту обрезку, я хочу перейти на панель параметров, чтобы показать вам важную опцию. И это Удалить обрезанные пиксели. Эта опция отмечена по умолчанию. Обычно мне нравится снимать этот флажок. Потому что, когда установлен флажок «Удалить обрезанные пиксели», если вы завершите кадрирование и сохраните изображение, вы навсегда удалите обрезанные пиксели.Но если этот параметр не отмечен, вы можете вернуть обрезанные пиксели в любое время. Давайте попробуем. Я собираюсь завершить эту обрезку, перейдя к большой галочке на панели параметров и щелкнув там. Есть и другие способы завершить кадрирование, но мне нравится этот способ, потому что он очень простой. Итак, теперь вы можете увидеть фотографию с примененным кадрированием. Допустим, я делаю что-то еще с изображением, а затем передумал, как я его обрезал. В любой момент я могу вернуться и выбрать инструмент «Обрезка», а затем снова щелкнуть изображение, и все пиксели, которые я обрезал, снова появятся в поле зрения, и я могу изменить кадрирование.На этот раз я мог бы включить некоторые из этих обрезанных пикселей. Кстати, вы могли заметить, что поверх моей фотографии есть сетка из вертикальных и горизонтальных линий, когда я использую инструмент «Кадрирование». Этот оверлей представляет собой классическую композиционную технику, известную как правило третей. Идея этого метода заключается в том, что если вы разместите важный контент в изображении на пересечении любой из этих горизонтальных и вертикальных линий, вы можете улучшить композицию. Давайте попробуем с этим изображением. Я собираюсь разместить букет прямо на этом пересечении, щелкнув изображение и перетащив его сюда.А потом я мог бы еще немного изменить границу обрезки, подтянув ее к букету еще сильнее. Затем я нажму галочку. Опять же, я собираюсь щелкнуть изображение с помощью инструмента «Кадрирование», чтобы попытаться еще немного настроить это кадрирование. Я заметил, что это изображение немного искривлено, особенно здесь, за столом. Одна из вещей, которые вы можете сделать с помощью инструмента «Обрезка», — это выпрямить изображение. Есть несколько способов сделать это. Вы также можете переместить курсор за пределы одного из углов и вручную попытаться перетащить, чтобы выпрямить изображение, и появится эта сетка, которая поможет вам в этом.Я предпочитаю автоматический метод. Итак, я собираюсь отменить, это Command + Z на Mac, Ctrl + Z на ПК. Итак, изображение снова искривлено, а затем я перейду к панели параметров и воспользуюсь инструментом автоматического выпрямления. Я нажму на этот инструмент, чтобы выбрать его на панели параметров для инструмента Обрезка. Я перейду к изображению, а затем щелкну по краю этой таблицы, удерживая указатель мыши и перетащив немного дальше по этому краю. Теперь вам не нужно идти до конца по краю.Иногда немного поможет, например, вот здесь. Photoshop использует вашу линию в качестве ориентира для поворота изображения, чтобы содержимое выглядело ровно. Я собираюсь еще немного подстроить эту обрезку, возможно, поднять этот край и, возможно, немного сдвинуть букет, чтобы поместить его прямо в центр. А затем я собираюсь подойти к панели параметров и щелкнуть галочку, чтобы завершить кадрирование. Таковы некоторые из основ инструмента «Кадрирование». Надеюсь, вы попробуете эти техники поработать над собственными композициями в Photoshop.

Что вы узнали: как обрезать и выпрямить изображение

  1. Выберите инструмент «Обрезка» на панели «Инструменты». Появится рамка кадрирования.
  2. Перетащите любой край или угол, чтобы настроить размер и форму границы кадрирования.
  3. Перетащите курсор внутрь границы кадрирования, чтобы расположить изображение внутри границы кадрирования.
  4. Перетащите за угол границы кадрирования, чтобы повернуть или выпрямить.
  5. Щелкните галочку на панели параметров или нажмите Enter (Windows) или Return (macOS), чтобы завершить кадрирование.

Добавьте немного места на холст документа.

Бывают случаи, когда вы хотите добавить холст документа, чтобы было больше места для добавления элементов, таких как текст или изображения, в ваш дизайн. Вы можете сделать это с помощью команды «Размер холста», которую мы рассмотрим в этом уроке. Если вы следуете инструкциям, вы можете использовать это изображение из файлов практики для этого урока или собственное изображение. Чтобы добавить к холсту вокруг этого изображения, я перейду в меню «Изображение», где есть размер холста… прямо под командой Размер изображения … Теперь, чтобы не усложнять эти 2, команда «Размер изображения …», которую мы рассматривали в другом видео в этом руководстве, работает иначе, чем команда «Размер холста …». В отличие от размера изображения …, размер холста … не меняет размер ваших реальных фотографий или других произведений искусства или изображений в композиции. Это просто позволяет вам добавить пространство вокруг этих предметов. Итак, давайте выберем Размер холста … И откроется диалоговое окно Размер холста. Вверху этого диалогового окна вы можете увидеть ширину и высоту этого изображения в дюймах.И здесь вы можете добавить к ширине холста или добавить к высоте холста, или и то, и другое. И в этих полях по умолчанию также установлены дюймы. Но когда вы готовите изображение для использования в Интернете, а не для печати, имеет смысл изменить эту единицу измерения на пиксели, потому что именно так мы измеряем и обсуждаем размер изображений на экране, как вы узнали ранее в этот учебник. Итак, я собираюсь изменить одно из этих меню с Дюймов на Пиксели. Меняется и другое меню.Если вам известна общая ширина в пикселях, которую вы хотите, чтобы изображение было после развертывания холста, вы можете ввести это число в поле «Ширина». Но часто бывает проще просто сказать Photoshop, сколько пикселей нужно добавить на холст, не беспокоясь о том, какой будет общий результат. Для этого спуститесь сюда и установите флажок «Относительный». Это устанавливает число в полях «Ширина» и «Высота» равным 0. Теперь я могу ввести количество пикселей, которое я хочу добавить на холст. Итак, допустим, я хочу добавить 400 пикселей к ширине холста.Я наберу 400 здесь. Если бы я хотел увеличить высоту холста, я бы тоже мог это сделать. Я просто оставлю это на 0 пока. И затем я нажму ОК, чтобы применить это. В окне документа вы можете видеть, что Photoshop добавил холст как с левой, так и с правой стороны этой фотографии. Он разделил 400 пикселей дополнительной ширины, о которых я просил, на 200 пикселей справа и 200 пикселей здесь слева. Что, если бы я хотел добавить холст только к одной стороне этого изображения.Скажем, здесь с правой стороны. Это сделано немного иначе. Итак, давайте отменим то, что мы сделали до сих пор, попробуйте вместо этого. Я нажму Command + Z на Mac, Ctrl + Z на ПК, чтобы отменить. Я вернусь в меню «Изображение» и снова выберу «Размер холста …». Первое, что я собираюсь сделать здесь, это проверить, что в полях «Ширина» и «Высота» все еще установлено значение «Пиксели». И это не так, они вернулись к дюймам по умолчанию. Итак, я снова изменю эти меню на «Пиксели». И я дважды проверю, отмечен ли «Относительный».Как я уже сказал, я хочу, чтобы добавленный холст отображался справа от изображения. Для этого я спущусь к этой якорной диаграмме и собираюсь щелкнуть по среднему квадрату в левой части этой диаграммы. Это означает, что Photoshop должен закрепить или привязать изображение к левой стороне холста, а дополнительный холст — справа. Итак, теперь я собираюсь перейти к полю «Ширина» и ввести количество пикселей, которое я хочу добавить к правой стороне этого изображения. Добавим 800 пикселей.И жмем ОК. И это именно тот эффект, которого я хотел. Вы, наверное, заметили, что до сих пор все мои расширения холста были белыми. Но вы можете управлять цветом расширения холста здесь, в диалоговом окне «Размер холста», используя цветное меню расширения холста. Кстати, если вы работаете над другим изображением и не находитесь на специальном фоновом слое, как на этом изображении, тогда ваше цветовое меню расширения Canvas будет недоступно, а добавляемый вами холст будет прозрачным. Это будет похоже на серо-белую шахматную доску в Photoshop.Я просто нажму «Отмена». И, если я хочу сохранить это изображение, я перехожу в меню «Файл» и выбираю «Сохранить как …», поэтому я не сохраняю оригинал. Вот как вы можете добавить пространство на холст документа, чтобы у вас было дополнительное место для добавления дополнительных элементов изображения.

Что вы узнали: изменить размер холста

  1. Выберите «Изображение»> «Размер холста
  2. ».

  3. Чтобы добавить холст, введите величину добавляемой ширины и высоты.Измеряйте ширину и высоту в пикселях для использования в Интернете или в дюймах для печати.
  4. Выберите «Относительный», а затем выберите точку привязки на схеме холста. Стрелки указывают стороны, куда будет добавлен холст.
  5. Нажмите ОК.

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

Автор Стив Паттерсон.

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

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

Загрузите это руководство в виде готового к печати PDF-файла!

Вот изображение, которое я открыл на своем экране:

Исходное фото.

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

».

Выберите Изображение> Размер изображения.

Откроется диалоговое окно «Размер изображения», как показано ниже:

Диалоговое окно «Размер изображения».

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

Давайте посмотрим внимательнее на раздел Pixel Dimensions, который сообщает нам две вещи о нашем изображении. Во-первых, если мы посмотрим прямо справа от слов «Pixel Dimensions», мы сможем увидеть текущий размер файла изображения. В моем случае он говорит мне, что размер моей фотографии 14,6 M («M» означает мегабайты или «миллионы байтов»):

Текущий размер файла отображается справа от слов «Размер в пикселях».

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

Текущая ширина и высота изображения в пикселях.

Здесь мы видим, что моя исходная фотография была 2608 пикселей в ширину и 1952 пикселей в высоту. При таком размере у меня не было бы проблем с печатью великолепно выглядящего 8×10, но мне нужна была меньшая версия, которая лучше подходила бы для этих страниц. Так как же мне сделать его меньше? Я просто изменил числа в полях Ширина и Высота на то, что мне нужно! Я установлю новую ширину для своего изображения на 900 пикселей и высоту на 647 пикселей (конечно, это всего лишь пример, вы можете ввести любой размер, который вам нужен):

Ввод новых значений ширины и высоты изображения.

Чтобы изменить значения ширины и высоты, просто дважды щелкните внутри одного из двух полей (ширина или высота), который выделит число, отображаемое в данный момент в поле, а затем введите новое значение. Когда вы закончите, нажмите кнопку ОК, и Photoshop изменит размер вашего изображения до тех размеров, которые вы указали.

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

Изменение типа измерения с пикселей на процент.

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

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

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

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

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

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

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

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

Уменьшение размера изображения.

Я нажимаю ОК в правом верхнем углу диалогового окна «Размер изображения», после чего Photoshop закрывает диалоговое окно и изменяет размер моего изображения.Поскольку я уменьшил ширину и высоту на 50 процентов, размер фотографии теперь составляет одну четвертую от исходного:

.

Изображение после изменения ширины и высоты на 50 процентов.

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

Изменение значений ширины и высоты на 200 процентов.

Я нажимаю ОК, чтобы принять значения и закрыть диалоговое окно Размер изображения, после чего Photoshop увеличивает изображение, делая его в четыре раза больше, чем было мгновение назад:

Изображение после увеличения его размера на 200 процентов.

Сравним качество изображения увеличенной версии и оригинальной версии:

Исходное фото.

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

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

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

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

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

Как сделать кого-нибудь худым в Photoshop | Small Business

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

Непропорциональное масштабирование

С введением масштабирования с учетом содержимого в Adobe Photoshop появилась возможность непропорционально масштабировать изображения без искажения формы и пропорций важных элементов фотографии, включая людей и здания.Однако, чтобы человеческий объект казался тоньше, вам понадобятся устаревшие методы масштабирования программы. В диалоговом окне «Размер изображения» есть флажок, который отключает пропорциональное масштабирование, поэтому вы можете изменять размеры изображения независимо друг от друга. Установите флажок Предварительный просмотр, чтобы вы могли контролировать свою работу, и уменьшите значение ширины изображения. Насколько вы сузите изображение, зависит от его размера и разрешения, а также от вашего вкуса. Операция свободного преобразования — Ctrl-T — позволяет интерактивно изменять ширину или высоту или вводить числовые параметры для размера и масштаба.Нажмите на ручки в средних точках ограничивающей рамки, которая появляется вокруг содержимого изображения, чтобы сузить ее. Нажмите «Enter», чтобы завершить преобразование.

Фильтр «Пластика»

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

Чтобы поэкспериментировать с Liquify, откройте меню «Фильтр» и выберите «Liquify». Используйте инструмент Forward Warp, чтобы переместить пиксели в направлении, в котором вы нажимаете курсором. Инструмент Freeze позволяет защитить области изображения от изменения. Если вы зашли слишком далеко, воспользуйтесь инструментами «Реконструкция», чтобы восстановить части исходного изображения изображения или слоя. Работайте над дубликатом слоя с основным изображением, чтобы получить запасную позицию и средство сравнения ваших результатов с оригиналом.

Точечное ретуширование

Чтобы скорректировать мелкомасштабный элемент внешнего вида человека, вы можете полагаться на тонкие настройки, сделанные с помощью инструментов, которые вы используете в основном интерфейсе Photoshop.После того, как вы воспользуетесь инструментом «Перо» для рисования измененного, более узкого контура некоторой части анатомии объекта, вы можете преобразовать этот путь в выделение, которое защищает область, которую вы хотите сохранить, или определяет область, которую вы хотите ретушировать. Щелкните свой путь на панели «Контуры» и используйте команду «Сделать выделение» во всплывающем меню панели, чтобы превратить область, определенную путем, в активное выделение. При активном выделении нажмите «Shift-Ctrl-I», чтобы инвертировать его, чтобы вы могли использовать инструменты Photoshop Stamp и Healing, чтобы удалить область за его пределами, покрывая части бедра или плеча объекта цветом фона позади человека. .Снова инвертируйте выделение и используйте инструменты Photoshop Dodge и Burn, чтобы изменить контур измененной анатомии с помощью бликов и теней, определяющих форму конечности или туловища.

Маскировка

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

Информация о версии

Информация в этой статье относится к Adobe Photoshop CC и Adobe Photoshop CS6. Он может незначительно или значительно отличаться от других версий или продуктов.

Ссылки

Ресурсы

  • Adobe Photoshop CS6 Класс в книге; Adobe Creative Team
  • Adobe Photoshop CC Класс в книге; Adobe Creative Team
  • Photoshop CS3 / CS4 WOW! Книга; Линни Дейтон и Кристен Гиллеспи
  • Восстановление и ретушь в Photoshop, третье издание; Катрин Эйсманн и др.

Писатель Биография

Элизабет Мотт — писатель с 1983 года. Мотт имеет большой опыт написания рекламных текстов для всего, от кухонной техники и финансовых услуг до образования и туризма. Она имеет степень бакалавра искусств и магистра искусств по английскому языку в Университете штата Индиана.

Как пакетно изменить размер в Photoshop

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

Шаг 1

Выберите «Файл»> «Сценарии»> «Обработчик изображений». В диалоговом окне процессора изображений показан простой четырехэтапный процесс изменения размера изображений.

Шаг 2

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

Шаг 3

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

Шаг 4

На шаге 3 диалогового окна выберите тип файла для сохранения. Для Интернета «Сохранить как JPEG» — очевидный выбор. Установите значение качества в диапазоне от 0 до 12, где 12 — самое высокое качество, а 0 — самое низкое. Для лучшей цветопередачи в Интернете выберите «Преобразовать профиль в sRGB» и убедитесь, что установлен флажок «Включить профиль ICC в нижней части диалогового окна», чтобы профиль был сохранен с изображением.

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

Размеры ширины и высоты не обязательно должны быть одинаковыми, поэтому вы можете, например, указать ширину 400 и высоту 300, и ни одно изображение не будет иметь ширину больше 400 или высоту больше 300.

Шаг 5

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

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

Чтобы просмотреть изображения с измененным размером, выберите «Файл»> «Открыть» и перейдите к папке, в которой вы указали изображения для сохранения.Если вы выбрали сохранение в формате JPEG, изображения будут находиться во вложенной папке с именем JPEG, для PSD — в папке с именем PSD и так далее.

Так что всякий раз, когда вам нужно изменить размер большого количества изображений для загрузки в Интернет, например, скрипт Photoshop Image Processor делает эту работу практически безболезненной.

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

Если вам нравится делиться своими фотографиями в Интернете, будь то на Facebook или в собственном блоге, вы должны узнать, как правильно изменять размер изображений в Photoshop.Хотя ваша камера может делать фотографии с очень высоким разрешением, всегда рекомендуется уменьшать размер или «уменьшать выборку» этих изображений не только потому, что большинство веб-сайтов не принимают большие изображения, но и потому, что уменьшение этих изображений на самом деле сделать их лучше, если все сделано правильно. В этом кратком руководстве я покажу вам, как правильно изменять размер изображений в Photoshop. Я видел, как люди использовали самые разные техники, когда дело дошло до изменения размера изображений в Photoshop. Приведенный ниже метод — это то, как я это делаю лично, и он отлично работает для меня, по крайней мере, на основе ваших отзывов.Вы можете применить эту технику к любой фотографии — будь то портрет или широкий пейзаж.

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

1) Зачем изменять размер / уменьшать размер изображений?

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

2) Рабочий процесс изменения размера изображения

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

  1. Импорт изображений в Lightroom
  2. Внесите необходимые корректировки в изображение, размер которого я хочу изменить
  3. Откройте изображение в Photoshop
  4. Очистите изображение (частицы пыли сенсора, нежелательные объекты и т. д.) с использованием точечного исцеления и других инструментов
  5. Выполните дополнительные настройки изображения, такие как усиление контрастности, осветление и затемнение, уровни и кривые и т.д.
  6. Выполните один проход повышения резкости на 50-75% (Unsharp Mask) — этот шаг необходим только в том случае, если вы будете использовать изображение с высоким разрешением для печати. ​​
  7. Понизьте разрешение изображения до целевого разрешения (целевое разрешение обычно составляет 1024 пикселя. шириной по горизонтали и 500 пикселей по вертикали)
  8. Выполните еще один проход повышения резкости на 25-50% (Unsharp Mask)
  9. Экспорт изображения в цветовом профиле sRGB

Pro cess может показаться сложным, но на самом деле это не так.Я делаю это не с каждым изображением — только с изображениями, которые я хочу продемонстрировать (например, при публикации обоев и т. Д.). Все остальное обрабатывается очень просто — просто экспортируется прямо из Lightroom.

3) Процесс изменения размера изображения

  1. Во-первых, давайте откроем нашу фотографию в Photoshop, перейдя в File-> Open и выбрав фотографию, которую мы хотим отредактировать:

    Убедитесь, что вы выбрали файл с полным разрешением, а не версию с ранее измененным размером . Если вы используете Lightroom, просто щелкните правой кнопкой мыши целевое изображение и выберите «Правка» -> «Открыть в Photoshop».Я предполагаю, что вы уже поработали над своей фотографией и отрегулировали ее экспозицию, уровни, насыщенность и т. Д. (Camera RAW или Lightroom). Всегда следите за тем, чтобы редактировать проблемные области в полном разрешении, поэтому делайте это либо с помощью встроенных инструментов Lightroom, либо в Photoshop. Я предпочитаю последнее, когда знаю, что буду работать в Photoshop.

  2. После редактирования изображения с полным разрешением запустите один проход шумоподавления. Я предпочитаю процесс выборочного шумоподавления, который убирает шум только в проблемных местах.Если вы не знаете, как правильно уменьшить шум, см. Мой учебник по шумоподавлению. Я предпочитаю использовать коммерческие инструменты, такие как Nik Software Dfine, для избирательного шумоподавления, потому что они делают это намного чище и дают наилучшие результаты. Если у вас нет коммерческого инструмента для этого, воспользуйтесь встроенным в Lightroom инструментом шумоподавления. Я считаю, что он работает лучше, чем фильтр «Уменьшение шума» в Photoshop. Вот скриншот программы Nik Software Dfine для уменьшения шума:

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

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

    Обязательно примените хорошую технику повышения резкости к изображению с высоким разрешением. Хотя коммерческие инструменты отлично подходят для этого шага, встроенные фильтры Photoshop, такие как «Маска нерезкости» и «Умная резкость», тоже отлично работают.Здесь я использую повышение резкости 75% с радиусом в 1 пиксель:

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

  4. Теперь мы находимся на очень важном этапе — мы будем понижать дискретизацию изображения, чтобы снизить его разрешение. Для этого перейдите в Image-> Image Size, и вы увидите следующее диалоговое окно:

    На этом этапе вы должны выбрать целевое разрешение.Я лично экспортирую 1024 пикселя в ширину, но вам может потребоваться экспорт меньшего или большего размера (в зависимости от того, что вы хотите с этим делать). Обязательно установите флажок «Сохранять пропорции» внизу. Теперь введите размер целевого пикселя в поле «Ширина», выбрав «пиксели» рядом с ним. По мере ввода ширины вы увидите, что высота автоматически изменится на меньшее число. Для меня Photoshop автоматически выбрал «681», как показано ниже:

    Следующая большая задача — выбрать метод передискретизации.В самом низу экрана вы должны увидеть выпадающий список со следующими вариантами: Ближайшее соседство, Билинейный, Бикубический, Бикубический сглаживающий и Бикубический более резкий. Я лично предпочитаю «бикубический (лучше всего для плавных градиентов)», потому что он отлично справляется с уменьшением шума без повышения резкости изображения (что мы уже сделали). Иногда я использую «бикубическую резкость» для некоторых изображений, но я предпочитаю «бикубическую резкость». Щелкните OK после того, как сделаете свой выбор.

  5. Теперь изображение намного меньше по размеру.Шум также должен полностью исчезнуть (при условии, что он не был слишком шумным для начала) благодаря методу бикубической понижающей дискретизации, который мы использовали на предыдущем шаге. Теперь пришло время немного повысить резкость изображения, что будет заключительным этапом процесса перед его извлечением. Еще раз, используйте либо хороший процесс выборочного повышения резкости, либо «Маску нерезкости» Photoshop, как я:

    Помните, что это ваш последний шаг, чтобы ваше изображение выглядело хорошо, поэтому будьте очень осторожны с его резкостью. Выберите область изображения с наибольшей детализацией и поиграйте с настройкой резкости «Amount».Я установил свой на «50%», и этого было достаточно, чтобы выделить нужные мне детали. Я мог бы сделать «75%» с радиусом в 1 пиксель и все равно получить хороший результат, поэтому диапазон 50% -75%, кажется, отлично подходит для этого конкретного изображения. Однако все фотографии разные, поэтому вы можете использовать 25-75%. Убедитесь, что изображение не слишком резкое!

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

    Этот экран очень важен, потому что он управляет форматом, разрешением и другими важными вещами, которые будут встроены в ваше изображение. Сначала выберите JPEG в качестве формата. Я обычно устанавливаю качество «80%», что является хорошей целью для фотографий. Я считаю, что все, что ниже 70%, заметно ухудшает качество изображения, а все, что выше 80%, является излишним для Интернета. Убедитесь, что отмечены как «Оптимизированный», так и «Встроенный цветовой профиль».Размытие должно быть равно 0, а матовый не имеет значения (по умолчанию белый). Затем обязательно отметьте «Преобразовать в sRGB» — это нужно, чтобы цвета на фотографиях отображались правильно. Я также часто оставляю свои метаданные «Авторские права». Нажмите «Сохранить», выберите место для сохранения окончательного изображения, дайте ему имя и снова нажмите «Сохранить».

    Меня много спрашивали о настройке PPI (пикселей на дюйм), которую я использую для своих веб-фотографий. Используете ли вы Lightroom, Photoshop или любое другое программное обеспечение для обработки изображений, значение, которое вы используете для PPI, не имеет значения.Вы можете оставить любое значение (я считаю, что 72 по умолчанию), и вам не нужно ничего менять. Значение PPI важно только для печати — его изменение при экспорте изображений в Интернет приведет только к добавлению метаданных в файл и не повлияет на то, как они фактически отображаются на мониторе.

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

А вот еще одно изображение, обработанное таким же образом:

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

Как уменьшить размер файла JPEG в Photoshop CS5

Управление размерами файлов изображений важно, если вы работаете в Интернете. Google ценит скорость сайта при ранжировании веб-страниц, и большие изображения являются большим фактором, способствующим этой скорости. Поэтому вам может быть интересно, как уменьшить размер файла в Adobe Photoshop CS5.

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

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

Как уменьшить размер файла в Adobe Photoshop CS5

  1. Щелкните «Файл».
  2. Выберите «Сохранить для Интернета и устройств».
  3. Выберите тип файла.
  4. Настройте качество.
  5. Нажмите «Сохранить».

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

Как уменьшить размер файла JPEG с помощью Photoshop CS5 (Руководство с изображениями)

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

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

Шаг 1. Щелкните Изображение в верхней части окна, затем щелкните Размер изображения.

Шаг 2: Убедитесь, что флажок слева от «Сохранить пропорции» установлен в нижней части окна.

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

Шаг 3: Щелкните Файл в верхней части окна, затем щелкните Сохранить как.

Шаг 4. Введите имя файла в поле «Имя файла», затем щелкните раскрывающееся меню справа от «Форматировать» и выберите параметр «JPEG».По завершении нажмите «Сохранить».

Шаг 5. Щелкните ползунок в центре окна, чтобы выбрать другое качество изображения.

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

Как использовать сохранение для Интернета и устройств в Photoshop CS5 (Руководство с изображениями)

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

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

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

В более новых версиях Adobe Photoshop может не быть опции «Сохранить для Интернета и устройств». Однако вы все равно можете использовать сочетание клавиш Ctrl + Alt + Shift + S, чтобы открыть параметр «Сохранить для Интернета». Вы также можете найти его в меню «Файл»> «Экспорт».

Дополнительные источники

Мэтью Берли пишет технические руководства с 2008 года.Его сочинения появились на десятках различных веб-сайтов и были прочитаны более 50 миллионов раз.

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

Его основные писательские темы включают iPhone, Microsoft Office, Google Apps, Android и Photoshop, но он также писал и на многие другие технические темы.

Отказ от ответственности: Большинство страниц в Интернете содержат партнерские ссылки, в том числе некоторые на этом сайте.

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

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

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

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

Преимущества форматирования изображений

Во-первых, зачем вам форматировать изображения? Каковы преимущества? Оптимизация изображений для повышения производительности дает множество преимуществ. Согласно HTTP Archive, по состоянию на ноябрь 2018 года изображения составляют в среднем 21% от общего веса веб-страницы. Поэтому, когда дело доходит до оптимизации вашего сайта WordPress, после видеоконтента изображения — это первое, с чего вам следует начать!

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

Среднее количество байтов на страницу (КБ)

Вот основные преимущества.

  • Это улучшит скорость загрузки вашей страницы (см. Наш пример ниже, чтобы узнать, насколько это влияет на вашу скорость). Если ваша страница загружается слишком долго, ваши посетители могут устать ждать и перейти к чему-то другому. Дополнительные сведения об оптимизации времени загрузки страницы см. В нашем подробном руководстве по оптимизации скорости загрузки страницы.
  • В сочетании с отличным плагином SEO для WordPress он улучшает ваше SEO. Ваш сайт будет занимать более высокое место в результатах поиска. Большие файлы замедляют работу вашего сайта, а поисковые системы ненавидят медленные сайты. Google также может быстрее сканировать и индексировать ваши изображения для поиска изображений Google. Хотите узнать, какой процент вашего трафика поступает из поиска картинок Google? Вы можете использовать плагин или сегмент Google Analytics для WordPress, чтобы проверить поисковый трафик изображений Google.
  • Создание резервных копий будет быстрее.
  • Файлы изображений меньшего размера используют меньшую полосу пропускания. Сети и браузеры это оценят.
  • Требуется меньше места для хранения на вашем сервере (это зависит от того, сколько эскизов вы оптимизируете)

Изображения составляют в среднем 21% от общего веса веб-страницы. 😮 Оптимизируйте их! Нажмите, чтобы твитнуть

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

Основная цель форматирования изображений — найти баланс между минимальным размером файла и приемлемым качеством.Практически все эти оптимизации можно выполнить несколькими способами. Один из самых популярных способов — просто сжать их перед загрузкой в ​​WordPress. Обычно это можно сделать с помощью таких инструментов, как Adobe Photoshop или Affinity Photo. Некоторые из этих задач также могут быть выполнены с помощью плагинов, о которых мы подробнее поговорим ниже.

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

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

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

  • PNG — обеспечивает более высокое качество изображения, но также имеет больший размер файла. Был создан как формат изображения без потерь, хотя он также может быть с потерями.
  • JPEG — использует оптимизацию с потерями и без потерь. Вы можете настроить уровень качества для получения хорошего баланса качества и размера файла.
  • GIF — использует только 256 цветов. Это лучший выбор для анимированных изображений. Он использует только сжатие без потерь.

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

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

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

Низкое сжатие (высокое качество) JPG — 590 КБ

Высокое сжатие (низкое качество) JPG — 68 КБ

Как видите, размер первого изображения выше составляет 590 КБ. Это довольно много для одной фотографии! Как правило, лучше всего, чтобы общий вес веб-страницы не превышал 1–2 МБ.590 КБ уже будет четвертью от этого. Второе изображение явно ужасно выглядит, но тогда оно всего 68 Кбайт. Что вы хотите сделать, так это найти золотую середину между степенью сжатия (качеством) и размером файла.

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

Среднее сжатие (отличное качество) JPG — 151 КБ

Оптимизация с потерями и оптимизация без потерь

Также важно понимать, что вы можете использовать два типа сжатия: с потерями и без потерь.

Lossy — это фильтр, который удаляет часть данных. Это приведет к ухудшению качества изображения, поэтому вам нужно быть осторожным с тем, насколько уменьшить изображение. Размер файла можно значительно уменьшить. Вы можете использовать такие инструменты, как Adobe Photoshop, Affinity Photo или другие редакторы изображений, чтобы настроить параметры качества изображения.В приведенном выше примере используется сжатие с потерями.

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

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

Инструменты и программы для оптимизации изображений

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

Сжатие фото в Affinity Photo

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

Масштабирование изображений

Раньше было очень важно загружать изображения для масштабирования и не позволять CSS изменять их размер. Однако это уже не так важно, поскольку WordPress 4.4 теперь поддерживает адаптивные изображения (не уменьшенные с помощью CSS).По сути, WordPress автоматически создает несколько размеров каждого изображения, загруженного в медиатеку. Включая доступные размеры изображения в атрибут srcset , браузеры теперь могут выбирать для загрузки наиболее подходящий размер и игнорировать другие. См. Пример того, как на самом деле выглядит ваш код ниже.

Подпишитесь на информационный бюллетень

Мы увеличили наш трафик на 1187% с помощью WordPress.

Мы покажем вам, как это сделать.

Присоединяйтесь к 20 000+ другим, кто получает нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

Пример адаптивного изображения

srcset в коде

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

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

Настройки мультимедиа WordPress

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

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

Очистите медиабиблиотеку

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

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

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

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

Однако важно, чтобы вы не полагались исключительно на сами плагины. Например, вам не следует загружать изображения размером 2 МБ в медиатеку WordPress.Это может привести к очень быстрому израсходованию дискового пространства вашего веб-хоста. Лучший способ — заранее быстро изменить размер изображения в инструменте редактирования фотографий, а затем загрузить его и использовать один из следующих плагинов, чтобы уменьшить его еще больше.

Оптимизатор изображения Imagify

Плагин Imagify Image Optimizer

Imagify создан той же командой, которая разработала WP Rocket, с которым большинство из вас, вероятно, знакомо. Он совместим с WooCommerce, NextGen Gallery и WP Retina. Он также имеет функцию массовой оптимизации, и вы можете выбирать между тремя различными уровнями сжатия: нормальным, агрессивным и ультра.Он также имеет функцию восстановления, поэтому, если вы недовольны качеством, вы можете одним щелчком восстановить и повторно сжать на уровне, который лучше соответствует вашим потребностям. Есть бесплатная и премиум версия. Вы ограничены квотой 25 МБ изображений в месяц с бесплатной учетной записью.

С помощью этого плагина можно также избавиться от исходного изображения и изменить размер больших изображений.

Изменение размера изображений в Imagify

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

Оптимизатор изображения ShortPixel

Плагин ShortPixel

ShortPixel Image Optimizer — это бесплатный плагин, который будет сжимать 100 изображений в месяц и сжимать файлы нескольких типов, включая PNG, JPG, GIF, WebP и даже файлы PDF. Он будет выполнять сжатие изображений как с потерями, так и без потерь. Он преобразует CMYK в RGB. Он переносит ваши изображения и эскизы в облако для обработки, а затем возвращает их на ваш сайт для замены оригиналов.Он создает резервную копию исходных файлов, поэтому вы можете вручную восстановить их, если хотите. Он будет массово конвертировать файлы галереи. Нет ограничений на размер файла.

Optimole

Плагин Optimole

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

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

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

EWWW Image Optimizer Cloud

Плагин EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud поможет вам сделать ваши изображения меньше, а ваш сайт быстрее и проще при запуске.Без ограничений по размеру и большой гибкости вы можете использовать настройки по умолчанию или полностью настроить плагин по своему вкусу. Все пользователи EWWW IO могут использовать Bulk Optimizer для сжатия своих существующих изображений или использовать режим списка библиотеки мультимедиа, чтобы выбирать определенные изображения для сжатия.

Дополнительные папки можно сканировать, чтобы убедиться, что каждое изображение на вашем сайте должным образом оптимизировано. EWWW IO даже позволяет конвертировать изображения в форматы следующего поколения, такие как WebP, или находить лучший формат изображения с опциями многоформатного преобразования.Сжатие изображений начинается всего с 0,003 доллара США за изображение.

API сжатия премиум-класса позволяет вывести сжатие на совершенно новый уровень без ущерба для качества, что открывает доступ к сжатию PDF и включает удобные 30-дневные резервные копии изображений. Функция ExactDN, стоимость которой начинается с 9 долларов в месяц, обеспечивает автоматическое сжатие (без необходимости сжатия на стороне сервера), автоматическое изменение размера и все преимущества CDN для более быстрых результатов и даже большей производительности для устройств любого размера.

Optimus Image Optimizer

Плагин Optimus Image Optimizer

Оптимизатор изображений Optimus WordPress использует сжатие без потерь для оптимизации ваших изображений.Без потерь означает, что вы не увидите потери качества. Он поддерживает WooCoomerce и мультисайты, а также имеет приятную функцию массовой оптимизации для тех, у кого уже есть большие библиотеки мультимедиа. Он также совместим с плагином WP Retina WordPress. Есть бесплатная и премиум версия. В премиум-версии вы платите один раз в год и можете сжимать неограниченное количество изображений. Если вы объедините его с их плагином Cache Enabler, вы также можете погрузиться в изображения WebP, который является новым легким форматом изображений от Google.

WP Smush

Плагин WP Smush

WP Smush имеет как бесплатную, так и премиум-версию. Это уменьшит скрытую информацию из изображений, чтобы уменьшить размер без снижения качества. Он будет сканировать изображения и уменьшать их, когда вы загружаете их на свой сайт. Он также будет сканировать изображения, которые вы уже загрузили, и уменьшать их. Он может одновременно загрузить до 50 файлов. Вы также можете вручную смазать, если хотите. Он сместит типы изображений JPEG, GIF и PNG. Размер файла ограничен 1 МБ.

  • Он совместим с некоторыми из самых популярных плагинов медиа-библиотек, такими как WP All Import и WPML.
  • Вся оптимизация изображений выполняется с помощью методов сжатия без потерь, что обеспечивает высокое качество изображения.
  • Неважно, в каком каталоге вы сохраняете изображения. Smush находит и сжимает их.
  • Smush имеет возможность автоматически устанавливать ширину и высоту для всех изображений, поэтому все ваши изображения будут изменены до одинаковых пропорций.

TinyPNG (также сжатые файлы JPG)

Плагин TinyPNG

TinyPNG использует сервисы TinyJPG и TinyPNG (бесплатная учетная запись позволяет сжимать около 100 изображений в месяц) для оптимизации изображений JPG и PNG.Он автоматически сжимает новые изображения и выполняет массовое сжатие существующих изображений. Он преобразует CMYK в RBG для экономии места. Он сжимает изображения JPEG до 60% и изображения PNG до 80% без видимой потери качества изображения. У него нет ограничения на размер файла.

ImageRecycle

ImageRecycle — плагин для оптимизации изображений и PDF

Плагин ImageRecyle — это автоматический оптимизатор изображений и PDF-файлов. Этот плагин ориентирован не только на сжатие изображений, но и на файлы PDF.Одна действительно удобная функция — это возможность установить минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 КБ, вы можете автоматически исключить их из сжатия. Это гарантирует, что изображения и файлы никогда не будут слишком сильно сжаты. Он также включает массовую оптимизацию и автоматическое изменение размера изображения. Примечание. У них есть бесплатная 15-дневная пробная версия, но это услуга премиум-класса, и изображения загружаются и сжимаются с помощью их серверов. Плата взимается не за месяц, а за общее количество сжатых изображений, начиная с 10 долларов за 10 000.

Оптимизация изображений для Интернета Пример использования

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

Несжатые файлы JPG

Сначала мы загрузили на наш тестовый сайт 6 несжатых файлов JPG, каждый размером более 1 МБ. (См. Исходные файлы JPG без сжатия). Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости, общее время загрузки составило 1.55 секунд, а общий размер страницы составил 14,7 МБ.

Тест скорости с несжатыми JPG-файлами

Сжатые файлы JPG

Затем мы сжимали файлы JPG с помощью плагина Imagify WordPress, используя «агрессивную настройку». (См. Новые сжатые файлы JPG, которые по-прежнему выглядят так же красиво). Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости, общее время загрузки сократилось до 476 мс, а общий размер страницы — до 2,9 МБ. Общее время загрузки сократилось на 54.88%, а размер страницы уменьшился на 80,27%.

Тест скорости со сжатыми файлами JPG

Практически нет другой оптимизации, которую вы можете сделать на своем сайте, которая позволила бы вам сократить время загрузки более чем на 50%. Вот почему оптимизация изображений так важна, что весь процесс, описанный выше, был полностью автоматизирован плагином. Это невмешательский подход к более быстрому сайту WordPress. Единственная другая радикальная оптимизация, которую вы могли бы сделать, — это изменить хосты WordPress. Многие клиенты, которые переезжают в Kinsta, видят увеличение скорости более чем на 45%.Представьте себе, что вы переходите в Kinsta и оптимизируете свои изображения!

Оптимизируя изображения, независимо от того, используете ли вы инструмент для редактирования фотографий или плагин WordPress, вы также можете исправить предупреждение «Оптимизировать изображения», которое появляется в Google PageSpeed ​​Insights (как показано ниже).

PageSpeed ​​Insights Предупреждение об оптимизации изображений

Если у вас есть другие предупреждения об оптимизации от инструментов тестирования скорости, обязательно ознакомьтесь с нашим сообщением в Google PageSpeed ​​Insights и нашим подробным пошаговым руководством по Pingdom.

Мы применили наши знания об эффективном управлении веб-сайтами в большом масштабе и превратили их в электронную книгу и видеокурс.Нажмите здесь, чтобы загрузить Руководство по управлению 40+ сайтами WordPress от 2020 года!

Использование SVG

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

  • SVG автоматически масштабируются как в браузерах, так и в инструментах редактирования фотографий. Это мечта веб-дизайнеров и графических дизайнеров!
  • Google индексирует SVG так же, как PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
  • SVG

  • традиционно (не всегда) меньше по размеру, чем PNG или JPG. Это может ускорить загрузку.

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

JPG (оптимизированный размер: 81,4 КБ)

Изображение JPG

PNG (оптимизированный размер: 85,1 КБ)

Изображение PNG

SVG (оптимизированный размер: 6,1 КБ)

Изображение SVG

Как вы можете видеть выше, SVG — это уменьшение размера файла на 92.51% по сравнению с JPG. А если сравнивать с PNG, 92,83%. Ознакомьтесь с нашим руководством о том, как использовать SVG на своем сайте WordPress.

Лучшие Лрактики

Вот несколько общих рекомендаций по оптимизации изображений для Интернета:

  • Если вы используете плагин WordPress, используйте тот, который сжимает и оптимизирует изображения извне на своих серверах. Это, в свою очередь, снижает нагрузку на ваш собственный сайт.
  • По возможности используйте векторные изображения вместе с PNG и JPG.
  • Используйте CDN, чтобы быстро предоставлять свои изображения посетителям со всего мира.
  • Удалите ненужные данные изображения.
  • Обрежьте пустое пространство и воссоздайте его, используя CSS для заполнения.
  • Максимально используйте эффекты CSS3.
  • Сохраните изображения в нужных размерах. Хотя помните, что WordPress теперь поддерживает адаптивные изображения, чтобы обслуживать их, не изменяя их размер с помощью CSS.
  • Всегда используйте формат файла .ico для вашего значка.
  • Используйте веб-шрифты вместо размещения текста в изображениях — они выглядят лучше при масштабировании и занимают меньше места.
  • Используйте растровые изображения только для сцен с большим количеством форм и деталей.
  • Уменьшите битовую глубину до меньшей цветовой палитры.
  • По возможности используйте сжатие с потерями.
  • Поэкспериментируйте, чтобы найти лучшие настройки для каждого формата.
  • Используйте GIF, если вам нужна анимация. (но сжимайте ваши анимированные GIF-файлы)
  • Используйте PNG, если вам нужна высокая детализация и высокое разрешение.
  • Используйте JPG для общих фотографий и снимков экрана.
  • Удалите все ненужные метаданные изображения.
  • Максимально автоматизируйте процесс.
  • В некоторых случаях может потребоваться отложенная загрузка изображений для ускорения рендеринга первой страницы.
  • Сохраняйте изображения как «оптимизированные для Интернета» в таких инструментах, как Photoshop.
  • Используйте WebP в Chrome для обслуживания изображений меньшего размера.

Не забудьте оптимизировать свои изображения, иначе ваш сайт WordPress может работать медленно. И вы знаете, как неприятно «медленно»! 🐌Нажмите, чтобы написать твит

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