Png: простое введение в особенности формата
Содержание:
- Пакетное сжатие фотографий
- Cжатие PNG без потери качества
- Как настроить сжатие png и jpg, jpeg на автомате
- How does it work?
- Конвертировать PNG в JPG без потери качества
- Как уменьшить вес картинки
- Как уменьшить размер файла jpg без потери качества
- Как уменьшить размер файла JPG ? 4 быстрых способа!
- Базовая оптимизация изображений
Пакетное сжатие фотографий
Если вам необходимо сжать большое количество фотографий, то вам не обязательно менять настройки для каждого снимка вручную. В программе FastStone Image Viewer есть функция «Пакетное преобразование», для того чтобы ее вызвать нажмите на клавишу F3.
В окне «Пакетное преобразование» есть два списка файлов. В левой части окна список файлов в текущей папке, а в правой части окна список файлов на преобразование. Вы можете добавлять или удалять файлы, которые вы хотите сжать, с помощью кнопок, которые находятся между этими двумя списками.
Для того чтобы изменить степень сжатия фотографии нажмите на кнопку «Установки» и в открывшемся окне укажите нужно значение.
Если вы хотите изменить разрешение снимка, то вам необходимо включить функцию «Изменить настройки» и нажать на кнопку «Дополнительно». В открывшемся окне нужно указать новое разрешение фотографий.
После того как вы указали все параметры нужно выбрать папку для сжатых фотографий. Для этого нажмите на кнопку «Выбрать».
Все, теперь можно запускать процесс пакетного сжатия фотографий.
Процесс сжатия может занять несколько минут. Это зависит от количества фотографий и производительности вашего компьютера.
Cжатие PNG без потери качества
Рассмотрим 3 программы для оптимизации PNG:
- Adobe Photoshop
- OptiPNG
- PNGOUT
Сравним их по качеству сжатия картинок. Сжимать будем nginx.png из предыдущего раздела. Вес оригинала 27,5 Кб.
PNG до сжатия
Cжатие PNG с помощью Adobe Photoshop
Первый в списке — хорошо известный всем фотошоп. Многофункциональный комбайн для дизайнера, который умеет почти всё, в том числе и сжимать изображения.
В фотошопе открываем Файл-Cохранить для Web либо используем комбинацию Alt+Shift+Ctrl+S
Сжимаем PNG в Adobe Photoshop
В результате получаем 22,7 Кб, т.е. сжали на 17,5%
PNG после сжатия в Adobe Photoshop
Использование OptiPNG для сжатия PNG
Как установить и пользоваться OptiPNG
Скачали .exe, залили в C:\Windows, взяли нужный PNG-файл, положили в какую нибудь папку. Теперь с помощью FAR Manager либо другого файлового менеджера с поддержкой консоли зашли в эту папку и ввели команду в консоль
optipng -o7 nginx.png
Команда заставляет сжать PNG в папке. Позже рассмотрим простой вариант, как делать сжатие в один клик.
Но сначала взглянем на результат.
Сжимаем PNG с помощью OptiPNG
Использование PNGOUT для сжатия PNG
Как установить и пользоваться PNGOUT
Всё точно так же, как и для OptiPNG. Скачиваете PNGOUT.exe, закидываете в C:\Windows, открываете в файловом менеджере, например, Far Manager папку с PNG, и в командной строке пишете
pngout nginx.png
Результат ниже
PNG после сжатия в PNGOUT
Результат 23,4 Кб, т.е. удалось сжать на 15%. Весьма неплохо.
Как быстро сжать PNG в OptiPNG и PNGOUT
Создаёте файл png.reg и записываете туда данные для реестра
Windows Registry Editor Version 5.00 @="Run OptiPNG on Folder" @="cmd.exe /c \"TITLE Running OptiPNG on %1 && FOR /r \"%1\" %%f IN (*.png) DO optipng -o7 \"%%f\" \"" @="Run PNGOUT on Folder" @="cmd.exe /c \"TITLE Running PNGOUT on %1 && FOR /r \"%1\" %%f IN (*.png) DO pngout \"%%f\" \""
Потом запускаете этот файл и записываете данные в реестр Windows.
Теперь при клике по папке с файлами PNG, которые нужно сжать, выбираете нужные вам команды, сжатие произойдёт автоматически и для всех изображений разом.
Чтобы удалить всё из контекстного меню, записываете нижеследующий код в png.reg и запускаете его
Windows Registry Editor Version 5.00
Как настроить сжатие png и jpg, jpeg на автомате
Если вы дочитали до этого раздела, но всё ещё недовольны предложенными вариантами, предлагаю вам самим собрать портативный комбайн — сервис по сжатию картинок, фото, изображений, который будет работать как надо вам прямо на вашем рабочем столе.
Итак, для этого нам потребуется правильно собрать архитектуру папок. Допустим, у вас есть папка со своей иерархией вложенных в неё папок с PNG и JPG, которые вам нужно обработать.
Создаём папку , в неё закинем папку со всеми вложенными папками и файлами.
Открываем Far Manager, в нём открываем optimus, создаём там файл и записываем туда
@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path=%~dp0 :: Название папки, в которой лежат необработанные изображения set folder=images echo Обработка *.JPG файлов через jpegtran :: Создаём папку, в которой будут храниться сжатые jpg. В нашем случае, это jpeg_images xcopy /y /t /c /i "%folder%" "jpg_%folder%" :: Для каждого .jpg проводим оптимизацию с помощью jpegtran. Выходной .jpg будет записан в jpeg_images for /r %folder% %%a in (*.jpg) do ( set fn=%%a& jpegtran -copy none -optimize -progressive -outfile %home_path%jpg_!fn:%~dp0=! %home_path%!fn:%~dp0=! ) echo Обработка *.JPG файлов через jpegtran завершена :: Указываем, что теперь прогон нужно осуществлять в новой папке jpeg_images set folder = jpg_%folder% echo Обработка *.JPG файлов через jpegoptim for /r %folder% %%a in (*.jpg) do ( set fn=%%a& jpegoptim %%~a --strip-all ) echo Обработка *.JPG файлов через jpegoptim завершена echo Обработка *.PNG файлов через optipng xcopy /y /t /c /i "%folder%" "png_%folder%" for /r %folder% %%a in (*.png) do ( set fn=%%a& optipng -o7 %%~a -out %home_path%png_!fn:%~dp0=! ) echo Обработка *.PNG файлов через optipng завершена set folder=png_%folder% echo Обработка *.PNG файлов через pngout for /r %folder% %%a in (*.png) do ( set fn=%%a& pngout %%~a ) echo Обработка *.PNG файлов через pngout завершена pause
Код закомментирован в важных частях. По сути, ничего сложного, разберётесь, если вам это нужно.
Теперь сохраняем и запускаем его.
Сжатие проходит с разделением файлов отдельно JPG, которые теперь располагаются в , и PNG отдельно, которые располагаются в .
Если нужно изменять качество или другие параметры, смотрите описание утилит выше и изменяйте код под свои нужды.
How does it work?
Excellent question! When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too. The result: better PNG files with 100% support for transparency. Have your cake and eat it too!
In the above image the file size is reduced by more than 70%. I have excellent eyesight but can’t spot the difference either! Use the optimized image to save bandwidth and loading time and your website visitors will thank you.
Конвертировать PNG в JPG без потери качества
Использование Photoshop
Photoshop, пожалуй, самый удобный инструмент для преобразования PNG в JPG без потери качества изображения, но он не бесплатный. Поэтому, если на вашем ПК установлено это программное обеспечение для редактирования фотографий , вы, безусловно, можете его использовать.
Откройте изображение, которое вы хотите конвертировать с помощью Photoshop. После этого одновременно нажмите кнопки Ctrl + Shift + Alt + S . Кроме того, вы можете перейти в Файл > Сохранить для Интернета . Теперь вы можете выбрать формат файла. В этом случае выберите JPEG в раскрывающемся меню.
Наконец, нажмите кнопку Сохранить и выберите путь, чтобы сделать это.
Вы также можете использовать Adobe Illustrator , чтобы сделать то же самое. Если у вас есть этот инструмент вместо Photoshop, выполните те же шаги, что и Photoshop. Все шаги точно такие же, как в Photoshop.
Используя Paint
Paint – это встроенный инструмент Windows , который можно использовать для преобразования изображения PNG в JPEG без потери качества. откройте изображение PNG с помощью Paint.
Откройте изображение PNG с помощью Paint и перейдите в Файл> Сохранить как> JPEG изображение .
Затем выберите местоположение, добавьте имя и убедитесь, что для формата файла установлено значение JPEG . Теперь нажмите кнопку Сохранить , чтобы завершить преобразование.
Использование PNG2JPG
PNG2JPG – это бесплатный онлайн-инструмент , который позволяет пользователям конвертировать изображения PNG в JPG без потери качества изображения. Это очень простой в использовании инструмент, и вы можете сохранить несколько изображений одновременно.
Чтобы начать работу с этим инструментом, перейдите на веб-сайт, нажмите кнопку ЗАГРУЗИТЬ ФАЙЛЫ , выберите все файлы, разрешите автоматическое преобразование и нажмите кнопку СКАЧАТЬ ВСЕ , чтобы сохранить их. на ваш компьютер.
Использование XnConvert
XnConvert – это пакетная обработка изображений freeware для Windows, которая помогает конвертировать изображения в различные форматы и имеет интересные функции, такие как пакетная обработка и создание сценариев. Это также хорошо для преобразования PNG в JPG.
Надеюсь, что эти крошечные учебники помогут вам конвертировать PNG-изображения в JPG без потери качества.
Связанные чтения:
- Конвертировать видео в GIF онлайн
- Конвертировать PDF в PPT
- Конвертировать JPG в PDF онлайн
- Конвертировать фильм в анимированный GIF
- Конвертировать WebP в PNG.
Как уменьшить вес картинки
Существует два способа:
- Специализированный софт;
- Онлайн сервисы.
Специализированный софт
Рассмотрим лучшие четыре программы, уменьшающие изображение без потери качества.
Paint
Приложение встроено разработчиками в ОС Windows. Поэтому не нужно скачивать дополнительное ПО. Это простой и надежный инструмент. Если вы не занимаетесь профессиональной обработкой графических файлов, хватит возможностей Pain. Чтобы запустить программу, нажмите «Win+R», пропишите команду:
Рассмотрим его работу на примере фотографии размера 1,3 мегабайт.
Уменьшаем ширину и высоту Перейдите:
Уменьшите ширину и высоту. Посмотрите, как будет выглядеть изображение. В моем примере это:
Сохраните его.
Удаление лишних деталей Часто на фото есть ненужные (неинформативные элементы). Особенно по краям. Удалите их. Перейдите:
Выделите часть фото, которая останется. Все что за рамкой удалится.
Далее:
Сохраните готовый результат. Размер файла был 1,3 мегабайт. Стал 198,9 килобайт. При этом качество не изменилось.
Программа сохраняет изображение сжимая его в качестве на десять-двадцать процентов. Это незаметно для человеческого глаза.
FastStone Image Viewer
Вы задумывались, как уменьшить вес фото без изменения размера. Поможет FastStone. Программа бесплатна. Скачайте ее по адресу: https://www.faststone.org/FSIVDownload.htm. Откройте фото, выберите:
Перейдите:
Откроется окно, где посмотрите размер файла. Передвигая ползунок в пункте «Качество», не меняя размера установите значение не менее 60. Это зависит от фото. Посмотрите на скриншоте. Вес уменьшился с 1,3 мегабайта до 751 килобайт.
Меняем размер Перейдите:
Укажите ширину и высоту в пикселях.
Например, при установке значений 800Х500 получилось уменьшить вес картинки без потери качества до 152 килобайт.
IrfanView
Загрузите программу по адресу: https://www.irfanview.com/. После установки откройте файл в приложении, выберите:
Укажите степень сжатия. Рекомендую устанавливать не меньше 60. Остальные настройки не трогайте. Сохраните файл. Фото без изменения размера стало весить 553 килобайт.
Изменяем разрешение Перейдите:
Измените значения:
При установке 800Х500 размер без потери качества стал 52,8 килобайт
Как уменьшить вес картинки без потери качества в Фотошопе
Это программа для профессиональной работы с изображением. В нем качество сжатия будет наилучшее. Откройте файл фото в программе. Перейдите:
Переместите влево ползунок в пункте «Качество». Посмотрите, чтобы на изображении не было видимых отличий. Измените ширину и высоту фото в пикселях.
Изменив разрешение до 800Х500 вес картинки стал 66,12 без потери качества.
Уменьшаем вес картинки без потери качества онлайн
Не хотите устанавливать на ПК дополнительное ПО. Воспользуйтесь онлайн сервисами. Их преимущество: получение максимального сжатия без ухудшения качества, простота в использовании. Для работы нужен доступ в интернет. Рассмотрим лучшие площадки.
Как это работает
Все онлайн сервисы функционируют по принципу:
- Загрузка изображений на площадку при помощи формы;
- Установка нужных параметров.
Рассмотрим лучшие из них.
Optimizilla
Доступен по адресу: https://imagecompressor.com/ru/. Загрузите фото или перетащите его мышкой на форму:
Через 1-2 секунды произойдет его сжатие. В меню справа отрегулируйте качество перемещением ползунка. Сравните изображения.
Compressjpeg
Доступен по адресу: https://compressjpeg.com/ru/. Работает аналогично рассмотренному выше. Особенность — поддержка мультизагрузки. Добавьте для обработки одновременно двадцать файлов. Нажмите «Настройки», чтобы отрегулировать его вручную.
Готовый результат скачайте в архиве.
TinyJPG
Доступен по адресу: https://tinyjpg.com/. Загрузите файл на сервис. Работает с PNG форматом. После обработки нажмите «Download».
Как уменьшить размер файла jpg без потери качества
Уменьшить вес фотографии можно с помощью специальных программ или в режиме онлайн на каком-то специальном ресурсе. Уменьшение размеров картинок и фотографий может пригодится в абсолютно разных случаях. Например, когда на жестком диске осталось очень мало места, а большую часть занимаемого пространства занимают именно фотографии, то уменьшение их размера очень пригодится, ведь удалять ничего не нужно.
Сжатие может применятся без видимой потери качества. Таким образом, размер картинки будет меньше, но своей красоты файл не утратит. Рисунок можно просто добавить в документ, в котором он автоматически уменьшится. Значение сжатия можно указать во вкладке «Дополнительно».
В чем измеряется размер картинки:
- в пикселях (высота и ширина изображения).
- в байтах (вес картинки на компьютере).
Популярные форматы картинок и фотографий:
- bmp – формат самого лучшего качества. Но за четкое изображение приходится жертвовать свободным местом на жестком диске. Все картинки такого формата занимают достаточно много места.
- Jpg – самый популярный формат картинок и изображений. Хорошее качество при умеренном размере файла. Даже после сжатия картинка будет обладать хорошим качеством. Очень удобный формат для различных манипуляций. Если изображение искусственно не увеличивать, то разница в качестве будет едва заметна.
- Png -передавать изображение в интернете очень удобно с помощью данного формата картинок. Превосходит Jpg формат в сохранении качества после сжатия, а цветопередача более насыщенная даже после сжатия через программы.
- gif – этот формат используют для картинок с анимацией. С его помощью удобно передавать картинки через всемирную сеть.
Как уменьшить размер фотографии в Paint
Чтобы изменить вес в килобайтах не нужно устанавливать сложные программы и покупать на них лицензии. Для этого идеально подойдёт стандартное приложение Paint. Этот редактор операционной системы установлен в ней по умолчанию. Поэтому пользователь сразу найдет ее в меню «Пуск», далее выбираем раздел «Стандартные» и там находим программу.
- Открываем приложение
- Нажимаем «Изменить размер» во вкладке «Главная»
- В открывшемся окне переходим во вкладку Пиксели и выбираем необходимый размер. Достаточно внести изменения только в одно поле, второе значение рассчитается автоматически.
- Сохраняем пропорции фото (Ставим галочку возле «Сохранить пропорции»)
- Нажимаем «ОК»
Файл сохраняется на компьютере пользователя.
Как уменьшить размер файла jpg в фотошопе
Уменьшение размера картинки с помощью Photoshop осуществляется поэтапно. Размер становится меньше после применения изменений. Так как это очень долго, лучше сразу выставлять значение на 50 процентов.
- Запускаем программу Photoshop.
- Выбираем раздел «File» (Файл).
- Затем нажимаем «Open» (Открыть), и находим нужный файл.
- Изменить размер можно комбинацией «Alt+Ctrl+I».
- Значение может быть в пикселах или в процентах, смотря что вам удобней. Изменяем значение в окошке «Width» (Ширина) и, если стоит галочка «Constrain Proportions» (Сохранять пропорции), высота изменится автоматически.
- Выбираем «ОК», а затем сохраняем изменения с помощью комбинации «Ctrl + S».
Как уменьшить размер файла jpg онлайн
Существует много оптимизаторов изображения, которые быстро сжимают картинку до необходимого размера. Это более удобный способ, так как ничего качать и открывать не нужно. Просто в браузере переходим на любой подобный сайт и начинаем работать с изображением.
На главной странице нажмите кнопку UPLOAD PHOTO, выберите нужный файл и подождите, пока что сервис обрабатывает запрос и выдает после некоторого времени результат. Увидеть новый размер и внешние изменения изображения можно с помощью ползунка. В моем случае размер файла уменьшился в два раза.
После того как качество и размеры файла стали удовлетворительны можно скачивать с интернет-ресурса свою картинку. Нажимаем на кнопку Download Full Res и получаем новый файл. Он будет называться так же, как и прошлый + в конце слово mini. Можно повторно пропустить файл через программу, чтобы сделать его ееще меньше.
Сайт с подобной функцией привлекают внимание людей различных профессий. Нет необходимости долго ждать, пока программа скачивается на компьютер
Онлайн сжатие полезно для вебмастеров и дизайнеров.
Если вы ищите способы как уменьшить размер файла jpg без потери качества, то вышеописанные варианты отлично подойдут для этих целей. Выбирайте наиболее удобный сервис или программу, чтобы они полностью удовлетворяли вашим запросам.
Как уменьшить размер файла JPG ? 4 быстрых способа!
Нажатие такого сочетания клавиш сразу же выводит окошко выбора места сохранения и типа файла:
Давайте щёлкнем по стрелочке для раскрытия списка с типами файлов, где выберем тип PNG:
Как мы видим, эта процедура идентична оптимизации не только JPG, но и вообще любой процедуре сохранения созданного или каким-либо способом отредактированного файла.
После выбора формата PNG, Фотошоп предложит два варианта оптимизации и два варианта вывода уже оптимизированной картинки при просмотре, ну а наша задача сделать свой индивидуальный выбор:
Версия Фотошоп CS6 предусматривает дополнительное пользовательское сжатие на выбор, а предыдущая версия CS5 сжимает картинку самостоятельно автоматически, предлагая нам, лишь определиться с её выводом (появлением) при просмотре:
Когда мы говорим о просмотре, то ведём речь, так сказать, о двух видах просмотра. Один вид я бы назвал бытовым просмотром, то есть мы смотрим изображения средствами операционной системы (встроенный медиа плеер). К другому виду просмотра можно отнести изображения в среде Интернета.
Всё зависит от того кому предназначено изображение и где оно это самое изображение, покинув Фотошоп, будет размещено. Пожалуй, лучшим будет довериться своим глазам. Если, то, что мы видим после сжатия, глаз, как говорят, не радует, то мы пробуем другой вариант. Зацикливаться на степени сжатия и качестве воспроизведения картинки, не будем. Спать мы должны крепко и сладко (юмор).
Визуально изображение должно выглядеть достаточно качество и иметь не очень большой размер (как файл). К тому же у нас есть запасной вариант — JPG для обработанных фотографий. Длинные ресницы, осиная талия и всё такое.
Не будем забывать о супер возможности с помощью PNG при оптимизации, сохранить многоуровневую прозрачность, если наше изображение содержит слои с разной степенью прозрачности:
Давайте воспользуемся имеющейся возможностью Фотошоп CS6 дополнительной регулировки степени сжатия и посмотрим на размер файлов в первом и втором вариантах сжатия, а также на то, каким будет наше зрительное восприятие.
Оптимизируем изображение по варианту сжатия «Нет/быстро»:
А затем, по варианту «Самый маленький/медленно»:
Теперь с помощью средств операционной системы нашего компьютера посмотрим на наше изображение оптимизированное, или иначе говоря, сжатое с разной степенью.
Посмотрим на картинку с первым вариантом оптимизации. Достаточно просто навести курсор мыши на изображение:
Теперь переведём курсор мыши на изображение сжатое по второму варианту:
Итак, мы посмотрели и сравнили одно и то же изображение, оптимизированное двумя различными вариантами. От наших глаз не ускользнул тот факт, что в обоих вариантах размер изображения по высоте и ширине идентичен, а вот их размер как файлов значительно друг от друга отличается (в байтах). Что касается меня, то мои глаза не видят какой-то потери качества картинки при более высокой степени сжатия. Резкость (чёткость), контрастность, насыщенность цветами, мои глаза на обоих этих значках воспринимают одинаково.
Давайте посмотрим на оба варианта оптимизации с помощью средств операционной системы. Оптимизация по первому варианту сжатия:
Теперь посмотрим на оптимизацию с более высокой степенью сжатия (вариант 2):
Опять скажу о себе. При различном размере файлов мои глаза не видят отличий. При переключении с одной картинки на другую я не заметил перехода. Такое впечатление, будто кнопки переключения с изображения на изображение (вперёд/назад) не функционируют.
Для принятия решения о том, с какой степенью сжимать изображения в будущем и в зависимости от их места размещения, мы можем смотреть на изображения уже после их сжатия разными вариантами, в Фотошоп, используя режим нескольких окон. Процесс прост. Открыв оба изображения в Фотошоп, мы сравниваем их между собой, переводя взгляд с одного изображения на другое.
Чтобы провести этот сравнительный анализ нам нужно обратиться к пункту «Окно» верхнего меню и выбрать опцию «Упорядочить»:
Где щелчком по стрелочке открыть окошко с перечнем вариантов:
Поскольку в нашем примере изображений только два, то на вполне подойдёт режим двух окон. Мы можем выбрать горизонтальное расположение окон или же вертикальное. Выбираем тот вариант, который нам больше нравится и удобней:
Базовая оптимизация изображений
Тут подразумевается обрезка ненужных полей, уменьшение глубины цвета, удаление комментариев и сохранение изображения в подходящем формате. Для этого можете воспользоваться Adobe Photoshop, или, если у вас его нет, MS Paint или GIMP.
Даже элементарная обрезка изображения неплохо снизит его вес.
Как уменьшить изображение в MS Paint
Покажу на примере MS Paint, как уменьшить изображение до нужных размеров.
Возьмём для примера лого NGINX и его изображение nginx.png размером 2000×417 пикселей, которое нужно обрезать по ширине до 1024, т.к. это ширина вёрстки страницы, и делать больше нет смысла.
-
Открываем Paint (Пуск-Выполнить-Вводим «mspaint»)
-
Загружаем nginx.png, находим «Изменить размер», открывается окошко с процентами и пикселями, в нём переходим на пиксели и задаём нужный размер, в нашем случае вбиваем в ширину 1024
На выходе получаем картинку, которая прошла минимальную базовую оптимизацию. Пора переходить к сжатию её веса.