Изображение блога
Тимофей Мартынов
Тимофей Мартынов Блог компании sMart-lab.ru
08 сентября 2020, 12:03

Проблема загрузки картинок на смартлаб. Нужна помощь технарей.

Спустя 10 лет функционирования смартлаба я вдруг заметил нечто, за что нам в самую пору выдать премию Дарвина в области интернета😀

И вот в чем он заключается. Когда я гружу график PNG весом 100КБ на смартлаб, мы из него делаем 2 картинки: 
👉№1«небольшую» превьюшку уменьшенного размера
👉№2 и саму картинку сжатую до максимальной ширины 1024px

Так вот РЖАКА в том, что «сжимая» картинку 100 КБ, мы получаем хуже качество, и вес 180КБ вместо начальных 100.
Кроме того мы создаем еще №2 весом 376 КБ… Итого изначальный идеальный файл 100 КБ мы превращаем в 500 КБ ХУДШЕГО КАЧЕСТВА.

Иллюстрация:
Исходник: 1518x931 = 100кб
Превьюшка: 590x362 = 180кб
Фулсайз: 1024x628 = 376кб

Тест загрузки картинки на смартлаб


ЗНАТОКИ, ВНИМАНИЕ ВОПРОС! 
КАК НАМ ОПТИМИЗИРОВАТЬ ЗАГРУЗКУ КАРТИНОК НА СМАРТЛАБ, ЧТОБЫ НЕ ПОРТИТЬ КАЧЕСТВО PNG И НЕ УВЕЛИЧИВАТЬ ВЕС НАЧАЛЬНОЙ КАРТИНКИ?

Другие примеры показывают, что алгоритм сжатия смартлаба имеет смысл только если грузить очень большие фотографии
Пробуем грузить большую фотографию:

Исходник PNG: 1511x989 = 2850кб
Превьюшка: 590x362 = 414кб
Фулсайз: 1024x628 = 1160кб


Тест загрузки картинки на смартлаб 

Пробуем грузить маленькую фотографию:


Исходник PNG: 1222x763 = 852кб 
Превьюшка: 590x362 = 287кб 
Фулсайз: 1024x628 = 705кб

Тест загрузки картинки на смартлаб

Жду вашей помощи.
49 Комментариев
  • FinSerfing
    08 сентября 2020, 12:07
    Изначально странно, что вы используете PNG, а не JPG.
    • бред пит
      08 сентября 2020, 12:10
      Заплати программисту, Тимофей
      • cdb\2.1
        08 сентября 2020, 18:24
        бред пит, и пабольше пабольше! 
  • dnmsk ☮
    08 сентября 2020, 12:10
    Не грузить картинки в PNG.
    Если хочется видеть графики в PNG — что не сильно спасает качество, то вариантов 3:
    1. Забить.
    2. Сделать такой интерфейс, в котором пользователи будут грузить графики и картинки по-разному.
    3. Не делать интерфейс, прикрутить нейронную сеточку, которая сама решает, как грузить фоточки
  • Astrolog
    08 сентября 2020, 12:15

    tilda.cc/ru/lp/image-optimization/
     
    Технологии оптимизации доставки изображений посетителям вашего сайта
     

    * Тимофей, предлагаю самый революционный способ на сегодняшний день. Это инструкция по сайтам конструкторам типа TILDA.
     


      • Astrolog
        08 сентября 2020, 18:40
        Тимофей Мартынов, думаю, что они не сами ее придумали, а где то взяли готовую, и под себя адаптировали. Вы можете связаться с их поддержкой, возможно подкажут, как программист -программисту исходники. Которые могут быть открытыми.
      • Алексей
        09 сентября 2020, 05:13

        Тимофей Мартынов, 

         

        github.com/scionoftech/webp-converter#readme

         можно вот такое попробовать

  • dnmsk ☮
    08 сентября 2020, 12:15
    Вообще не понятно в чем проблема:
    Что грузят ПНГ и он становится большой?
    Или что ПНГ не становится ДжиПЕГом?
    Или что Тимофой думает, что ПНГ выглядит заметно лучше ДжиПЕГа?
  • Иванов
    08 сентября 2020, 12:15
    Чем жмете?
      • Иванов
        08 сентября 2020, 19:08
        Тимофей Мартынов, Ну так надо узнать чем жмете и с какими параметрами.
        Иначе как ответить на твой вопрос?
        • cdb\2.1
          09 сентября 2020, 05:42
          Иванов, через GD жмем. jpg->jpg качество 100, PNG -> PNG. 
  • Йонатан Берсон
    08 сентября 2020, 12:17
    только не надо JPG!!! 
    • FinSerfing
      08 сентября 2020, 12:22

      Йонатан Берсон, надо, надо.

      Там достаточно настроек, чтобы получить приемлемое качество.

      Для удобства есть progressive JPEG

      https://cloudinary.com/blog/progressive_jpegs_and_green_martians

      • Йонатан Берсон
        08 сентября 2020, 13:13
        FinSerfing, сам подход к формированию файла JPG приводит к искажению данных, особенно это сказывается на графиках и т.д. Красивые картинки грузите в любом формате, таблицы и графики только PNG
  • Валерий Крылов
    08 сентября 2020, 12:18
    Превью 500 пикселей не должна весить 300 КБ. Какой-то косяк в настройках/сжатии…
  • Евгений Жерелий
    08 сентября 2020, 12:20
    проверь и измени настройки сжатия PNG. Или замени ковертер на более нормальный. Или есть еще новый формат типа PNG только лучше.
  • Dmitryy
    08 сентября 2020, 12:21
    PNG правильный выбор для графиков. JPEG хороший выбор для изображений. 
    В вашем случае проблема похоже в библиотеке для ресайза, либо в её не совсем оптимальной конфигурации. Для теста попробуйте те же картинки поресайзить на популярных сервисах, например https://www.imgix.com/
      • Dmitryy
        08 сентября 2020, 21:05
        Тимофей Мартынов, если вы не хотите использовать сторонние сервисы, а с вашими объемами это вполне резонно, то нужно колдовать с конфигурацией. Взять картинки и запилить тестовый скрипт, который их все ресайзит. И потом менять настройки и смотреть что выходит. Я бы не надеялся получить тут готовый солюшн, но его вполне можно нагуглить.
  • Diamond
    08 сентября 2020, 12:21
    Зачем вообще использовать тяжёлый формат PNG? Переходи на JPEG, либо на сервере автоматически поставь преобразование всех загружаемых PNG в JPEG с качеством сжатия не ниже 80, алгоритмы сжатия обычно одинаковые и перебирать их вряд ли есть смысл. Если уменьшаешь размеры картинок, то уменьшай их максимум до 1920x1080.

    И да, купи дошик прогеру, он голодный.
    • 2153sved
      08 сентября 2020, 12:32
      Diamond, 
      И да, купи дошик прогеру, он голодный.

      лучше пообещать 15 000, а потом кинуть…
  • siesta00
    08 сентября 2020, 12:31
    Очистить ресайзы картинок для древних тем, и генерировать в них изображения по мере открытия этих страниц. И можно забыть о доступном месте. Можно еще попробовать webp, там отличное сжатие без потери качества
  • Ray Badman
    08 сентября 2020, 12:34
    Наверно баша библиотека в процессе сжатия увеличивает bits per pixel. У обеих измененных картинок bit depth равен 32, а исходник не доступен для скачивания и проверки. Похоже он от tradingview, у которого bit depth 24.
    Ищите настройки в библиотеке или замените его другим.
  • DaHanG
    08 сентября 2020, 12:44
    png может хранить еще альфаканал, который в данном случае не нужен, возможно он появляется при конвертации и увеличивает размер файла. В 8-ми битных картинках получается 8 бит на канал, т.е. на каждый RGB канал = 8*3=24бит  если еще альфа, то еще 8 бит = 32бит(суммарно на все каналы). Png так же может иметь 16 бит на канал, должно быть 8, чтобы не было оверсайза.
  • Алексей
    08 сентября 2020, 13:33

    Тимофей,

    юзверей слушать не надо. 

     

    JPEG vs PNG

    www.google.com/search?q=png+vs+jpeg

    habr.com/ru/post/118026/

    каждый подходит к определённому случаю.

     

     

    Если сохраняешь оригинальный формат, смотри, что у тебя в настройках качества «сжимателя» твоего стоит.

    ```

    $cmd .= ' jpeg:- | cjpeg -optimize -baseline -quality 85 -outfile ' . $outputFile .<br />    " ; jpegtran -fastcrush -optimize -copy none -outfile {$outputFile} {$outputFile} ";

    ```

    Для JPEG оптимально

    -quality 85

     

    Сейчас, модно (и правильно), прогонять картинку через несколько оптимизаторов (на nodejs удобненько это делать).

    Что-то типа тако-го (превращает картинки, чтобы google pagespeed считал их оптимизированными :

    var merge = require('merge-stream');
    var image = require('gulp-image');
    var changed = require('gulp-changed');
    
    module.exports = function (gulp) {
        return function () {
            var components = gulp.src('v2/components/**/*.{png,gif,jpg,jpeg,ico,svg,woff,woff2,eot,ttf}', {base: './v2/component'})
                .pipe(changed('artifacts/files/v2/build/components/', {hasChanged: changed.compareLastModifiedTime}))
                .pipe(image({
                    jpegoptim: true,
                    mozjpeg: true,
                    concurrent: 10
                }))
                .pipe(gulp.dest('artifacts/files/v2/build/components/'));
    

     

    Тебе куда-то сюда - 

    github.com/imagemin/imagemin-cli

     

    Вообщем, можно найти бесплатные решения.

    • Anton Shabunin
      09 сентября 2020, 20:39
      Для превью можно использовать сжатие с потерями и 256 или меньше цветов через pngquant php wrapper
  • GOLD
    08 сентября 2020, 13:46
    Зачем жать картинки, если в интерфейсе уже стоит ограничение на размер?

    Размеры картинки можно (и нужно) менять через CSS.
    • Oleg
      08 сентября 2020, 14:27
      $100, если исходник 2 МБ, то как его поменять через CSS?
      • GOLD
        08 сентября 2020, 14:42
        Oleg, на СЛ есть ограничение по разрешению и объему картинки:



        Если картинка прошла фильтр загрузки, то на уровне отображения в браузерах ее можно масштабировать как угодно - https://webref.ru/layout/html5-css3/img/scale

        Физический ресайзинг картинок — это какой-то прошлый век
  • Konstanin K.
    08 сентября 2020, 13:48

    В ситуации с графиком, я подозреваю, что ты грузишь PNG8, а конвертируешь в PNG24. Первый использует ограниченную палитру цветов и поэтому занимает меньше места на диске, чем второй.

    en.wikipedia.org/wiki/Portable_Network_Graphics#Pixel_format

  • Leo
    08 сентября 2020, 14:25
    Используй imgproxy (https://github.com/imgproxy/imgproxy), который будет на лету ресайзить исходники с приемлемым качеством и сохранять результат куда-то в локальный кеш. Работы на полдня-день, не больше, минимальное вмешательство в код.

    Схема примерно такая:
    internet ---> nginx with cache ---> imgproxy ---> /path/to/original.png
  • Oleg
    08 сентября 2020, 14:25
    Насколько я помню для изображений используют JPG
  • Логарифм Интегралыч
    08 сентября 2020, 14:33
    очевиднейшая очевидность:

    превью: JPG JPG JPG JPG JPG
    сжатый донельзя

    нормальный вид: PNG размер больше

    … казалось бы причём здесь интеграл…
  • m0xfff
    08 сентября 2020, 19:13
    Только не jpeg! Он отлично подходит для фотографий, но не для скриншотов и графиков. В идеале хранить картинку в том формате, в котором она изначально загружена.

    Для png есть замечательная утилита optipng, можно уменьшить размер процентов на 30 (optipng -o 7 --strip all <путь к файлу>).

    А объяснение увеличения размера очень простое: при масштабировании изображения производится интерполяция, соседние пиксели вместо резких границ «замыливаются». Png такие картинки плохо сжимает. Можно поступать просто: если после обработки картинка стала больше, сохранять оригинал.

  • nbvehrfr
    08 сентября 2020, 19:57
    для быстрого решения проблемы — давайте ВСЕ исходные данные. где ссылка на исходник первого изображения ?

Активные форумы
Что сейчас обсуждают

Старый дизайн
Старый
дизайн