Ответы пользователя по тегу Изображения
  • Почему не удается отредактировать изображение?

    AngReload
    @AngReload
    Кратко о себе
    https://st.motortrend.com/uploads/sites/10/2017/11/2018-infiniti-q60-luxe-coupe-angular-front.png

    Несмотря на то что url заканчивается на png сервер если захочет, то может отдать хоть gif, хоть jpeg. Или вообще веб-страничку покажет. Окончание .png нужно только для удобства пользователей.

    Так для Хрома и других браузеров на его основе сервер отдаёт не png, а webp. WebP - это более новый формат картинок, который лучше сжимается. Но его поддерживают даже не все браузеры, а графические редакторы тем более.

    В данном случае сервер определяет по наличию в запросе от браузера Accept: image/webp поддерживается ли webp и выдаёт его, если да, и jpg если нет.

    Проще способ, использовать на страничке тег picture:

    <picture>
      <source srcset="img/awesomeWebPImage.webp" type="image/webp">
      <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
      <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
    </picture>
    Ответ написан
    Комментировать
  • Как лучше/проще/правильно сжимать фото для сайта?

    AngReload
    @AngReload
    Кратко о себе
    Недавно была публикация https://habr.com/post/422531/
    Для ретины лучше сделать альтернативный вариант изображения с помощью srcset.
    Ответ написан
    Комментировать
  • Как узнать точные параметры кодировки/формата изображения, и как сконвертить также?

    AngReload
    @AngReload
    Кратко о себе
    Наверное вы про такое:
    5ba3245b60183004850537.png

    Сейчас я думаю, что это зависит только от браузера — время от времени так декодируется любой прогрессивный 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 } ] }

    Ответ написан
    2 комментария
  • Из-за чего теряется качество изображений на Facebook?

    AngReload
    @AngReload
    Кратко о себе
    Это JPEG-а артефакты на второй пикче. Почему разница в качестве между первой и второй я не знаю, первая как будто даже PNG в отличии от пережатой второй.

    Теоретически если у вас логотип в виде красного прямоугольника, то артефакты на краях логотипа можно попытаться уменьшить.

    Внутрях жипега изображение представлено как один слой Яркости и два слоя Цветность-r и Цветность-b. Цветность хранится с размерами в половину ширины и высоты от всей фотографии. То есть цветность там с очень низким качеством.

    Каждый слой разделён на блоки по 8x8 пикселей (реальный размер такого блока для цветности — 16x16 пикселей).
    Артефакты сжатия из любого блока не влияют на его соседей. По этому можно попытаться выровнять логотип по сетке квадратов 16 на 16.

    Красный квадрат не выровнен по сетке:
    9oquafruc347fvtoft1ztknddc4.jpeg
    С выравниванием (настройка силы сжатия жипега та же самая):
    khwndcfzmjynkvqd50beamqe5dg.jpeg

    Что бы такое работало нужно ещё файсбук не ресайзил загружаемые картинки. И заморачиваться с сеткой надо. В общем, сомневаюсь что помог =)
    Ответ написан
    1 комментарий