заключён только , т.е. ваша картинка не будет увеличиваться. А место размещения рисунка определяется атрибутом class тега
.
Конечный код оптимизированного изо будет иметь вид:
 height="255"
src="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s1600
/tigr
.jpg" style="margin-left: auto; margin-right: auto;" width="340"
/> |
|
А это его отображение:
Сколько картинок проиндексировано?
Чтобы увидеть какие изображения вашего блога проиндексированы:
Уникальность картинок для поисковых систем.
И последнее, стараемся размещать свои оригинальные изображения. Поисковые системы имеют свои алгоритмы распознавания дублей, такие, например, как у онлайн-сервиса TinEye . Потренировавшись на нём, у меня получилось, что уникальной картинку можно сделать лишь путём зеркального отражения либо поворотом изображения, скажем на 15 градусов. Способ довольно известный и широко используемый. Больше всего меня удивил скриншот программы Image Resize Guide Lite (см. выше). TinEye без труда выдал несколько копий с изображением тигров. Ни уменьшение, ни обрезка, ни... результата не дали.
Яндекс и Гугл могут определять похожие изображения. Для этого в поиске по картинкам рядом с изображением нужно щёлкнуть ссылку "Другие размеры" (в Яндексе ссылка под фото имеет вид "800×600 … 1600×1200").
Здравствуй Хабр!
Вот и настало время второй, и, надеюсь, долгожданной части. Настоятель рекомендую ознакомится с первой частью , ибо без этого будет тяжело понять, о чем я буду писать. В этой части я отойду от теории к практике, а именно покажу небольшое проект для комплексной оптимизации изображений.
Image Catalyst
- сборник программ для комплексной оптимизации/сжатии изображений формата PNG и JPEG без потери качества в рамках того же формата. Имеет смысл применять для ускорения загрузки элементов графики (в частности, спрайтов) веб-страничек.
Хочу сразу предупредить, я не несу ответственность за работу данного приложения. Вы используете данное приложение на свой страх и риск. Настоятельно рекомендуется перед оптимизацией сделать резервную копию изображений во избежание нежелательных последствий и внимательно изучить данную статью.
Загрузить
Image Catalyst 2.0 можно отсюда (только для windows).
Инструменты оптимизации PNG
Для комплексной оптимизации изображений формата PNG используются следующие приложения:- (входит в состав AdvanceComp 1.15 от 01.11.2005);
- CryoPNG от 23.10.2010;
- DeflOpt 2.07 от 05.09.2007;
- Defluff 0.3.2 от 07.04.2011;
- TruePNG 0.3.2.5 от 07.06.2011;
- PNGOut от 02.07.2011;
- PNGWolf от 01.04.2011;
- Zlib 1.2.5 от 19.04.2010.
Подробно об этих приложениях я рассказывал в первой части.Инструменты оптимизации JPEG
Для комплексной оптимизации изображений формата JPEG используются следующие приложения:- Jhead 2.90 от 05.02.2010;
- JPEGTran (входит в состав Libjpeg 8c от 16.01.2011).
Подробно об этих приложениях я также рассказывал в первой части.Дополнительное ПО
На сегодняшний день используется также приложение - iniTool 1.20 от 07.02.2010.Оптимизация PNG
Параметры оптимизации PNG
Поддерживаются оба метода отображения изображений в браузере при загрузке:- Non-interlaced - браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
- Interlaced - до полной загрузки файла изображение в браузере отображается в низком разрешении. Чересстрочное отображение позволяет уменьшить субъективное время загрузки и показать пользователям, что изображение загружается, однако чересстрочное отображение также увеличивает размер файла.
Алгоритмы оптимизации PNG
Исходя из параметров оптимизации PNG были созданы следующие алгоритмы оптимизации:- Non-interlaced - использует Non-interlaced параметры оптимизации;
- Interlaced - использует Interlaced параметры оптимизации;
Режимы оптимизации PNG:
В прошлой части, мы говорили, чем больше времени затрачивается на оптимизацию PNG, тем степень оптимизации выше, именно поэтому были разработаны несколько режимов оптимизации:- Fast - степень сжатия и скорость оптимизации достаточно высокая;
- Normal - по сравнению с режимом Fast скорость оптимизации ниже в среднем в 3 раза, степень сжатия выше в среднем на 1,5%;
- Xtreme - по сравнению с режимом Normal скорость оптимизации ниже в среднем в 4 раза, степень сжатия выше в среднем на 1%.
В некоторых случаях степень сжатия может быть выше на 10% и более.Оптимизация JPEG
Параметры оптимизации JPEG
Поддерживаются два метода отображения изображений в браузере при загрузке:- Optimize - создается улучшенный файл JPEG с незначительно меньшим размером файла. Браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
- Progressive - изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки, т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Internet Explorer, включая восьмую версию, не поддерживает прогрессивную загрузку JPEG, он его показывает только после полной загрузки файла, что сильно отличается от поведения «традиционного» JPEG, когда изображение отображается сверху вниз, по мере загрузки.
Алгоритмы оптимизации JPEG
Исходя из параметров оптимизации JPEG были созданы следующие алгоритмы оптимизации:- Optimize - использует Optimize параметр оптимизации;
- Progressive - использует Progressive параметр оптимизации;
- Maximum - сравниваются по размеру изображения, полученные Optimize и Progressive методами оптимизации, и выбирается файл с наименьшим размером, имеет смысл использовать, если размер изображений меньше 10 кбайт, в остальных случаях метод оптимизации Progressive практически всегда превосходит метод Optimize;
- Default - оптимизирует изображение, но при этом не изменяет параметр оптимизации.
Инструменты оптимизации
- По умолчанию количество одновременных потоков обработки изображений PNG равно количеству ядер в процессоре, если Вы хотите изменить количество одновременных потоков, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции. Не рекомендуется устанавливать количество одновременных потоков больше количества ядер в процессоре;
- По умолчанию оптимизируются изображения PNG и JPEG в подпапках указанной папки, если Вы хотите отключить данную функцию, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
- По умолчанию создается файл Images.cvs, если Вы не хотите создавать данный файл, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
- По умолчанию при оптимизации JPEG-файлов удаляются все Metadata, если Вы не хотите удалять определенные Metadata, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
- По умолчанию при оптимизации PNG-файлов удаляются все Chunks, если Вы не хотите удалять определенные Chunks, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
- По умолчанию при оптимизации PNG-файлов применяется оптимизация параметров ColorType и BitDepth, если Вы не хотите изменять эти параметры, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
- По умолчанию при оптимизации PNG-файлов с альфа-каналом применяется функция «Dirty Transparency», если Вы не хотите применять эту систему, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
- Не рекомендуется запускать больше одной копии Image Catalyst за один сеанс оптимизации изображений.
- В названии и/или в адресе изображений не должны быть символы, такие как & ^ % !
Благодарю за помощь
Хотел отдельно поблагодарить x128
и res2001
(если статья наберет +100, то я отправлю инвайт), без этих людей мой проект вряд ли мог быть реализован. Также хотел поблагодарить всех автор приложений, которые используются в Image Catalyst.Пару слов о конкурентах
Здесь я расскажу пару слов о конкурентах, а точнее об одном из них, т.к. считаю его достойным конкурентом. ScriptPNG и ScriptJPG довольно интересные проекты, в отличии от Image Catalyst оптимизация изображений форматов PNG и JPEG разделена на два отдельных проекта и нет поддержки параллельной оптимизации PNG. Так же рекомендую посетить и сам сайт проекта, т.к. недавно там появились статьи об оптимизации PNG.И еще не много...
Существует один довольно интересный проект - JPGCrush - созданный специально для оптимизации JPEG без потери качества, являясь в свою очередь надстройкой над JPEGTran. Создает JPEG исключительно в формате Progressive. Единственный недостаток - работает только в *nix-системах. Если кто может помочь мне с этой проблемой, прошу обращайтесь в личку.Было бы неплохо сделать GUI для моего проекта, но у меня таких знаний нет, если у кого есть время и желание в реализации GUI, то пишите в личку.
Теги:
Добавить метки
8 с минимальным весом при сохранении приемлемого качества.
Заметка
Хотя форматы GIF и PNG между собой довольно сильно отличаются, в данном уроке они объединены, т.к. в photoshop настройки оптимизации для них одинаковы.
Чтобы начать «колдовать» над изображением, откроем панель оптимизации — выбираем меню File -> Save for web &
Devices (Файл -> сохранить для Веб).
Само окно оптимизации было рассмотрено в . Сейчас подробно разберем настройки оптимизации:
Готовые установки
Тут можно выбрать предопределенные установки программы: быстро, но редко когда эффективно. Для лучшей оптимизации следует использовать ручные настройки. Твои действия:
Выбор формата
В зависимости от выбранного формата, окно настроек меняет вид. Сейчас интересует формат GIF.
Выбор алгоритма сокращения цветов
Файлы PNG‑8 и GIF поддерживают 8-разрядную глубину цвета, то есть до 256 цветов. При оптимизации файла как GIF(PNG-8), все цвета изображения преобразуются в ограниченную палитру цветов (таблицу цветов), где мы можем манипулировать максимум 256 различными цветами. Если в таблице цветов исходного изображения отсутствует нужный цвет, то приложение подбирает ближайший цвет из таблицы или имитирует цвет с помощью сочетания доступных цветов.
Алгоритм сокращения цветов (Color reduction algorithm) определяет, какой схемой воспользуется Photoshop при преобразовании полноцветного изображения в индексированное (таблицу цветов):
Perceptual
(палитра на восприятие)
создает цветовую таблицу на основе текущих цветов изображения. При этом особое внимание уделяется тому, как человек воспринимает цвета. Преимущество данной таблицы заключается в сохранении целостности цвета;
Selective
(выборочная палитра)
аналогичная первой, но с предпочтением цветов web-безопасной палитры (принята по умолчанию, довольно близко сохраняет исходные цвета);
Adaptive
(адаптивная палитра)
создаст цветовую таблицу из цветов, наиболее часто встречающихся в исходном изображении;
Custom
(заказная)
палитра из выбранных пользователем цветов.
Остальные варианты лучше не трогать: он приводят к значительным искажениям цветов изображения. Вариант Restrective (Web) хоть и кажется по названию наиболее подходящим, но это не так: сформирует палитру на основе 216 веб безопасных цветов. Качество изображения получится самым худшим. В добавок при выборе данного варианта в браузерах отключатся возможность смешивания цветов для получения недостающих (дизеринг). В данном методе уже нет смысла, современные мониторы давно уже поддерживают 24-битные цвета.
Для данной картинки я остановился на методе Perceptual: он сжал файл лучше, чем Selective и Adaptive.
Уменьшение числа цветов
Количество цветов имеет самое большое влияние на вес файла: чем меньше цветов будет в изображении, тем оно будет легче. Но нужно следить за тем, чтобы картинка теряла качество незаметно или еле заметно. Сначала в выпадающем списке выбираем такое количество цветов, при котором вес файла будет минимальным и качество изображения удовлетворительным.
Тут мне нравится больше всего вариант со 128 цветами: качество изображения почти не пострадало и размер файла прилично уменьшился. Но посмотри, что будет если при таком количестве цветов изменить алгоритм палитры:
Adaptive при уменьшении цветов показывает лучшее сжатие файла. Вывод: первоначальный выбор алгоритма получения палитры не всегда будет оптимальным
. Итак, останавливаем свой выбор на Adaptive 128 цветов. Затем пробуем еще уменьшить число цветов тонкой настройкой. Для этой картинке удалось уменьшить количество цветов до 109 без особых потерь качества:
Веб цвета
Определяет уровень изменения цветов на ближайшие эквивалентные цвета палитры Веб (с отменой псевдополутонов в браузере). Чем выше значение, тем больше изменяется цветов, тем меньше вес файла. Опять же, ищем компромисс между качеством и весом файла:
На этом этапе для многих изображений можно остановиться.
Стоила ли игра свеч
Несложными манипуляциями в photoshop за пару минут мы смогли добиться уменьшения размера файла на 36.5% по сравнению с простым сохранением изображения через Save for web (19.86Kb против 12.63Kb).
Заметка
Обрати внимание как изменяется таблица цветов при манипуляциях с настройками оптимизации:
Изначально используются все 256 цветов. Затем мы их сократили до 109, в таблицы соответственно осталось 109. Затем мы применили преобразование в веб цвета — в таблице точками отметились преобразованные цвета. На них теперь никак повлиять не нельзя.
Дополнительные параметры
Loosy
(потери)
уменьшается размер файла путем потерей части данных. Чем больше данных будет потеряно, тем хуже будет качество, тем меньше вес файла. Иногда имеет смысл пробовать. Применяется только для GIF. Этот параметр нельзя использовать одновременно с параметром Interlaced, алгоритмами "Дизеринг шума" или "Регулярный дизеринг".
Interlaced
(чересстрочная развертка)
до полной загрузки файла изображение показывается в низком разрешении, тем самым создавая иллюзию более быстрой загрузки изображения. Увеличивает вес файла.
Особые случаи
Градиенты
Если по каким-либо причинам понадобилось сохранять полноцветное изображение или изображение, содержащее плавные переходы цветов в GIF формате, тогда пригодится Dithering
(дизеринг). Этот метод позволяет получать недостающие оттенки для изображения с 8-битным цветом путем смешения цветов, присутствующих в палитре.
В нынешний век мобильных технологий оптимизация картинок в форматах PNG и JPG,JPEG стала снова актуальна, как это было актуальным в те времена, когда интернет только входил в нашу жизнь и был повсеместно медленным и диалапным. Мобильный интернет, конечно, не совсем корректно сравнивать с диалапом, но местами, где связь плохая, там и скорость доступа довольно маленькая. Да и в те времена пользователю было некуда деваться, и приходилось ждать загрузки страницы. Сейчас же интернет вырос, выбор сайтов большой. Пользователь стал капризным и нетерпеливым, и среднее время ожидания загрузки страницы сильно уменьшилось. Пользователю проще найти другой более шустрый сайт.
Да и поисковые гиганты навроде Google или Yandex начали обращать внимание на то, как быстро грузятся сайты, отдавая предпочтение в выдаче тем, что пошустрее. Не последнюю роль в этом играет и вес страницы, который, в свою очередь, сильно зависит от веса располагающихся на ней изображений. Довольно очевидно, что иметь компактные сжатые картинки выгодно всем. Поэтому здесь я хочу поговорить о том, как подготовить ваши PNG и JPG, JPEG файлы к заливке на хостинг.
Базовая оптимизация изображений
Тут подразумевается обрезка ненужных полей, уменьшение глубины цвета, удаление комментариев и сохранение изображения в подходящем формате. Для этого можете воспользоваться Adobe Photoshop, или, если у вас его нет, MS Paint или GIMP.
Даже элементарная обрезка изображения неплохо снизит его вес.
Как уменьшить изображение в MS Paint
Покажу на примере MS Paint, как уменьшить изображение до нужных размеров.
Возьмём для примера лого NGINX и его изображение nginx.png размером 2000×417 пикселей, которое нужно обрезать по ширине до 1024, т.к. это ширина вёрстки страницы, и делать больше нет смысла.
На выходе получаем картинку, которая прошла минимальную базовую оптимизацию. Пора переходить к сжатию её веса.
File Optimizer для сжатия PNG и JPG,JPEG
Наиболее простой и быстрый способ добиться оптимального сжатия изображений без потери качества — использовать программу File Optimizer
Официальный сайт и описание программы
:
Скачать File Optimizer
вы можете с
Описание
. Является эффективным оптимизатором не только для изображений, но также и для.pdf, .docx, txt и иных текстовых, аудио- и видеофайлов, а также архивов. Полный список поддерживаемых расширений вы найдёте на официальной странице проекта.
Вот некоторые из утилит, используемых в работе: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, Gifsicle, Ghostcript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pngquant, pngrewrite, pngwolf, TruePNG, tidy-html5, ZLib, zRecompress
. Думаю, даже этот неполный список довольно внушителен.
Установка и использование File Optimizer
Сначала скачиваете последнюю версию программы либо в виде инсталлятора, либо архива с файлами. Кстати, в архиве есть версия под 32-битную и 64-битную версии Windows.
Интерфейс довольно простой и интуитивно понятный.
В настройке не нуждается, но вы можете некоторые форматы настроить под себя с помощью кнопки Options...
Использование
. Вы либо перетаскиваете нужные файлы и даже папки (каталоги) в окошко программы, либо выбираете нужные через меню Add files...
Для оптимизации файлов жмёте Optimize all files
Оптимизированные файлы заменят собой исходники, иерархия категорий также сохранится. Напротив каждого файла будет показана статистика, сколько в процентах от исходного размера файла весит оптимизированная версия.
После завершения работы внизу в статусной строке будет выведена статистика по количеству обработанных файлов, а также сколько получилось сэкономить.
На мой взгляд, File Optimizer свою работу выполняет очень качественно.
Единственный минус, если список файлов большой, ждать результатов можно долго, но оно стоит того.
Если вас интересуют подробности способов оптимизации, которые можно настроить на свой лад, далее пойдёт речь про настройку и использование утилит для сжатия изображений
Cжатие PNG без потери качества
Рассмотрим 3 программы для оптимизации PNG:
- Adobe Photoshop
- OptiPNG
- PNGOUT
Сравним их по качеству сжатия картинок. Сжимать будем nginx.png из предыдущего раздела. Вес оригинала 27,5 Кб.
Cжатие PNG с помощью Adobe Photoshop
Первый в списке — хорошо известный всем фотошоп. Многофункциональный комбайн для дизайнера, который умеет почти всё, в том числе и сжимать изображения.
В фотошопе открываем Файл-Cохранить для Web
либо используем комбинацию Alt+Shift+Ctrl+S
В результате получаем 22,7 Кб, т.е. сжали на 17,5%
К сожалению, большинство графических программ не способны раскрыть весь потенциал алгоритмов, используемых для сжатия PNG. Главная причина в том, что для определения оптимальной стратегии сжатия они используют эвристические алгоритмы, которые позволяют без проведения компрессии прикинуть эффективность тех или иных параметров, что, в результате, даёт большой процент ошибок. Поэтому для сжатия PNG мы используем специально созданные для этого утилиты, а именно OptiPNG и PNGOUT.
Использование OptiPNG для сжатия PNG
Как установить и пользоваться OptiPNG
Скачали.exe, залили в C:\Windows, взяли нужный PNG-файл, положили в какую нибудь папку. Теперь с помощью FAR Manager либо другого файлового менеджера с поддержкой консоли зашли в эту папку и ввели команду в консоль
Optipng -o7 nginx.png
Команда заставляет сжать PNG в папке. Позже рассмотрим простой вариант, как делать сжатие в один клик.
Но сначала взглянем на результат.
18,8 Кб, т.е. сжали на 31,6%, почти на треть. Весьма недурно, неправда ли? У фотошопа получилось намного хуже.
Использование PNGOUT для сжатия PNG
Как установить и пользоваться PNGOUT
Всё точно так же, как и для OptiPNG. Скачиваете PNGOUT.exe, закидываете в C:\Windows, открываете в файловом менеджере, например, Far Manager папку с PNG, и в командной строке пишете
Pngout nginx.png
Результат ниже
Результат 23,4 Кб, т.е. удалось сжать на 15%. Весьма неплохо.
Вообще, скажу сразу, у меня были разные результаты с разными файлами, где-то PNGOUT работал эффективнее, где-то OptiPNG, поэтому советую прогонять изображения по очереди через обе утилиты.
Как быстро сжать 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
[-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG]
[-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG\command]
[-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT]
[-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT\command]
Cжатие JPG, JPEG без потери качества
Для оптимизации JPG, JPEG по аналогии с PNG существуют свои утилиты: jpegtran и jpegoptim. Конечно, вы можете пользоваться фотошопом, однако для сжатия JPG, JPEG я настоятельно рекомендую пользоваться именно ими.
Как установить, настроить и использовать jpegtran
jpegtran — мощная утилита, позволяющая выполнить как просто сжатие JPG без потери качества, так и сжатие с определённым уровнем сглаживания, и даже преобразование в Progressive JPEG.
Скачать jpegtran можно тут http://jpegclub.org/jpegtran/ (ищете и качаете jpegtran.exe).
Как сжать JPG, JPEG с помощью jpegtran
Заливаете jpegtran.exe в C:\Windows
Потом открываете в Far Manager папку с нужным JPEG и в консоли вводите
Jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg
# Базовая оптимизация 1.jpg
# -copy none убирает метаданные из JPG
# -optimize оптимизирует изображение
Progressive JPG, JPEG
Это такой тип JPG, который при загрузке страницы сначала показывает общие очертания, потом догружается и доводит качество картинки до максимального. Очень удобно для медленного мобильного интернета, и потому его необходимо использовать.
Jpegtran -progressive -outfile 1.jpg 1.jpg
# Трансформирует формат 1.jpg в Progressive
Как проверить, является ли изображение Progressive JPEG
Расширенные возможности jpegtran
Здесь рассмотрены все возможные варианты использования jpegtran
Jpegtran --help
usage: jpegtran inputfile outputfile
Switches (names may be abbreviated):
-copy none Copy no extra markers from source file
-copy comments Copy only comment markers (default)
-copy all Copy all extra markers
-optimize Optimize Huffman table (smaller file, but slow compression)
-progressive Create progressive JPEG file
Switches for modifying the image:
-crop WxH+X+Y Crop to a rectangular subarea
-flip Mirror image (left-right or top-bottom)
-grayscale Reduce to grayscale (omit color data)
-perfect Fail if there is non-transformable edge blocks
-rotate Rotate image (degrees clockwise)
-scale M/N Scale output image by fraction M/N, eg, 1/8
-transpose Transpose image
-transverse Transverse transpose image
-trim Drop non-transformable edge blocks
-wipe WxH+X+Y Wipe (gray out) a rectangular subarea
Switches for advanced users:
-arithmetic Use arithmetic coding
-restart N Set restart interval in rows, or in blocks with B
-maxmemory N Maximum memory to use (in kbytes)
-outfile name Specify name for output file
-verbose or -debug Emit debug output
Switches for wizards:
-scans file Create multi-scan JPEG per script file
Как быстро на автомате сжать JPEG с помощью jpegtran в Windows
Через контекстное меню сжимать не получится из-за особенности работы утилиты, однако, настроить сжатие множества JPEG разом на автомате можно.
Для этого нам нужно создать файл с расширением.bat ( в помощь) и записать туда
Cd /d .
for %%j in (*.jpg) do call:sheensay "%%~nxj" "%%~nj.jpg"
goto:eof:sheensay
jpegtran -copy none -optimize -progressive "%~1" "%~2"
Как установить, настроить и использовать jpegoptim
Как сжать JPG, JPEG с помощью jpegoptim
Заливаем jpegoptim.exe в C:\Windows. Потом открываем папку с JPG изображениями с помощью Far Manager и вводим в консоль
Jpegoptim *.jpg --strip-all --all-progressive
Как оптимизировать несколько JPG, JPEG разом с помощью jpegoptim
В отличие от jpegtran, утилита jpegoptim вполне замечательно позволяет работать с ней и из контекстного меню.
Создадим файл jpegoptim.reg, например, с помощью Far Manager, и запишем туда
Windows Registry Editor Version 5.00
@="Run jpegoptim on Folder"
@="cmd.exe /c \"TITLE Running jpegoptim on %1 && FOR /r \"%1\" %%f IN (*.jpg) DO jpegoptim *.jpg --strip-all --all-progressive \"%%f\" \""
Запустили, внесли данные в реестр. Теперь можно сжимать множество JPEG файлов с помощью контекстного меню, просто складываете нужные изображения в одну папку, ПКМ и «Run jpegoptim on Folder».
Если хотите удалить jpegoptim из реестра и контекстного меню, записываете jpegoptim.reg
Windows Registry Editor Version 5.00
[-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim]
[-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim\command]
Сохраняете, запускаете, вносите изменения в реестр.
Насколько качественно jpegtran и jpegoptim сжимают jpg, jpeg
Перейдём к испытаниям. Возьмём, к примеру, файл caching.jpg. В оригинале он весит 29,5 Кб
Испытания jpegtran на качество сжатия JPG, JPEG
jpegtran -copy none -optimize -progressive caching.jpg caching.jpg
На выходе получилось 29,1 Кб, сжатие сэкономило 1,36%
Испытания jpegoptim на качество сжатия JPG, JPEG
jpegoptim caching.jpg --strip-all
В проводнике Windows этого не видно, сжатие составило несколько сотен байтов.
Что ж, исходный файл был неплохо подготовлен, поэтому сжатие не дало видимого эффекта, но когда вы будете обрабатывать свои неоптимизированные изображения, порой будете удивляться, как хорошо можно сэкономить в размере.
Как настроить сжатие png и jpg, jpeg на автомате
Если вы дочитали до этого раздела, но всё ещё недовольны предложенными вариантами, предлагаю вам самим собрать портативный комбайн — сервис по сжатию картинок, фото, изображений, который будет работать как надо вам прямо на вашем рабочем столе.
Необходимо предварительно установить jpegtran
, jpegoptim
, optipng
, pngout
ю
Инструкция по установке есть выше.
Итак, для этого нам потребуется правильно собрать архитектуру папок. Допустим, у вас есть папка images со своей иерархией вложенных в неё папок с PNG и JPG, которые вам нужно обработать.
Создаём папку optimus , в неё закинем папку images со всеми вложенными папками и файлами.
Открываем , в нём открываем optimus, создаём там файл go.bat и записываем туда
@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
Код закомментирован в важных частях. По сути, ничего сложного, разберётесь, если вам это нужно.
Теперь сохраняем go.bat и запускаем его.
Если файлов много, сжатие изображений займёт какое-то время. Дождитесь, пока консоль не уведомит об окончании процесса.
Сжатие проходит с разделением файлов отдельно JPG, которые теперь располагаются в jpg_images , и PNG отдельно, которые располагаются в png_images .
Если нужно изменять качество или другие параметры, смотрите описание утилит выше и изменяйте код под свои нужды.
Как оптимизировать и сжать GIF
В заключение
В этой статье я постарался максимально развёрнуто охватить способы оптимизации PNG и JPG. Если есть какие-то вопросы, дополнения, пишите в комментариях, обсудим
После завершения всех операций над изображением (фотографией) его необходимо сохранить к себе на жесткий диск, выбрав место, формат и дав какое-нибудь имя.
Сегодня поговорим о том, как сохранять готовые работы в Фотошопе.
Первое, с чем необходимо определиться, прежде чем начать процедуру сохранения, это формат.
Распространенных форматов всего три. Это JPEG
, PNG
и GIF
.
Начнем с JPEG
. Данный формат универсален и подходит для сохранения любых фотографий и изображений, не имеющих прозрачного фона.
Особенностью формата является то, что при последующем открытии и редактировании могут возникнуть так называемые «JPEG артефакты»
, причиной которых является потеря некоторого количества пикселов промежуточных оттенков.
Из этого следует, что данный формат подходит для тех изображений, которые будут использоваться «как есть», то есть не будут больше Вами редактироваться.
В отличие от предыдущего формата, PNG
при повторном редактировании (использовании в других работах) не теряет в качестве (почти).
Последний на сегодня представитель форматов – GIF
. В плане качества это самый худший формат, так как имеет ограничение по количеству цветов.
Давайте немного попрактикуемся.
Для вызова функции сохранения необходимо перейти в меню «Файл»
и найти пункт «Сохранить как»
, либо воспользоваться горячими клавишами CTRL+SHIFT+S
.
Это универсальная процедура для всех форматов, кроме GIF
.
Подложка
Ка мы уже знаем, формат JPEG
не поддерживает прозрачность, поэтому при сохранении объектов на прозрачном фоне, Фотошоп предлагает заменить прозрачность на какой-нибудь цвет. По умолчанию это белый.
Параметры изображения
Здесь выставляется качество картинки.
Разновидность формата
Базовый (стандартный)
выводит изображение на экран построчно, то есть обычным способом.
Базовый оптимизированный
использует для сжатия алгоритм Хаффмана (Huffman). Что это такое, объяснять не буду, поищите сами в сети, это к уроку не относится. Скажу только, что в нашем случае это позволит немного уменьшить размер файла, что на сегодняшний день не сосем актуально.
Прогрессивный
позволяет улучшать качество изображения пошагово по мере его загрузки на веб странице.
На практике чаще всего применяются первая и третья разновидность. Если не совсем ясно, для чего вся эта кухня нужна, выбирайте Базовый («стандартный»)
.
Сохранение в PNG
При сохранении в этот формат также выводится окно с настройками.
Сжатие
Эта настройка позволяет значительно сжать итоговый PNG
файл без потери качества. На скриншоте настроено сжатие.
На картинках ниже Вы можете увидеть степень компрессии. Первый скрин со сжатым изображением, второй – с несжатым.
Как видим, разница значительная, поэтому имеет смысл поставить галку напротив «Самый маленький/медленно»
.
Чересстрочно
Настройка «Снять выделение»
позволяет показывать файл на веб странице только после того, как он полностью загрузится, а «Чересстрочно»
выводит изображение с постепенным улучшением качества.
Я пользуюсь настройками, как на первом скриншоте.
Сохранение в GIF
Для сохранения файла (анимации) в формате GIF
необходимо в меню «Файл»
выбрать пункт «Сохранить для Web»
.
В открывшемся окне настроек ничего менять не придется, так как они оптимальны. Единственный момент – при сохранении анимации необходимо выставить количество повторений воспроизведения.
Надеюсь, что изучив этот урок, Вы составили максимально полное представление о сохранении изображений в Фотошопе.
Еще статьи из этой рубрики
s320
/tigr.jpg" width="320"
/>
