rss

Профиль компании

Финансовые компании

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

Спустя 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кб

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

Жду вашей помощи.
★2
49 комментариев
Изначально странно, что вы используете PNG, а не JPG.
avatar
Заплати программисту, Тимофей
avatar
бред пит, и пабольше пабольше! 
avatar
Не грузить картинки в PNG.
Если хочется видеть графики в PNG — что не сильно спасает качество, то вариантов 3:
1. Забить.
2. Сделать такой интерфейс, в котором пользователи будут грузить графики и картинки по-разному.
3. Не делать интерфейс, прикрутить нейронную сеточку, которая сама решает, как грузить фоточки
avatar

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

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


avatar
Astrolog, спасибо
Astrolog, так эта технолония же не открытая. Они ее там сами разработали и юзают, мы то ее как можем заимствовать?
Тимофей Мартынов, думаю, что они не сами ее придумали, а где то взяли готовую, и под себя адаптировали. Вы можете связаться с их поддержкой, возможно подкажут, как программист -программисту исходники. Которые могут быть открытыми.
avatar

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

 

github.com/scionoftech/webp-converter#readme

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

avatar
Вообще не понятно в чем проблема:
Что грузят ПНГ и он становится большой?
Или что ПНГ не становится ДжиПЕГом?
Или что Тимофой думает, что ПНГ выглядит заметно лучше ДжиПЕГа?
avatar
Чем жмете?
avatar
Иванов, откуда я знаю
Тимофей Мартынов, Ну так надо узнать чем жмете и с какими параметрами.
Иначе как ответить на твой вопрос?
avatar
Иванов, через GD жмем. jpg->jpg качество 100, PNG -> PNG. 
avatar
только не надо JPG!!! 
avatar

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

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

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

https://cloudinary.com/blog/progressive_jpegs_and_green_martians

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

И да, купи дошик прогеру, он голодный.
avatar
Diamond, 
И да, купи дошик прогеру, он голодный.

лучше пообещать 15 000, а потом кинуть…
avatar
2153sved, 🤦‍♀️🤣🤣🤣
avatar
Diamond, он не может самостоятельно решить, приходится обращаться за помощью
Очистить ресайзы картинок для древних тем, и генерировать в них изображения по мере открытия этих страниц. И можно забыть о доступном месте. Можно еще попробовать webp, там отличное сжатие без потери качества
avatar
siesta00, мне надо 
1. чтобы картинка не превращалась в говно при загрузке
2. чтобы файл не увеличивался в 5 раз с ухудшением качества
Наверно баша библиотека в процессе сжатия увеличивает bits per pixel. У обеих измененных картинок bit depth равен 32, а исходник не доступен для скачивания и проверки. Похоже он от tradingview, у которого bit depth 24.
Ищите настройки в библиотеке или замените его другим.
avatar
Ray Badman, разумно, спасибо
png может хранить еще альфаканал, который в данном случае не нужен, возможно он появляется при конвертации и увеличивает размер файла. В 8-ми битных картинках получается 8 бит на канал, т.е. на каждый RGB канал = 8*3=24бит  если еще альфа, то еще 8 бит = 32бит(суммарно на все каналы). Png так же может иметь 16 бит на канал, должно быть 8, чтобы не было оверсайза.
avatar
DaHanG, спс

Тимофей,

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

 

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

 

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

avatar
Алексей, спасибо
Для превью можно использовать сжатие с потерями и 256 или меньше цветов через pngquant php wrapper
avatar
Зачем жать картинки, если в интерфейсе уже стоит ограничение на размер?

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



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

Физический ресайзинг картинок — это какой-то прошлый век
avatar

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

en.wikipedia.org/wiki/Portable_Network_Graphics#Pixel_format

avatar
Konstanin K., спасибо, возможно
Используй imgproxy (https://github.com/imgproxy/imgproxy), который будет на лету ресайзить исходники с приемлемым качеством и сохранять результат куда-то в локальный кеш. Работы на полдня-день, не больше, минимальное вмешательство в код.

Схема примерно такая:
internet ---> nginx with cache ---> imgproxy ---> /path/to/original.png
avatar
Lev, спасибо, посмотрим
Насколько я помню для изображений используют JPG
avatar
очевиднейшая очевидность:

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

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

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

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

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

avatar
для быстрого решения проблемы — давайте ВСЕ исходные данные. где ссылка на исходник первого изображения ?

avatar

теги блога Тимофей Мартынов

....все тэги



UPDONW
Новый дизайн