Как уменьшить размер файла png, сжатие пнг

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

Сохранить для веб

Для начала необходимо выбрать фотографию, вес которой вы хотите уменьшить. После этого перейдите в меню File > Save for Web (Файл — Сохранить для веб). В результате откроется диалоговое окно.

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

Увеличение масштаба

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

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

Jpeg, gif или png?

В правой части диалогового окна представлены настройки для сохранения изображений. В самом верхнем выпадающем списке вы можете выбрать один из пяти форматов: gif, jpeg, png-8, png-24 и wbmp. Каждый формат имеет свои преимущества, но наиболее широко используемым является формат jpg.

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

Качество

Настройки качества определяет степень сжатия файлов. Чем меньше значение качества, тем меньше вес файла. Если вам требуется хорошее качество изображения, то в параметре Качество не устанавливайте низкие значения. В данном случае я установил значение 75.

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

Опция Progressive (Прогрессивный)

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

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

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

Если вам необходимо настроить размеры сохраняемого файла, то вы можете увеличить или уменьшить значения ширины и высоты или изменить значение в процентах. Убедитесь, что у вас сохранены пропорции относительно ширины и высоты изображения. После того, как вы установили все настройки, нажмите OK. В открывшемся диалоговом окне дайте имя файлу, укажите путь для сохранения и нажмите Save (Сохранить). Ваш сохранённый файл готов к загрузке в Интернет.

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

Какой вариант выбрать, чтобы уменьшить вес фотографии — решать вам.

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

Сжатие с помощью Paint

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

При помощи стандартной утилиты Windows можно уменьшить размер JPG файла. Как это сделать:

1. Запускаем графический редактор Paint и открываем в нем требуемое изображение. Можно просто перетянуть фотографию в программу.

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

2. Итак, теперь выбираем в верхней панели пункт «Изменить размер». Также запустить подменю можно нажатием клавиш CTRL+W.

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

4. Нажимаем на значок «Сохранить», затем открываем фотографию обычным способом и смотрим ее размер. Он станет меньше примерно в 2 раза.

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

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

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

В нынешний век мобильных технологий оптимизация картинок в форматах PNG и JPG,JPEG стала снова актуальна, как это было актуальным в те времена, когда интернет только входил в нашу жизнь и был повсеместно медленным и диалапным. Мобильный интернет, конечно, не совсем корректно сравнивать с диалапом, но местами, где связь плохая, там и скорость доступа довольно маленькая. Да и в те времена пользователю было некуда деваться, и приходилось ждать загрузки страницы. Сейчас же интернет вырос, выбор сайтов большой. Пользователь стал капризным и нетерпеливым, и среднее время ожидания загрузки страницы сильно уменьшилось. Пользователю проще найти другой более шустрый сайт.
Да и поисковые гиганты навроде Google или Yandex начали обращать внимание на то, как быстро грузятся сайты, отдавая предпочтение в выдаче тем, что пошустрее. Не последнюю роль в этом играет и вес страницы, который, в свою очередь, сильно зависит от веса располагающихся на ней изображений. Довольно очевидно, что иметь компактные сжатые картинки выгодно всем. Поэтому здесь я хочу поговорить о том, как подготовить ваши PNG и JPG, JPEG файлы к заливке на хостинг.

Шаг 1. Открытие файла.

Запустив Фотошоп , в Меню программы выбираем Файл-Открыть в открывшимся Диалоговом окне находим требуемый файл и открываем его в Фотошопе.
Секреты Photoshop - Уменьшение и сжатие изображений

В начале

Обычно перед тем, как выложить статью на блоге, я все изображения загружаю в фотошоп, и там их уменьшаю. Делаю я это через функцию «Сохранить для веб», или горячими клавишами Shift+Ctrl+Alt+S.

С виду много клавиш, которые нужно зажать, но на практике получается очень удобно, если поставить большой палец на Alt, мизинец на Ctrl, безымянный на Shift, ну и указательный на S. Получилось? Видите, как просто.

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

Как уменьшить изображение в фотошопе без потери качества1Если вы обратите внимание, то весит эта фотография самого мотоцикла 2,15 Мб.

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

Понятно, что в таком виде на сайт выкладывать ее совершенно не нужно. Это огромный вес для интернета. Нажимаем наши волшебные клавиши Shift+Ctrl+Alt+S, и у нас открывается вот такое окошко.

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

Параметры ресамплинга | Photoshop

Автоматически

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

Сохранить детали (с увеличением)

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

Бикубическая (с увеличением)

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

Бикубическая (с уменьшением)

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

Бикубическая (более плавные градиенты)

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

По соседним пикселам (четкие края)

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

Билинейная

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

Метод №1 – Кадрирование (Оставляем только нужное)

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

Первый шаг – непосредственно открытие картинки в программе. Мы выбрали для примера фото неотразимой Кейт Бекинсейл:

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

Самый удобный способ – нажимайте на картинку правой кнопкой мыши и выбирайте пункт “Открыть с помощью” -> “Adobe Photoshop ..”.

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

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

Открывать картинку можно и через саму программу – это менее удобный, но более надежный способ. Откройте программу. Вверху будет меню – нажимайте на “Файл” -> “Открыть”.

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

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

Первым делом можно удалить с картинки ненужные куски. При этом изображение останется прямоугольным, поэтому придется искать компромиссы. Для выполнения этих действий нужно выбрать инструмент “Рамка” – однако найти его на огромной панели инструментов может быть довольно трудно.

Для перехода к инструменту лучше всего нажать клавишу “С” – слева будет выделена группа инструментов для обрезания картинки. Нажмите на нее правой кнопкой и выберите самый первый из них – “Рамку”.

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

Нажимаем комбинацию клавиш Ctrl+A и поверх картинки появится прямоугольник, а по бокам и в углах – ползунки для изменения размера.

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

Передвигайте их до нужного результата и применяйте изменения.

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

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

Есть и другой способ – выделение нужной части картинки с помощью “Прямоугольной области”. Найдите соответствующий значок на панели инструментов или нажмите клавишу “M”.

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

Выделив необходимую область, выберите “Изображение” в меню наверху, а дальше – “Кадрировать”.

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

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

Результат нашего кадрирования:

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

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

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

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

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

Шаг 2

После этого выберите команду File (Файл) — Save for Web & Devices…(Сохранить для веб и устройств):

Метод №2 – Через «Размер холста» (Задаем точный размер в пикселях)

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

Делается это с помощью инструмента “Размер холста”. Открыть его можно через “Изображение” -> “Размер холста” либо путем нажатия горячих клавиш Alt+Ctrl+C.

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

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

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

Can anyone tell the difference?

Excellent question! Let me give you a side by side comparison. Below are two photos of my cousin. The left image is saved as 24-bit PNG directly from Adobe Photoshop. On the right is the same image processed by TinyPNG. Spot any difference?

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

  • Допустим, Вы сохранили исходник, который размещена на прозрачном фоне.

Рыжий кот в Photoshop

  • Если попытаться сохранить её вышеуказанным способом, то фон будет залит сплошным белым цветом:

Фон за котом становится белым

  • Необходимо сверху изменить тип на PNG-8 или PNG-24:

Указываем формат PNG

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

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

maxresdefault.jpg

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

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

Вот где спрятался "Сохранить для Web"

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

Параметры экспорта изображения в Фотошоп СС 2017

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

Тристан

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

Изображение> Размер изображения> установите разрешение 72 ppi.

Обработка рисунков в Mac OS

Давайте рассмотрим процесс работы с изображениями на Mac, к примеру, рисунки отлично сожмёт стандартное приложение «Просмотр»: установка дополнительного ПО ни к чему, даже для пакетной обработки. Программа «Просмотр» на Маке знает, как изменить размер сразу нескольких фото.

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

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

к оглавлению ↑

Why did you create TinyPNG?

FILED UNDER : IT

admin
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: