Как сделать сжатие в фотошопе
Как уменьшить изображение в фотошопе без потери качества
Друзья, привет. Многие из нас ведут блоги, или выкладывают периодически фотографии на сайтах. И я тоже постоянно сталкиваюсь с проблемой веса фотографий. И сегодня хочу поделиться своим опытом, и расскажу как уменьшить изображение в фотошопе без потери качества.
Поскольку у меня блог про тему фотографии, то фоток на моем сайта предостаточно, что только добавляет мне вопросов оптимизации фотографий.
В начале
Обычно перед тем, как выложить статью на блоге, я все изображения загружаю в фотошоп, и там их уменьшаю. Делаю я это через функцию «Сохранить для веб», или горячими клавишами Shift+Ctrl+Alt+S.
С виду много клавиш, которые нужно зажать, но на практике получается очень удобно, если поставить большой палец на Alt, мизинец на Ctrl, безымянный на Shift, ну и указательный на S. Получилось? Видите, как просто.
Недавно я выкладывал статью про самые дорогие мотоциклы в мире, и вот у меня так было в фотошопе:
Если вы обратите внимание, то весит эта фотография самого мотоцикла 2,15 Мб.
Понятно, что в таком виде на сайт выкладывать ее совершенно не нужно. Это огромный вес для интернета. Нажимаем наши волшебные клавиши Shift+Ctrl+Alt+S, и у нас открывается вот такое окошко.
Параметры сохранения
Давайте разбираться, где какие параметры, и на что нужно обратить внимание, чтобы сохранить картинку в хорошем качестве, и при этом уменьшить ее размер.
Как вы видите, фотошоп уже сжал фото с 2,15 Мб до 300 Кб. И это уже очень хорошо. Но обычно я не использую в своем блоге изображений весом больше 200 кб.
И то это редкий случай, когда нужно показать красивую фотографию в полном размере, как например, фотографии в пресетах Лайтрум, где нужно показать красоту обработки фильтра.
А в обычных статьях блога сейчас стал делать фотки где-то в районе 100кб плюс минус 20-30кб. Раньше, в первых статьях старался вообще делать где-то 50-70кб, но это сильно искажало картинку, и теперь стараюсь делать побольше.
Формат
Давайте теперь более подробно разбираться в тонкостях этих настроек, и начнем мы с формата. Как я уже сказал, где-то можно сохранить в jpeg, где-то в png.
Для себя я вывел такое правило, что если есть изображение, такое как фотография, картинка, то лучше сохранять в jpeg, и просто уменьшить размер, и уменьшить качество. В нашем случае можно сделать вот так:
Мы делаем формат jpeg, качество 80, ширину убавляем до 800, и видим, что наше фото уменьшилось в весе, и стало 146 кб. Это для вас приемлемо? На сайте она будет выглядеть вот таким образом, т.е. полностью в ширину контекстной части.
Вполне качественно, хорошо видны детали, и в целом очень приемлемый вариант для блога, если нужно показать качественно. Я думаю, в случае с мотоциклами, то фото должны быть только хорошего качества. Вы согласны?
Если для вас это много по весу, давайте попробуем сделать меньше размер, не 800px, а сделаем 700px, смотрим что у нас получается в самой программе.
Вы уже видите, что вес уменьшился, и стал уже 117 кб. Длину фото мы сделали 700px. Вот как эта фотография будет выглядеть у вас в блоге в контексте записи:
Чуть меньше, чем предыдущее фото, и тем не менее, вполне себе здорово смотрится на сайте, и красота мотоцикла видна в полной мере.
Кстати, разница по ширине в статье совсем не заметна. Я тоже для себя кое-что вынесу из этого урока! Будем еще меньше делать фото? Давайте сделаем в настройках 600px. Мне кажется это вполне еще приемлемо. Вот так будет в программе:
И мы уже видим, что при размере в 600px, вес стал 91кб. Совсем не много, мне кажется, для любого сайта. И вот как эта фотка будет выглядеть в вашей заметке:
Я больше не буду уменьшать, вы сами это можете сделать и понять какой вариант размера вам больше подходит для вашего ресурса.
Давайте перейдем к другому параметру, и посмотрим как он отражается на самой фотографии, и на сколько можно уменьшать эти настройки.
Качество
Вы, наверно, заметили, что здесь все настройки очень переплетены между собой. Выше был заголовок формат, а я говорил про размер, потому что тут сложно говорить только о чем-то одном, это сразу отражается и на другом.
Я думаю, тут важно понять принцип, и он не такой сложный, как может показаться на первый взгляд, но небольшая практика нужна. Давайте будем двигать ползунок, который отвечает за качество.
Как мы видели, размеры 800px и 700px совсем не отличаются по тому, как они выглядят на сайте. Поэтому, я предлагаю двигать качество на размере 600px.
Это вполне себе нормальная картинка для блога, и если вам нужно сделать ее еще меньше по весу, то лучше проводить эксперименты с этим размером.
Качество 80% у нас уже было, поэтому давайте уменьшим до 70%, и посмотрим что у нас получится. В программе это будет выглядеть вот так:
Смотрим сколько у нас теперь весит картинка? Только 71Кб! Это очень хороший результат для сжатия изображения. И что же мы будем видеть на сайте с такими параметрами? А вот что!
Тут уже на любителя, и кто как видит. Для меня, это не очень хорошая фотка, а для вас — смотрите сами. Давайте я еще уменьшу на 10% качество, раз уже мы двигаемся в эту сторону и посмотрим что будет происходить. Ставим параметр 60% на 600px. Окно программы будет вот такое:
Как видим, весить она стала всего 57Кб. Да, теперь не будет больших скачков в весе фотографии, и все будет уменьшаться по маленьким параметрам. Ну а в записи с такими параметрами мы увидим вот такую фотографию:
Тут важно показать направление для экспериментов и подбора нужных значений. И я его показал. А дальше можно делать все что вам захочется.
Можно же еще немного кадрировать саму картинку, чуть-чуть подрезать сверху и снизу, что я и сделал у себя в статье про самые дорогие мотоциклы в мире. Да, это тоже хороший вариант сделать уменьшение изображения, в том числе и по весу.
Jpeg или png
И остался у нас один вопрос, о котором хотел бы рассказать в данной статье. Когда использовать jpeg, а когда png. Даже в рамках этой статьи, я использовал и тот и другой формат.
А секрет вот в чем, я уже говорил о нем. Если вам нужно показать картинку, то вы делаете jpeg, если вам нужно показать цифры, или скриншот программы, то вы делаете png.
Именно так и я делал выше. Если вы внимательно поглядите на сам мотоцикл в скриншотах программы, где стоят настройки, то вы увидите очень грубые градиенты перехода цвета. К примеру на зеленых деталях мотоцикла. Посмотрите внимательно!
Конечно, когда мы следим за цифрами, допустим в окне программы, то сама картинка уходит на второй план, и все внимание на показатели, с которыми мы работаем.
Но если сделать png для самой картинки, то я могу показать что будет. Давайте сравним как будет выглядеть png и jpeg с одними и теми же настройками всего остального. Вот глядите, ставим в программе 600px и ставим формат png:
Как видим такое изображение будет весить 108 Кб. Это примерно 700px формата jpeg c 80% качества. И что теперь мы будем видеть на сайте:
Вполне себе рабочий вариант, и можно так делать. Но в данном случае, лучше будет сделать jpeg, потому что он будет весить меньше и качество будет лучше.
А вот рабочий процесс программы делаю по другому. Допустим, я выставляю разные настройки для изображения, делаю скрин этого процесса. А потом для того, чтобы выложить это на сайте, сохраняю этот скрин в png, причем размер я не трогаю:
Т.е. вы видите размер у меня тут на этой картинке 1135 px, и так видно хорошо все цифры и все параметры. Весит 137Кб такая картинка, но если сделать меньше, то будет все очень плохо видно.
В заключении
Вот на этом я думаю мы с вами закончим этот достаточно объемный и большой урок по фотошопу, и как тут можно уменьшить изображение для сайта.
Надеюсь, вам все было понятно. Для начала, я думаю, это достаточно заморочисто, но вот такой это вопрос. Пишите в комментарии, если у вас будут вопросы, отвечу на все.
Нужно немного практики, пробуйте разные варианты. Все еще зависит от самой фотки и её качества. Бывают качественные картинки приходится сжимать, а бывает и плохое качество. Тогда тоже нужно опытным путем подобрать настройки и выбрать наиболее приемлемые для вас.
Как сжать фото
В этой статье я расскажу вам о том, как оптимизировать изображения для веб. Вы узнаете как сжать фото, в том числе и без потери качества изображения.
Немаловажным фактором при работе с веб-графикой является ее вес. Чем меньше вес загружаемых картинок и других графических элементов, тем быстрее грузится сайт, тем менее вероятность ухода не дождавшихся загрузки сайта посетителей.
Web-разработчикам и владельцам сайтов нередко приходится искать компромисс между весом изображения и его качеством, это связано с тем, что при значительном уменьшении веса качество, как правило, страдает.
Многие веб-дизайнеры регулярно мучаются вопросом: как сжать фото так, чтобы сохранить его качество неизменным.
Существует несколько способов сжать фото
Это можно сделать программно — с помощью фотошопа или специализированных программ, а также с помощью онлайн сервисов, предназначенных для сжатия картинок.
Я расскажу о том, как сжать фото в фотошопе и при помощи онлайн сервиса jpegmini.com.
Сжимаем фото в фотошопе
С помощью фотошопа уменьшить вес фото мы можем следующим образом.
Открываем изображение в фотошопе. File–Open (Ctrl+О), выбираем картинку, жмем «Открыть». Далее открываем меню File – Save for web and devices.
В открывшемся окне в выпадающем списке выбираем формат файла JPEG (подойдет для любых картинок, если они не на прозрачном фоне).
В левом нижнем углу указан вес картинки в 100%качестве.
В строке «Qualty» (Качество) указано качество картинки вы процентном соотношении.
По умолчанию качество картинки = 100. Передвигая ползунок в строке «Qualty» влево, в сторону уменьшения, вы снижаете качество изображения, и одновременно, добиваетесь нужного сжатия веса изображения.
Изменение веса и качества картинки вы можете отслеживать в левом окне.
Когда вы достигнете баланса между качеством и весом изображения, нажмите «Save» и сохраните картинку в нужном месте на жестоком диске.
Я выставила качество 50%, вес картинки при этом уменьшился с 1,4 Мб до 783 Кб, т.е. примерно в 1,8 раз.
Данным способом действительно можно значительно уменьшить вес фото, однако, при этом и качество также пострадает.
А что если нам необходимо сохранить исходное качество изображения и одновременно максимально уменьшить вес фото?
Сжатие фото онлайн
В этом случае нам пригодится специализированный онлайн-сервис: http://www.jpegmini.com
Данного ресурс знает, как сжать фото без потери качества. Сервис абсолютно бесплатен и не требует регистрации и обладает понятным, удобным интерфейсом. Работать в нем легко:
1. Нажмите на кнопку«Try It Now»
2. В новом окне нажмите кнопку «Upload your photo»
3. Выберите на своем компьютере изображение, которое хотите сжать и нажмите «Открыть»
После того, как фото загрузилось, на странице появится изображение в исходном виде и оптимизированный вариант, при этом вы можете наглядно убедиться, что изменения качества после сжатия если и есть, то минимальны, визуально они отсутствуют вовсе.
Кроме того, указан первоначальный вес фото и вес после сжатия, а также во сколько раз произошло уменьшение веса по сравнению с оригиналом.
4. Для того, чтобы загрузить сжатую картинку обратно, нажмите «Download Photo» и выберите место для сохранения
Чтобы начать работать с этим ресурсом, регистрироваться необязательно, однако, бесплатная регистрация открывает еще больше возможностей для работы с фото. Вы можете загружать и сжимать несколько изображений, группировать их в альбомы и делиться ими с друзьями в соцсетях.
Тест сервиса
Я протестировала работу данного сервиса на двух разных картинках: большой 2560 х 1600 px весом 1,4 Мб и маленькой 240 х 156 px весом 17.8 Кб.
Результат бы следующим: большая картинка сжалась до 609кб — в 2,4 раза по сравнению с оригиналом, уменьшение же веса маленькой картинки было незначительным – всего 2Кб, однако и этого иногда бывает достаточно. Например, когда речь идет о flash-баннерах, где ограничения по весу для некоторых ресурсов составляет 25кб. Вот уж где значение имеет каждый лишний килобайт!:)
К каким выводам я пришла
Чем больше исходный вес изображения, тем больше выигрыш за счет его сжатия. Картинки с маленьким весом сжимаются не так сильно, как большие. Но все равно несколько килобайт у маленьких картинок убрать с помощью сервиса можно. Когда же речь идет о профессиональных фото в HD-качестве, думаю, здесь выигрыш в весе будет очень значительным. Уменьшить вес фото размером 8000-10000px теоретически возможно процентов на 60-80%. Можете поэкспериментировать.
Единственным минусом этого замечательного сервиса является ограничение по формату изображений. Картинки можно загружать только в JPEG. Другими словами, сжать объекты на прозрачном слое в формате PNG с помощью данного сервиса не представляется возможным. Для этого есть другой полезный сервис — punypng.com. Предлагаю вам самостоятельно ознакомиться с его возможностями, если интересно.
В этой статье мы с вами узнали, как сжать фото для последующего его использования в Интернете, как оптимизировать графику для веб, уменьшив вес фото.
Надеюсь, данная информация окажется полезной и пригодится вам в работе.
Как уменьшить вес фотографии
Но это не значит, что данные форматы не имеют преимуществ. Они содержат больше данных об изображении, чем файлы в формате jpeg, которые могут быть полезны при редактировании. Особенно если вы хотите детализировать теневые и световые участки на изображении.
Но как только изображение преобразуется в формат jpg, происходит незначительная потеря данных, за счет которых изображение уменьшается в весе, благодаря этому его можно легко пересылать по электронной почте или загружать в Интернет.
В качестве примера я использовал 2 изображения в формате tiff, размером 2736х3648 пикселей и весом 28,6 мегабайт. При сохранении я уменьшил размеры фото до 563х750 пикселей, вес фотографии уменьшился до 1,21Мб. Одно изображение было сохранено с помощью команды Сохранить как, а другое при помощи Сохранить для веб. При сохранении двух изображений в формате jpg качество сжатия было установлено на 9/12 для первого случая и 75/100%. В первом случае вес фото снизился до 246,1Кб, а во втором до 219,9Кб. Можно было бы ожидать, что если уменьшить вес фото, то оно будет выглядеть не так хорошо, но разница в качестве практически незаметна.
Давайте рассмотрим это практике.
Сохранить для веб
Увеличение масштаба
Jpeg, gif или png?
В правой части диалогового окна представлены настройки для сохранения изображений. В самом верхнем выпадающем списке вы можете выбрать один из пяти форматов: gif, jpeg, png-8, png-24 и wbmp. Каждый формат имеет свои преимущества, но наиболее широко используемым является формат jpg.
Качество
Настройки качества определяет степень сжатия файлов. Чем меньше значение качества, тем меньше вес файла. Если вам требуется хорошее качество изображения, то в параметре Качество не устанавливайте низкие значения. В данном случае я установил значение 75.
Опция Progressive (Прогрессивный)
При активной опции Progressive (Прогрессивный) загрузка файла будет происходить постепенно линия за линией, благодаря данной функции можно незначительно уменьшить размер файла, не потеряв его качество.
Размер изображения
Если вам необходимо настроить размеры сохраняемого файла, то вы можете увеличить или уменьшить значения ширины и высоты или изменить значение в процентах. Убедитесь, что у вас сохранены пропорции относительно ширины и высоты изображения. После того, как вы установили все настройки, нажмите OK. В открывшемся диалоговом окне дайте имя файлу, укажите путь для сохранения и нажмите Save (Сохранить). Ваш сохранённый файл готов к загрузке в Интернет.
Уменьшение изображения/картинки в Photoshop (4 способа)
Работая в интернете, мы довольно часто сталкиваемся с требованием загрузить фотографию, не превышающую определенный размер. Обычно современные сервисы выполняют эту операцию самостоятельно, но более старые сайты до сих пор заставляют посетителя ломать голову над тем, где и как ужать картинку до нужного размера. А еще маленькие картинки меньше весят, что иногда может быть важно, если вы фотограф или веб-дизайнер.
Поэтому потребность в поиске быстрого и эффективного метода уменьшения изображений является более актуальной, чем кажется.
Пожалуй, лучшая программа для удовлетворения этой потребности – Adobe Photoshop. В ней помимо этого есть тысячи других полезных функций, и одновременно со сжатием можно обрезать картинку, поменять её цвет, удалить ненужную часть и использовать бесконечный список других возможностей. Но в этой статье сосредоточимся на одном – на уменьшении картинки и его размера в Фотошопе.
Содержание: “Как уменьшить размер изображения в Фотошопе”
Нужно определиться с целью
На самом деле, операция сжатия – не чисто техническая проблема и имеет множество нюансов. Если просто довериться автоматическому сжатию, результат может получиться совсем не таким, какой вам нужен.
Для начала нужно определиться с целью сжатия. Если вы хотите поставить более легкую фотографию в свой профиль на интернет-сайте – нужно сохранять пропорции и хорошее качество, при этом можно обрезать ненужные части. Если вы работаете с определенной схемой – вам важна информация, но в таком виде, чтобы она просто оставалась считываемой с картинки, и высококачественная прорисовка может быть совсем не обязательной. Возможно, вы делаете снимки на профессиональный фотоаппарат, и их “чистый” вес составляет десятки мегабайт – в этом случае вам необходимо сжатие до приемлемых размеров, причем ни на качестве картинки, ни не ее содержании это отразиться никак не должно.
В любом случае, снижение итогового веса картинки будет полезным практически всегда, независимо от конечной цели. Photoshop предоставляет удобные инструменты для каждой из перечисленных операций и использует для этого передовые алгоритмы работы с данными. Если вы работаете через Photoshop – можете быть уверены, что лучшего результата вы не получите нигде.
Метод №1 – Кадрирование (Оставляем только нужное)
Если у вас установлена какая-либо версия Adobe Photoshop, можно начинать. Между разными версиями программы бывают значительные различия, но базовые операции остаются примерно одинаковыми, поэтому понять инструкцию сможет любой пользователь.
Первый шаг – непосредственно открытие картинки в программе. Мы выбрали для примера фото неотразимой Кейт Бекинсейл:
Однако иногда в списке выбираемых программ Фотошопа не будет, и в этом случае придется “Выбрать другое приложение”.
Появится диалоговое окно с выбором файла – в нем и выбирайте исходное изображение. Ту же операцию, кстати, можно сделать с помощью горячего сочетания клавиш Ctrl+O.
Первым делом можно удалить с картинки ненужные куски. При этом изображение останется прямоугольным, поэтому придется искать компромиссы. Для выполнения этих действий нужно выбрать инструмент “Рамка” – однако найти его на огромной панели инструментов может быть довольно трудно.
Для перехода к инструменту лучше всего нажать клавишу “С” – слева будет выделена группа инструментов для обрезания картинки. Нажмите на нее правой кнопкой и выберите самый первый из них – “Рамку”.
Нажимаем комбинацию клавиш Ctrl+A и поверх картинки появится прямоугольник, а по бокам и в углах – ползунки для изменения размера.
Передвигайте их до нужного результата и применяйте изменения.
Либо можно выделить нужную часть изображения, и тогда все лишнее отрежется самостоятельно.
Есть и другой способ – выделение нужной части картинки с помощью “Прямоугольной области”. Найдите соответствующий значок на панели инструментов или нажмите клавишу “M”.
Выделив необходимую область, выберите “Изображение” в меню наверху, а дальше – “Кадрировать”.
Результат нашего кадрирования:
Метод №2 – Через «Размер холста» (Задаем точный размер в пикселях)
Возможно, вам необходимо получить изображение четко заданного размера, при этом сохранив его масштаб. По сути, здесь будет происходить примерно то же самое, что и в предыдущем разделе, но с точным указанием пикселей или сантиметров, однако меньшим выбором оставшейся части изображения.
После этого появится окно редактирования, в котором вы можете задать размер картинки в любых возможных единицах, а также указать, какую сторону изображения оставить.
Метод №3 – Через “Размер изображения”
На предыдущих этапах мы удаляли с нашего изображения все лишнее. Теперь мы будем непосредственно менять его размер, уменьшая или увеличивая его масштаб.
Откройте меню “Изображение” еще раз и выберите пункт “Размер изображения” (Alt+Ctrl+I).
Здесь вы сможете явно прописать необходимые вам размеры, а вверху вы будете видеть конечный вес файла (размерность).
Саму размерность можно регулировать не только количеством пикселей или сантиметров, но и разрешением картинки. Чем оно меньше, тем изображение будет легче, но при этом будет теряться качество.
Метод №4 – Через окно сохранения
Работать с качеством картинки можно не только с помощью внутренних инструментов – на самом деле, достигнуть нужного эффекта можно через одно лишь окно сохранения файла. Вы откроете изображение в программе и сразу же сохраните его в другом формате, попутно задав нужные вам настройки.
В новых версиях последний пункт найти может быть не так просто, потому что он отмечен как устаревший, поэтому просто переходите к нему через сочетание Alt+Shift+Ctrl+S. Это довольно удобный способ, и в нашем примере мы будем работать именно через него.
После открытия окна “Сохранение для Web и устройств”, в рабочей области которого будет наше изображение. В правой будет богатый выбор настроек формата и цветов.
Поначалу разобраться может быть трудно, но назначение всех инструментов знать не нужно.
Для сжатия самым удобным является формат JPEG – выберите его в выпадающем меню под надписью “Набор”. После этого под меню выбора формата появится меню выбора качества – там вы сможете выбрать одну из пяти градаций. Под областью изображения при этом будет выводиться конечный вес (размер изображения).
Управлять размером можно и через явное задание размера: за это отвечают два текстовых поля внизу рабочей области.
По сути, этих инструментов достаточно, чтобы получить любой нужный результат.
Надеемся вам помогла эта статья. Если вы не знаете, как увеличить изображение, вам поможет наш другой урок: Как увеличить изображение в Photoshop