hosting:optimization:images

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
hosting:optimization:images [2019/09/30 10:02]
karlov
hosting:optimization:images [2020/01/24 11:20] (текущий)
karlov
Строка 1: Строка 1:
 ====== 2.19.6. Оптимизация изображений ====== ====== 2.19.6. Оптимизация изображений ======
  
-На серверах хостинга присутствует ряд [[hosting:​configuration:​libs-and-utils|утилит]],​ с помощью которых можно ​выполнить ​оптимизацию изображений.+Оптимизировать изображения можно несколькими способами:​ 
 +  * [[#​без_изменения_исходных_файлов|Без изменения исходных файлов]] — файлы преобразовываются сервером на лету. 
 +  * [[#​с_изменением_исходных_файлов|С изменением исходных файлов]] — файлы преобразовываются заранее с помощью специализированных утилит. 
 + 
 +===== Без изменения исходных файлов ===== 
 + 
 +Оптимизация без изменения исходных файлов возможна благодаря модулю [[hosting:​optimization:​pagespeed|PageSpeed]]. Для этого в его настройках можно включить следующие опции:​ 
 +  * **inline_images** — позволяет встраивать небольшие изображения непосредственно в HTML в виде data: URL, что сокращает число запросов к серверу,​ необходимое для построения страницы. 
 +  * **recompress_images** — ускоряет загрузку изображений,​ на лету удаляя из них избыточную информацию (метаданные и цветовые профили ICC) и преобразовывая в наиболее подходящий формат (включает в себя конвертацию в формат WebP, если браузер клиента его поддерживает). 
 +  * **resize_images** — ускоряет загрузку больших изображений,​ сжимая их до того размера,​ в котором они отображаются на странице. 
 + 
 +===== С изменением исходных файлов ===== 
 + 
 +На серверах хостинга присутствует ряд [[hosting:​configuration:​libs-and-utils|утилит]],​ с помощью которых можно оптимизировать файлы ​изображений.
  
   * PNG:   * PNG:
Строка 18: Строка 31:
 </​note>​ </​note>​
  
-===== Использование скриптов ​=====+==== Использование скриптов ====
  
 К примеру,​ для оптимизации файлов ''​jpeg'',​ ''​jpg''​ и ''​png''​ можно использовать [[https://​gist.github.com/​lgiraudel/​6065155|такой]] bash-скрипт. К примеру,​ для оптимизации файлов ''​jpeg'',​ ''​jpg''​ и ''​png''​ можно использовать [[https://​gist.github.com/​lgiraudel/​6065155|такой]] bash-скрипт.
Строка 39: Строка 52:
  
 Скрипт использует утилиты:​ Скрипт использует утилиты:​
-  * ''​pngcrush''​ +  * ''​[[#pngcrush|pngcrush]]''​ 
-  * ''​optipng''​ +  * ''​[[#optipng|optipng]]''​ 
-  * ''​jpegtran''​+  * ''​[[#​jpegtran|jpegtran]]''​
  
-===== Работа с утилитами ​===== +==== Работа с утилитами ==== 
-==== pngcrush ​====+=== pngcrush ===
  
 Утилита для оптимизации изображений без потери качества. Синтаксис:<​code bash>​pngcrush опции исходный_файл.png оптимизированный_файл.png</​code>​ Утилита для оптимизации изображений без потери качества. Синтаксис:<​code bash>​pngcrush опции исходный_файл.png оптимизированный_файл.png</​code>​
Строка 56: Строка 69:
 Более детальную информацию по работе с утилитой можно получить выполнив команду:<​code bash>​pngcrush --help</​code>​ Более детальную информацию по работе с утилитой можно получить выполнив команду:<​code bash>​pngcrush --help</​code>​
  
-==== optipng ​====+=== optipng ===
  
 Утилита сжатия и оптимизации изображения,​ созданная на основе ''​pngcrush''​. Форматы изображений,​ которые могут быть преобразованы в оптимизированный PNG: Утилита сжатия и оптимизации изображения,​ созданная на основе ''​pngcrush''​. Форматы изображений,​ которые могут быть преобразованы в оптимизированный PNG:
Строка 73: Строка 86:
 Более детальную информацию по работе с утилитой можно получить,​ выполнив команду:<​code bash>​optipng --help</​code>​ Более детальную информацию по работе с утилитой можно получить,​ выполнив команду:<​code bash>​optipng --help</​code>​
  
-==== gifsicle ​====+=== gifsicle ===
  
 Утилита для работы с анимированными GIF-файлами. С её помощью можно производить множество действий:​ оптимизировать,​ масштабировать,​ обрезать. Утилита для работы с анимированными GIF-файлами. С её помощью можно производить множество действий:​ оптимизировать,​ масштабировать,​ обрезать.
Строка 82: Строка 95:
 Более детальную информацию по работе с утилитой можно получить,​ выполнив команду:<​code bash>​gifsicle --help</​code>​ Более детальную информацию по работе с утилитой можно получить,​ выполнив команду:<​code bash>​gifsicle --help</​code>​
  
-==== jpegoptim ​====+=== jpegoptim ===
  
 Утилита для оптимизации изображений JPEG и JPG. Утилита для оптимизации изображений JPEG и JPG.
Строка 97: Строка 110:
 Более детальную информацию по работе с утилитой можно получить,​ выполнив команду:<​code bash>​jpegoptim --help</​code>​ Более детальную информацию по работе с утилитой можно получить,​ выполнив команду:<​code bash>​jpegoptim --help</​code>​
  
-==== jpegtran ​====+=== jpegtran ===
  
 Ещё одна утилита для оптимизации изображений JPEG и JPG без потери качества. Ещё одна утилита для оптимизации изображений JPEG и JPG без потери качества.
  • hosting/optimization/images.txt
  • Последние изменения: 2020/01/24 11:20
  • — karlov