Blog. Just Blog

Оптимизация изображений при загрузке на сайт

Версия для печати Добавить в Избранное Отправить на E-Mail 12.02.2023 | Категория: Web-мастеру и не только | Автор: ManHunter
Оптимизация изображений при загрузке на сайт
Оптимизация изображений при загрузке на сайт

Не секрет, что самый большой объем данных на сервере обычно занимают изображения. От этого напрямую зависит скорость загрузки сайта. Да, файлы картинок можно предварительно подготавливать перед загрузкой, обрабатывать различными программами, но это не всегда удобно. Лучший вариант - автоматически оптимизировать изображения в момент загрузки их на сайт. Хорошо, когда это собственный сервер, где можно устанавливать любые компоненты и писать скрипты для оптимизации, только вот на обычном виртуальном хостинге такие вольности недоступны. Поэтому придется воспользоваться сторонними сервисами.

Сервис TinyPNG
Сервис TinyPNG

Сервис TinyPNG, которым я давно и с удовольствием пользуюсь, позволяет оптимизировать изображения в формате PNG, JPEG и WebP как вручную через сайт, так и в автоматическом режиме при помощи API. Для доступа к API надо только зарегистрироваться на сайте и получить персональный ключ. В бесплатном режиме доступно не более 500 изображений в месяц, но никто не запрещает иметь стопицот аккаунтов и переключаться на другой при достижении лимита. Вариант с оплатой тоже имеет место быть, но это не наш метод :)

На сайте есть примеры доступа к API на разных языках программирования, в том числе и на PHP. Но там все реализовано в виде громоздких классов, тогда как все можно реализовать буквально в несколько строчек кода. Оптимизировать изображения можно двумя способами: передавать ссылку на изображение и передавать содержимое графического файла напрямую. Начнем с передачи данных по ссылке:
Code (PHP) : Убрать нумерацию
  1. // Ключ API
  2. $api_key='123456789aaaabbbbcccdddeeefffggg';
  3.  
  4. // Ссылка на обрабатываемое изображение
  5. $param=array(
  6.     'source'=>array(
  7.         'url'=>'https://example.com/original.png'
  8.     )
  9. );
  10.  
  11. // Отправить запрос
  12. $ch=curl_init();
  13. curl_setopt($ch, CURLOPT_URL, 'https://api.tinify.com/shrink');
  14. curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  15. curl_setopt($ch, CURLOPT_HEADER, false);
  16. curl_setopt($ch, CURLOPT_POST, true);
  17. curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  18. curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($param));
  19. curl_setopt($ch, CURLOPT_HTTPHEADER, array(
  20.     'Authorization: Basic '.base64_encode('api:'.$api_key),
  21.     'Content-Type: application/json',
  22. ));
  23. $result=curl_exec($ch);
  24. curl_close($ch);
  25.  
  26. if ($json=json_decode($result,true)) {
  27.     if (isset($json['output'], $json['output']['url'])) {
  28.         // Загрузить оптимизированное изображение
  29.         $ch=curl_init();
  30.         curl_setopt($ch, CURLOPT_URL, $json['output']['url']);
  31.         curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  32.         curl_setopt($ch, CURLOPT_HEADER, false);
  33.         curl_setopt($ch, CURLOPT_POST, false);
  34.         curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  35.         $result=curl_exec($ch);
  36.         curl_close($ch);
  37.  
  38.         if ($f=fopen('compressed.png','w+')) {
  39.             fwrite($f,$result);
  40.             fclose($f);
  41.         }
  42.     }
  43.     else {
  44.         // Ошибка
  45.     }
  46. }
  47. else {
  48.     // Ошибка
  49. }
На выходе сервис возвращает JSON с результатами, из которых нас интересует только ссылка на оптимизированный файл. Загружаете его любым удобным вам способом и сохраняете куда требуется. Никакую обработку ошибок я тут не реализовывал, это вы сделаете самостоятельно.
Code (PHP) : Убрать нумерацию
  1. // Ключ API
  2. $api_key='123456789aaaabbbbcccdddeeefffggg';
  3.  
  4. // Прочитать содержимое файла
  5. $file_name='original.png';
  6. $f=fopen($file_name,'r');
  7. $image_data=fread($f,filesize($file_name));
  8. fclose($f);
  9.  
  10. // Отправить запрос
  11. $ch=curl_init();
  12. curl_setopt($ch, CURLOPT_URL, 'https://api.tinify.com/shrink');
  13. curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  14. curl_setopt($ch, CURLOPT_HEADER, false);
  15. curl_setopt($ch, CURLOPT_POST, true);
  16. curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  17. curl_setopt($ch, CURLOPT_POSTFIELDS, $image_data);
  18. curl_setopt($ch, CURLOPT_HTTPHEADER, array(
  19.     'Authorization: Basic '.base64_encode('api:'.$api_key),
  20. ));
  21. $result=curl_exec($ch);
  22. curl_close($ch);
  23.  
  24. if ($json=json_decode($result,true)) {
  25.     if (isset($json['output'], $json['output']['url'])) {
  26.         // Загрузить оптимизированное изображение
  27.         $ch=curl_init();
  28.         curl_setopt($ch, CURLOPT_URL, $json['output']['url']);
  29.         curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  30.         curl_setopt($ch, CURLOPT_HEADER, false);
  31.         curl_setopt($ch, CURLOPT_POST, false);
  32.         curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  33.         $result=curl_exec($ch);
  34.         curl_close($ch);
  35.  
  36.         if ($f=fopen('compressed.png','w+')) {
  37.             fwrite($f,$result);
  38.             fclose($f);
  39.         }
  40.     }
  41.     else {
  42.         // Ошибка
  43.     }
  44. }
  45. else {
  46.     // Ошибка
  47. }
Второй способ отличается только формированием запроса, тут надо прочитать содержимое исходного файла и отправить его через POST. Получение результата точно такое же.

Сервис reSmush.it
Сервис reSmush.it

Сервис reSmush.it не имеет функции работы через сайт, зато предоставляет неограниченный доступ к API и при этом абсолютно бесплатный. Никаких ключей не требуется, просто берете и используете. Как и у TinyPNG, тут тоже есть два варианта загрузки файлов. При передаче ссылки можно дополнительно указать качество получаемого изображения.
Code (PHP) : Убрать нумерацию
  1. // Ссылка на изображение
  2. $source='https://example.com/original.png';
  3.  
  4. // Отправить запрос
  5. $ch=curl_init();
  6. curl_setopt($ch, CURLOPT_URL,
  7.    'http://api.resmush.it/ws.php?qlty=100&img='.$source);
  8. curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  9. curl_setopt($ch, CURLOPT_HEADER, false);
  10. curl_setopt($ch, CURLOPT_POST, false);
  11. curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  12. $result=curl_exec($ch);
  13. curl_close($ch);
  14.  
  15. if ($json=json_decode($result,true)) {
  16.     if (isset($json['dest'])) {
  17.         // Загрузить оптимизированное изображение
  18.         $ch=curl_init();
  19.         curl_setopt($ch, CURLOPT_URL, $json['dest']);
  20.         curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  21.         curl_setopt($ch, CURLOPT_HEADER, false);
  22.         curl_setopt($ch, CURLOPT_POST, false);
  23.         curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  24.         $result=curl_exec($ch);
  25.         curl_close($ch);
  26.  
  27.         if ($f=fopen('compressed.png','w+')) {
  28.             fwrite($f,$result);
  29.             fclose($f);
  30.         }
  31.     }
  32.     else {
  33.         // Ошибка
  34.     }
  35. }
  36. else {
  37.     // Ошибка
  38. }
В возвращаемом JSON будет ссылка на оптимизированный файл, который надо скачать и сохранить. Для передачи данных вторым способом надо предварительно подготовить файл к отправке с помощью класса CURLFile.
Code (PHP) : Убрать нумерацию
  1. // Подготовить локальный файл для загрузки
  2. $file='original.png';
  3. $info=pathinfo($file);
  4. $upload=new CURLFile($file, mime_content_type($file), $info['basename']);
  5.  
  6. // Отправить запрос
  7. $ch=curl_init();
  8. curl_setopt($ch, CURLOPT_URL, 'http://api.resmush.it/ws.php?qlty=100');
  9. curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  10. curl_setopt($ch, CURLOPT_HEADER, false);
  11. curl_setopt($ch, CURLOPT_POST, true);
  12. curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  13. curl_setopt($ch, CURLOPT_POSTFIELDS, array('files'=>$upload));
  14. $result=curl_exec($ch);
  15. curl_close($ch);
  16.  
  17. if ($json=json_decode($result,true)) {
  18.     if (isset($json['dest'])) {
  19.         // Загрузить оптимизированное изображение
  20.         $ch=curl_init();
  21.         curl_setopt($ch, CURLOPT_URL, $json['dest']);
  22.         curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  23.         curl_setopt($ch, CURLOPT_HEADER, false);
  24.         curl_setopt($ch, CURLOPT_POST, false);
  25.         curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  26.         $result=curl_exec($ch);
  27.         curl_close($ch);
  28.  
  29.         if ($f=fopen('compressed.png','w+')) {
  30.             fwrite($f,$result);
  31.             fclose($f);
  32.         }
  33.     }
  34.     else {
  35.         // Ошибка
  36.     }
  37. }
  38. else {
  39.     // Ошибка
  40. }
Если сравнивать результаты работы обоих сервисов, то в большинстве случаев у TinyPNG результат сжатия будет получше. Но если требуется разово обрабатывать большое количество изображений, то лучше воспользоваться бесплатным reSmush.it. Так что выбирайте сами.

Поделиться ссылкой ВКонтакте
Просмотров: 612 | Комментариев: 2

Метки: PHP, графика
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
ManHunter (07.04.2023 в 17:44):
Здесь нет никаких плагинов, все самописное.
Иван (07.04.2023 в 17:41):
Добрый день. Тоже использую данный плагин для сжатия. Вопрос такой. а что за плагин у вас используется для подсветки кода, последнее время выкладываю много скриптов на PowerShell и народ жалуется, что они просто текстом без подсветки смотрятся тяжело. Полазил у вас интересный блог, будим дружить

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (32), AJAX (5), Assembler (371), COM (42), CSS (44), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (53), iconBIT (4), JavaScript (76), MySQL (13), Nikon (19), PDF (10), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (20), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (126), выпечка (30), выставки (120), генератор ПСЧ (10), графика (121), десерты (31), Египет (9), заготовки на зиму (47), закуска (22), закуска к пиву (25), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (322), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (69), мониторы (6), музеи (78), мультимедиа (82), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (71), оформление сайта (51), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (131), полезные функции (42), прохождения (4), процессы (25), птица (22), путешествия (26), распаковка (22), реверсинг (52), регулярные выражения (5), рыба (35), салаты (19), сброс триала (4), сеть (37), система (178), Сокольники (8), соусы (15), супы (14), телефоны (10), Тунис (6), умный дом (14), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (17), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,665 раз
<< 2024 - ДЕКАБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
День добровольца (волонтера)
День начала контрнаступления советских войск под Москвой
День онлайн-предпринимателя
День ниндзя
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0033 сек.) / Память: 4.5 Mb
Наверх