Web-разработка, программирование PHP. Оптимизация изображений php
Оптимизация изображений | Очередной PHP блог
Каждый владелец или создатель сайта хочет чтобы пользователь быстрее получал необходимый контент, на сервер была меньше нагрузка, и расходовалось меньше траффика. Об одном из таких способов я говорил в статье Минификация JS и CSS, а сегодня мы поговорим о красивой составяляющей всех сайтов – изображениях.
Ни для кого не секрет что картинки весят достаточно много, и, не смотря на то что времена сайтов по 100кБ ушли в прошлое, все равно для некоторых сайты которые весят больше 1мБ из-за картинок могут открываться достаточно проблематично. Да и кому нужно расходовать лишний траффик.
Так как на еще одном из моих сайтов – flashpl.ru очень много картинок, несмотря на то, что они весят как правило не больше 50Кб я задумался о том, как все это дело улучшить – сжать их еще в несколько раз, и расходовать драгоценный траффик на полезные дела.
Первое правило оптимизации изображений без которого вся работа по их сжатию будет бесполезной – кэшируйте все картинки.
Правда, это ведь не так сложно сделать, но сэкономит и вам и вашим пользователям уйму траффика. Если у вас картинки не кэшируются, то все очень плохо – немедленно приступайте к этому.Проверить кэшируются у вас картинки или нет можно здесь – гугл любезно предоставляет нам очень удобный инструмент по замеру скорости сайта.
А настроить кэширование на сервере можно следующим образом
Кэширование изображений, и статический файлов
Apache
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=290304000, public" </FilesMatch>Время можно указать свое – max-age. Указывается в секундах
Nginx
server { listen 80; server_name mysite.com; ... # Задаем правила обработки статического контента (типов файлов можно поставить и больше) location ~* ^.+.(jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js)$ { root /path/to/document/root/; # Путь к корню вашего сайта access_log off; # не пишем логи expires 3d; # кэшируем у клиента на 3 дня } }можно указывать не только дни (d) но и часы (h), минуты (m) и секунды (s).
Как видите – кэширование картинок настроить не так уж и сложно, поэтому перейдем к более проблемному пункту – сжатие размера изображений без потерь.
Оптимизация изображений
Оговорюсь сразу – в данной статье я буду рассматривать только онлайн сервисы, потому что по опыту серверные приложения типа imagemagick не дают такого прекрасного результата как сторонние сервисы.Дабы не быть голословным – я приведу процент сжатия картинки, весящей 100кбИ первый в моем списке –
Smush.It
Самый шикарный сервис из всех, которые я когда либо встречал – он бесплатный, он хорошо жмет картинки, и он …. не работает.Не работает он на момент написания статьи уже около 3х месяцев, но до этого он бы отличным сервисом. Никакой информации по закрытию его я не нашел, пробовал заходить под проксями, но судя по всему он просто лежит и все.
Для wp есть даже плагин, основанный на smushit для оптимизации изображений, и его я использовал в своем плагине для emlog – оптимизатор изображений
Ссылку на всякий случай оставлю – smush.it
Процент сжатия не выяснить
TinyPNG
Один из моих любимых оптимизаторов – TinyPNG. Очень удобный интерфейс, хорошо сжимает, и есть неплохое API для разработчиков, но, к сожалению, в нем только бесплатные только 500 изображений в месяц.Конечно если вам нужно не очень много изображений сжимать, то tinyPng отличной подойдет к вашим требованиям. Работает только с PNG или JPG
Также имеет свой WP плагин и подробный мануал по работе
101.5Кб превратились в 25.8Кб
Kraken.IO
Kraken – еще одни отличный оптимизатор изображений и также имеет 2 версии – платная и бесплатная.В бесплатной будет только веб интерфейс по загрузке изображений, и ограничение на загружаемый файл в 1Мб.
Но если вы раскошелитесь на 5$ в месяц, то вы сможете в веб интерфейсе загружать изображения по ссылке, парсить сайт, и у вас появится отличное API для работы.
101.5Кб превратились в 26.04Кб.При сжатии с небольшой потерей качества – 4.1КбКачество достаточно приемлемое, но меня оно не устраивает.
CompressPNG
Еще один сервис – compressPNG. нету API, то лично для меня неприемлемо, но зато очень неплохо жмет изображения. Качество сжатия меня сильно порадовало.
101.5Кб превратились в 30.46Кб
PunyPNG
PunyPNG – еще один сервис со своим API, но к моему великому сожалению жмущий изображения не так хорошо как конкуренты.
101.5Кб превратились в 71.3Кб
Подведем итоги теста с изображением в 100Кб
| Название | Размер после сжатия | API |
| TinyPNG | 25.8Кб | бесплатное |
| Kraken.IO | 26.04Кб (с потерей 4Кб) | платное |
| CompressPNG | 30.46Кб | нет |
| PunyPNG | 71.3Кб | Бесплатное |
golovakhin.ru
Оптимизация изображений Page Speed Insights
Недавно встала задача оптимизации веб сайтов. Инструмент Google Page Speed Insights рекомендует сжать изображения без потерь, для ускорения загрузки сайтов путем оптимизации трафика.
Сначала выбор пал на сервис TinyPNG. Он хорошо себя показал при работе с небольшой группой файлов. Для чего, на коленке, было написано пару классов для оптимизации изображений на PHP с использованием tinyfy из официального репозитория. Для использования достаточно поместить папку в любое место вашего сайта. В файле index.php показан пример использования, но можно и в нем просто указать путь до папки которую нужно сканировать.
Примечание: на некоторых хостинг площадках может возникать ошибка opendir, если вы уверены, что путь до папки верный, то в таких случаях обычно помогает выставление относительных путей от папки со скриптом. Т.е. следует убрать использование DOCROOT константы.
В целом на боевом проекте, скрипт показал, что еще очень сырой и требует доработки визуального интерфейса, для более комфортной работы «из коробки».
Позже я погуглил доступные алгоритмы сжатия изображений и нашел пару библиотек для оптимизации изобращений. Их же и рекомендует гугл. Это jpegtran, optipng и pngout. У них есть версии как для linux, так и для windows систем. Не долго думая, в голову пришла идея написать свой bat файл, позволяющий оптимизировать все изображения сайта. Для этого, конечно же, потребуется их предварительно скачать к себе на компьютер, с сохранением требуемой структуры, что позволит без проблем вернуть всё назад, только уже оптимизированное.
Оптимизация изображений в Windows — простой bat файл, собранный из доступной информации в интернете и подогнанный под мои нужды. Я убрал не нужное дублирование структуры с разделением на jpg/png. Добавил .jpeg файлы, совместил все в одну папку и проставил директивы перезаписи файлов, что бы не возникало лишних предупреждений при перезаписи существующих.
Логика работы следующая:
- распаковываем файлы в любую директорию вашего компьютера
- в папку /images копируем все папки содержащие изображения которые следует оптимизировать. Например: /galleries, /photos/ и т.д.
- запускаем opt.bat и ждем завершения работы скрипта
После завершения работы, в зависимости от количества файлов это может занять от минуты до нескольких часов, вы получите в папке со скриптом новую optimized_images. В этой папке будут лежать оптимизированные изображения сайта которые вы запросто можете вернуть на сервер.
В дальнейшем, по мере свободного времени, планируется:
- оптимизация скрипта и избавление от лишних циклов
- сбор тестовых скриптов с различными вариантами алгоритмов и их последовательностью, для поиска оптимального варианта для оптимизации.
- Написание GUI, например, на Delphi. Для того, что бы было удобнее работать с папками и файлами на локальном компьютере. Выбирать фильтры, алгоритмы и их последовательность для файлов. А так же возможность обрабатывать файлы в несколько потоков, что позволит увеличить производительность в 4 и более раз. В зависимости от тактовой частоты процессора и количества потоков.
На этом, думаю, можно завершить мой пост. На интересующие вопросы с радостью отвечу в комментариях. Спасибо, что читаете. Надеюсь кому-то помог с оптимизацией изображений для Page Speed Insights
tech-con.ru
optimization - Как избежать оптимизации изображений, которые уже оптимизированы с помощью PHP?
В настоящее время я работаю над приложением PHP, которое запускается из командной строки для оптимизации папки изображений.
Приложение PHP является скорее оболочкой для другого Оптимизатора изображений, и оно просто выполняет итерацию каталога и захватывает все изображения, затем запускает изображение через соответствующую программу, чтобы получить лучший результат.
Ниже приведены программы, которые я буду использовать, и что каждый будет использоваться для...
imagemagick для определения типа файла и преобразования неанимированных gif в png gifsicle для оптимизации анимированных изображений Gif jpegtran для оптимизации jpg- изображений pngcrush для оптимизации изображений png pngquant для оптимизации png- изображений в формате png8 pngout для оптимизации png- изображений в формате png8
Моя проблема: с 1-10 изображениями все работает ровно и довольно быстро, однако, как только я запускаю большую папку с 10 или более изображениями, она становится очень медленной. Я не вижу в этом хорошего решения, но одна вещь, которая поможет, - это не перерабатывать изображения, которые уже были оптимизированы. Поэтому, если у меня есть папка со 100 изображениями, и я оптимизирую эту папку, а затем добавлю 5 новых изображений, запустите оптимизатор. Затем он должен оптимизировать 105 изображений, моя цель состоит в том, чтобы он только оптимизировал 5 новых изображений, поскольку предыдущие 100 были бы уже оптимизированы. Это само по себе значительно улучшит производительность при добавлении новых изображений в папку изображений.
Я понимаю, что простым решением было бы просто скопировать или переместить изображения в новую папку после их обработки, моя проблема с этим простым решением заключается в том, что эти изображения используются для веб-сайтов и веб-сайтов, поэтому изображения, как правило, жестко связаны с исходный код веб-сайтов и изменение пути к изображениям затруднят это и, возможно, сломают его иногда.
Некоторые идеи, которые у меня были, это: Напишите какую-то текстовую базу данных в папки изображений, в которой будут перечислены все обработанные изображения, поэтому, когда приложение запущено, оно будет работать только на изображениях, которые еще не находятся в этом файле, Другая идея заключалась в том, чтобы изменить имя файла, чтобы иметь какой-то идентификатор в имени, чтобы показать, что он оптимизирован, а третья идея - переместить каждый оптимизированный файл в конечную папку назначения после его оптимизации. Идеи 2 и 3 не очень хороши, потому что они сломают все ссылки пути изображения в исходном коде веб-сайтов.
Поэтому, пожалуйста, если вы можете придумать достойное/хорошее решение этой проблемы, пожалуйста, поделитесь?
qaru.site
