Спустя 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кб
Жду вашей помощи.
Если хочется видеть графики в PNG — что не сильно спасает качество, то вариантов 3:
1. Забить.
2. Сделать такой интерфейс, в котором пользователи будут грузить графики и картинки по-разному.
3. Не делать интерфейс, прикрутить нейронную сеточку, которая сама решает, как грузить фоточки
tilda.cc/ru/lp/image-optimization/
Технологии оптимизации доставки изображений посетителям вашего сайта
* Тимофей, предлагаю самый революционный способ на сегодняшний день. Это инструкция по сайтам конструкторам типа TILDA.
Тимофей Мартынов,
github.com/scionoftech/webp-converter#readme
можно вот такое попробовать
Что грузят ПНГ и он становится большой?
Или что ПНГ не становится ДжиПЕГом?
Или что Тимофой думает, что ПНГ выглядит заметно лучше ДжиПЕГа?
Иначе как ответить на твой вопрос?
Йонатан Берсон, надо, надо.
Там достаточно настроек, чтобы получить приемлемое качество.
Для удобства есть progressive JPEG
https://cloudinary.com/blog/progressive_jpegs_and_green_martians
В вашем случае проблема похоже в библиотеке для ресайза, либо в её не совсем оптимальной конфигурации. Для теста попробуйте те же картинки поресайзить на популярных сервисах, например https://www.imgix.com/
я же и так вижу что у нас через жопу
мне технология нужна нормальная
И да, купи дошик прогеру, он голодный.
лучше пообещать 15 000, а потом кинуть…
1. чтобы картинка не превращалась в говно при загрузке
2. чтобы файл не увеличивался в 5 раз с ухудшением качества
Ищите настройки в библиотеке или замените его другим.
Тимофей,
юзверей слушать не надо.
JPEG vs PNG
www.google.com/search?q=png+vs+jpeg
habr.com/ru/post/118026/
каждый подходит к определённому случаю.
Если сохраняешь оригинальный формат, смотри, что у тебя в настройках качества «сжимателя» твоего стоит.
```
```
Для JPEG оптимально
Сейчас, модно (и правильно), прогонять картинку через несколько оптимизаторов (на nodejs удобненько это делать).
Что-то типа тако-го (превращает картинки, чтобы google pagespeed считал их оптимизированными :
Тебе куда-то сюда -
github.com/imagemin/imagemin-cli
Вообщем, можно найти бесплатные решения.
Размеры картинки можно (и нужно) менять через CSS.
Если картинка прошла фильтр загрузки, то на уровне отображения в браузерах ее можно масштабировать как угодно - https://webref.ru/layout/html5-css3/img/scale
Физический ресайзинг картинок — это какой-то прошлый век
В ситуации с графиком, я подозреваю, что ты грузишь PNG8, а конвертируешь в PNG24. Первый использует ограниченную палитру цветов и поэтому занимает меньше места на диске, чем второй.
en.wikipedia.org/wiki/Portable_Network_Graphics#Pixel_format
Схема примерно такая:
internet ---> nginx with cache ---> imgproxy ---> /path/to/original.png
превью: JPG JPG JPG JPG JPG
сжатый донельзя
нормальный вид: PNG размер больше
… казалось бы причём здесь интеграл…
Для png есть замечательная утилита optipng, можно уменьшить размер процентов на 30 (optipng -o 7 --strip all <путь к файлу>).
А объяснение увеличения размера очень простое: при масштабировании изображения производится интерполяция, соседние пиксели вместо резких границ «замыливаются». Png такие картинки плохо сжимает. Можно поступать просто: если после обработки картинка стала больше, сохранять оригинал.