Blog. Just Blog

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

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

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

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

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

На сайте есть примеры доступа к API на разных языках программирования, в том числе и на 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($chCURLOPT_URL'https://api.tinify.com/shrink');
  14. curl_setopt($chCURLOPT_RETURNTRANSFERtrue);
  15. curl_setopt($chCURLOPT_HEADERfalse);
  16. curl_setopt($chCURLOPT_POSTtrue);
  17. curl_setopt($chCURLOPT_SSL_VERIFYPEERfalse);
  18. curl_setopt($chCURLOPT_POSTFIELDSjson_encode($param));
  19. curl_setopt($chCURLOPT_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($chCURLOPT_URL$json['output']['url']);
  31.         curl_setopt($chCURLOPT_RETURNTRANSFERtrue);
  32.         curl_setopt($chCURLOPT_HEADERfalse);
  33.         curl_setopt($chCURLOPT_POSTfalse);
  34.         curl_setopt($chCURLOPT_SSL_VERIFYPEERfalse);
  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 с результатами, из которых нас интересует только ссылка на оптимизированный файл. Загружаете его любым удобным вам способом и сохраняете куда требуется. Никакую обработку ошибок я тут не реализовывал, это вы сделаете самостоятельно.
  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($chCURLOPT_URL'https://api.tinify.com/shrink');
  13. curl_setopt($chCURLOPT_RETURNTRANSFERtrue);
  14. curl_setopt($chCURLOPT_HEADERfalse);
  15. curl_setopt($chCURLOPT_POSTtrue);
  16. curl_setopt($chCURLOPT_SSL_VERIFYPEERfalse);
  17. curl_setopt($chCURLOPT_POSTFIELDS$image_data);
  18. curl_setopt($chCURLOPT_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($chCURLOPT_URL$json['output']['url']);
  29.         curl_setopt($chCURLOPT_RETURNTRANSFERtrue);
  30.         curl_setopt($chCURLOPT_HEADERfalse);
  31.         curl_setopt($chCURLOPT_POSTfalse);
  32.         curl_setopt($chCURLOPT_SSL_VERIFYPEERfalse);
  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, тут тоже есть два варианта загрузки файлов. При передаче ссылки можно дополнительно указать качество получаемого изображения.
  1. // Ссылка на изображение
  2. $source='https://example.com/original.png';
  3.  
  4. // Отправить запрос
  5. $ch=curl_init();
  6. curl_setopt($chCURLOPT_URL,
  7.    'http://api.resmush.it/ws.php?qlty=100&img='.$source);
  8. curl_setopt($chCURLOPT_RETURNTRANSFERtrue);
  9. curl_setopt($chCURLOPT_HEADERfalse);
  10. curl_setopt($chCURLOPT_POSTfalse);
  11. curl_setopt($chCURLOPT_SSL_VERIFYPEERfalse);
  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($chCURLOPT_URL$json['dest']);
  20.         curl_setopt($chCURLOPT_RETURNTRANSFERtrue);
  21.         curl_setopt($chCURLOPT_HEADERfalse);
  22.         curl_setopt($chCURLOPT_POSTfalse);
  23.         curl_setopt($chCURLOPT_SSL_VERIFYPEERfalse);
  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.
  1. // Подготовить локальный файл для загрузки
  2. $file='original.png';
  3. $info=pathinfo($file);
  4. $upload=new CURLFile($filemime_content_type($file), $info['basename']);
  5.  
  6. // Отправить запрос
  7. $ch=curl_init();
  8. curl_setopt($chCURLOPT_URL'http://api.resmush.it/ws.php?qlty=100');
  9. curl_setopt($chCURLOPT_RETURNTRANSFERtrue);
  10. curl_setopt($chCURLOPT_HEADERfalse);
  11. curl_setopt($chCURLOPT_POSTtrue);
  12. curl_setopt($chCURLOPT_SSL_VERIFYPEERfalse);
  13. curl_setopt($chCURLOPT_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($chCURLOPT_URL$json['dest']);
  22.         curl_setopt($chCURLOPT_RETURNTRANSFERtrue);
  23.         curl_setopt($chCURLOPT_HEADERfalse);
  24.         curl_setopt($chCURLOPT_POSTfalse);
  25.         curl_setopt($chCURLOPT_SSL_VERIFYPEERfalse);
  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. Так что выбирайте сами.

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

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

Комментарии

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

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

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

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