A
A
Alexey Yarkov2016-05-04 16:05:16
Node.js
Alexey Yarkov, 2016-05-04 16:05:16

How to use connect-image-optimus?

Who used the connect-image-optimus module? What is the benefit from it? This is how I connected it to the server:

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

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

And what do I need to change on the client? For example, the size of the given pictures has not changed, judging by the Chrome Network Tools.
#UPD1:
An example of headers when uploading an image:
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

As we can see, this is present in the request headers:
Accept:image/webp,image/*,*/*;q=0.8
But in the response headers this is: The mailru.webp
Content-Type:image/png
file lies next to the requested one, but is not returned. CHADNT?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexey Yarkov, 2016-05-04
@yarkov

So, I answer the question))) You need to include a layer before the first call to express.static.
And then I first called, and then I tried to specify a folder with pictures separately))

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

K
Konstantin Kitmanov, 2016-05-04
@k12th

What is the benefit from it?
That is, you used it without even looking at what it is? :)
It can give webp instead of png if there is a file with the same name, but with the webp extension (similarly with jpg and jxr), if the browser supports the appropriate format. Accordingly, it works only if you first create the appropriate files.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question