Как юзать connect-image-optimus?

Question

[Алексей Ярков]

Кто юзал модуль connect-image-optimus? В чем профит от него? Вот так я подключил его к серверу:

// Включаем оптимизацию изображений
var optimus = require('connect-image-optimus');
var ImgStaticPath = path.join(__dirname, '../build/img/');
app.use(optimus(ImgStaticPath));

// Определяем путь к папке картинок
app.use(express.static(ImgStaticPath));

И что мне на клиенте нужно изменить? Например размер отдаваемых картинок не изменился, судя по Chrome Network Tools.

#UPD1:
Пример заголовков при загрузке картинки:

GENERAL:
	Request URL:http://localhost:8080/img/icons/social/mailru.png
	Request Method:GET
	Status Code:200 OK
	Remote Address:[::1]:8080

RESPONSE HEADERS:
	Accept-Ranges:bytes
	Cache-Control:public, max-age=0
	Connection:keep-alive
	Content-Length:1968
	Content-Type:image/png
	Date:Wed, 04 May 2016 20:37:20 GMT
	ETag:W/"7b0-1547d78a53b"
	Last-Modified:Wed, 04 May 2016 20:32:19 GMT
	X-Content-Type-Options:nosniff
	X-Download-Options:noopen
	X-Frame-Options:SAMEORIGIN
	X-XSS-Protection:1; mode=block

REQUEST HEADERS:
	Accept:image/webp,image/*,*/*;q=0.8
	Accept-Encoding:gzip, deflate, sdch
	Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4
	Cache-Control:no-cache
	Connection:keep-alive
	Cookie:__ngDebug=true; _ga=GA1.1.1145251977.1460295894; SSID=s%3A6db1a581-512c-4202-9080-ff052681311d.j5%2F7PBzZjAQ%2FV9ulh8x%2FHjjydqoqNOfeiElvx5OcTYA
	DNT:1
	Host:localhost:8080
	Pragma:no-cache
	Referer:http://localhost:8080/user/social
	User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36

Как мы видим, в заголовках запроса присутствует это:
Accept:image/webp,image/*,*/*;q=0.8
Но в заголовках ответа это:
Content-Type:image/png
Файл mailru.webp лежит рядом с запрошенным, но не отдается. ЧЯДНТ?

Answer 1

[Алексей Ярков]

Итак, отвечаю на вопрос ))) Нужно включать прослойку перед первым вызовом express.static.
А то я сначала вызвал, а потом пытался отдельно папку с картинками указать ))

var StaticPath = path.join(__dirname, '../build');
// Включаем оптимизацию изображений
var optimus = require('connect-image-optimus');
app.use(optimus(StaticPath));
app.use(express.static(StaticPath));

Answer 2

[Константин Китманов]

В чем профит от него?

То есть вы его заюзали, даже не посмотрев, что это?:)

Он может отдавать webp вместо png, если есть файл с таким же именем, но с расширением webp (аналогично с jpg и jxr), если браузер поддерживает соответствующий формат. Соотвественно, работает, только если предварительно создать соответствующие файлы.

Comments

[Алексей Ярков]

Неправильно вопрос сформулировал ))) Обновил.