Как узнать точные параметры кодировки/формата изображения, и как сконвертить также?

Question

[hckn]

Есть изображение



Как узнать самые точные параметры? И как сконвертить также, желательно каким-то NodeJS модулем (я использую для конвертации imagemin + его плагины, а также sharp)

Дело в том, что я кодирую в прогрессив, но мои картинки совершенно подругому ренерятся в браузере. А вот эта картинка очень класно рендерится, прям попикселям.

Comments

[Moskus]

Зачем вам "точные параметры"? Просто не ставьте адскую компрессию, попробуйте разные варианты chroma subsmpling. Если ваш автоматический компрессор, цель которого - только пожать как можно сильнее, так не умеет - нафига им пользоваться?

[hckn]

Moskus, точные параметры - потмоучто их там тьма. Просто безумное количество. Я недавно от ffmpeg долго отходил морально, так в картинках не проще. Я использую такие настройки (по сути дефолтно все сам плагин делает, я только quality)

plugins: [
                mozjpeg({quality: 80, progressive: true}),
                pngquant({quality: '65-80'})
              ]

https://github.com/imagemin/imagemin
https://github.com/imagemin/imagemin-mozjpeg

По идее доступны все апи https://github.com/mozilla/mozjpeg
Это вроде мощный энкодер. Там есть и другие тоже по jpeg, например jpegtran. Тут такой зоопарк, что я в а*?е
В этом непросто разобраться. В гиф мне вообще страшно лезть, а придется.

Поэтому, проще узнать точные настройки этого файла и исходить уже из этой цели.

[Moskus]

hckn, мощный или не мощный - не важно. У вас качество выставлено 80 - это может быть уже очень мало для некоторых изображений. Субдискретизация не указана. Вы можете узнать "точные настройки", например, через свойства изображения в irfanview или через identify -verbose из состава Imagemagick, но вам это не поможет. Я компрессией много лет занимаюсь, знаю, о чём говорю.

[hckn]

Moskus, если я поставлю качество больше, то тогда не будет никакого толку в этой оптимизации (размер финальный, я собственно из-за этого конверчу). Поэтому я подозреваю нужна более тонкая настройка.

Впрочем, до меня только что дошло, что я же в Хроме сижу, а у меня помимо jpeg там еще webp, а у него-то похоже и есть такая разверстка не по-пиксельная как у джпег. Хром берет webp по умолчанию (у меня picture таг)

[Moskus]

hckn, при сохранении размера никакими настройками вы почти ничего не выиграете, это научный факт.

Answer 1

[AngReload]

Наверное вы про такое:


Сейчас я думаю, что это зависит только от браузера — время от времени так декодируется любой прогрессивный jpeg, в зависимости от того насколько большая часть данных успела загрузиться для первого декодирования.

Ну а вообще, необычного в этом файле только YCbCr 4:4:0, не знаю программ которые бы имели такую опцию субдискретизации. Может есть ещё что-то интересное, но я не очень хорошо знаю jpeg.

Подробности о файле

JPEG, progressive, quality: 92, subsampling ON (1x2)

exiftool

ExifTool Version Number         : 11.10
File Name                       : keerthi.b283324e.jpg
Directory                       : .
File Size                       : 34 kB
File Modification Date/Time     : 2018:09:20 07:23:31+05:00
File Access Date/Time           : 2018:09:20 07:36:39+05:00
File Creation Date/Time         : 2018:09:20 07:36:39+05:00
File Permissions                : rw-rw-rw-
File Type                       : JPEG
File Type Extension             : jpg
MIME Type                       : image/jpeg
JFIF Version                    : 1.01
Resolution Unit                 : None
X Resolution                    : 300
Y Resolution                    : 300
Image Width                     : 337
Image Height                    : 337
Encoding Process                : Progressive DCT, Huffman coding
Bits Per Sample                 : 8
Color Components                : 3
Y Cb Cr Sub Sampling            : YCbCr4:4:0 (1 2)
Image Size                      : 337x337
Megapixels                      : 0.114

exiftool.exe -verbose keerthi.b283324e.jpg
  ExifToolVersion = 11.10
  FileName = keerthi.b283324e.jpg
  Directory = .
  FileSize = 34312
  FileModifyDate = 1537410211.50311
  FileAccessDate = 1537410999.40376
  FileCreateDate = 1537410999.40376
  FilePermissions = 33206
  FileType = JPEG
  FileTypeExtension = JPG
  MIMEType = image/jpeg
JPEG APP0 (14 bytes):
  + [BinaryData directory, 9 bytes]
  | JFIFVersion = 1 1
  | ResolutionUnit = 0
  | XResolution = 300
  | YResolution = 300
  | ThumbnailWidth = 0
  | ThumbnailHeight = 0
JPEG DQT (130 bytes):
JPEG SOF2 (15 bytes):
  ImageWidth = 337
  ImageHeight = 337
  EncodingProcess = 2
  BitsPerSample = 8
  ColorComponents = 3
JPEG DHT (27 bytes):
JPEG SOS

{ extended: false,
  progressive: true,
  precision: 8,
  scanLines: 337,
  samplesPerLine: 337,
  components:
   { '1':
      { h: 1,
        v: 2,
        quantizationIdx: 0,
        blocksPerLine: 43,
        blocksPerColumn: 43,
        blocks: [Array] },
     '2':
      { h: 1,
        v: 1,
        quantizationIdx: 1,
        blocksPerLine: 43,
        blocksPerColumn: 22,
        blocks: [Array] },
     '3':
      { h: 1,
        v: 1,
        quantizationIdx: 1,
        blocksPerLine: 43,
        blocksPerColumn: 22,
        blocks: [Array] } },
  componentsOrder: [ 1, 2, 3 ],
  maxH: 1,
  maxV: 2,
  mcusPerLine: 43,
  mcusPerColumn: 22 }
quantizationTable Int32Array [ 3, 2, 2, 3, 4, 6, 8, 10, 2, 2, 2, 3, 4, 9, 10, 9, 2, 2, 3, 4, 6, 9, 11, 9, 2, 3, 4, 5, 8, 14, 13, 10, 3, 4, 6, 9, 11, 17, 16, 12, 4, 6, 9, 10, 13, 17, 18, 15, 8, 10, 12, 14, 16, 19, 19, 16, 12, 15, 15, 16, 18, 16, 16, 16 ]
{ width: 337,
  height: 337,
  jfif:
   { version: { major: 1, minor: 1 },
     densityUnits: 0,
     xDensity: 300,
     yDensity: 300,
     thumbWidth: 0,
     thumbHeight: 0,
     thumbData: Uint8Array [  ] },
  adobe: null,
  components:
   [ { lines: [Array], scaleX: 1, scaleY: 1 },
     { lines: [Array], scaleX: 1, scaleY: 0.5 },
     { lines: [Array], scaleX: 1, scaleY: 0.5 } ] }

Comments

[hckn]

Да, речь именно о такой пикселизации!

Спасибо! Пару вопросов, если не трудно.

1. Откуда вы взяли эти параметры (вижу exiftool, а что еще использовалось?)
2. Как вы так удачно заскринили пиксели?

И вот, если не трудно посмотрите с какими настройками уменя сейчас конвертятся картинки (и я почему то не наблюдаю таких пикселей)

[AngReload]

hckn,
1. То что quality: 92 — это в IrfanView подсмотрел. Потом exiftool. И последнее — это я в декодер jpeg-js воткнул console.log() в разным местах.

2. Открыл картинку в новой вкладке. Открыл инструменты разработчика, отключил кэш браузера, установил ограничение скорости как 2G. Обновил страницу и в нужный момент нажал Print Screen.

3. Эта картинка Baseline, а не Progressive.