Тестирование оптимизации изображений Composer

Продолжаем обсуждение из темы Опциональная оптимизация изображений перед загрузкой:

Эта функция теперь доступна для тестирования здесь, на Meta. Загрузка изображения здесь вызовет изменение размера и кодирование в браузере пользователя перед отправкой на сервер.

Пожалуйста, попробуйте это в этой теме или в своём собственном сообществе, включив настройку сайта «composer media optimization image enabled». Мы оставляем её выключенной по умолчанию, пока проводим тестирование.

Чтобы проиллюстрировать разницу, вот пример «до/после»:


Изображение было только что сделано на моём телефоне и уменьшилось с 3,7 МБ до 416 КБ с использованием наших настроек по умолчанию.

Цель этой функции описана здесь @sam:

Discourse поставляется с лимитом в 4 МБ для загрузок пользователями «из коробки». Теперь я могу перетащить JPEG размером 58 МБ:

И он загружается без проблем.

46 лайков

Вот фотография деревьев размером 57 МБ, которую я сделал 10 лет назад и перетащил в редактор:

Это было довольно быстро! :rocket:

29 лайков

Отличная работа!

Один небольшой момент касается индикатора загрузки. При загрузке этого изображения HEIC размером 6,1 МБ прогресс довольно быстро достигал 100%, а затем оставался на этом уровне около 50 секунд, прежде чем завершиться. Это может вызвать путаницу или привести к отмене операции.

Видео с демонстрацией проблемы: Image optimization loading percentage | Loom

20 лайков

Это здорово. Быстрый вопрос, возможно, очевидный — возможно ли включить это только для изображений, превышающих лимит сайта? Таким образом, изображения в пределах лимита не обрабатываются, но если кто-то попытается превысить его, система, по-видимому, уменьшит их масштаб?

14 лайков

Это то, чего я так долго ждал :heart_eyes: Спасибо, Фалько.

У меня вопрос: оптимизируются ли старые изображения при повторной генерации постов или только новые загрузки? Спасибо ещё раз :slightly_smiling_face:

4 лайка

Вы не протестировали эту новую функцию, так как она не работает с уже загруженными изображениями HEIF. Я хотел работать с форматом HEIF, но поддержка декодирования в браузерах отсутствует: HEIF/HEIC image format | Can I use... Support tables for HTML5, CSS3, etc. Таким образом, вы протестировали серверное преобразование HEIF, которое у нас уже работает довольно давно.

Я мог бы реализовать это, внедрив декодер на WebAssembly, но такие изображения настолько редки, что я не счёл это необходимым, поскольку у нас уже есть серверное преобразование, над которым работал @pmusaraj.

На данный момент эта функция поддерживает загрузку изображений в форматах JPG, PNG и GIF. Я могу легко добавить поддержку AVIF, JPEGXL и TIFF и сделаю это в ближайшее время.

Да! Отрегулируйте параметр composer media optimization image kilobytes optimization threshold до нужного значения.

Нет, не будет. Эта работа выполняется в браузере пользователя непосредственно перед загрузкой. Пересборка (rebake) — это серверный процесс, поэтому они существенно различаются.

13 лайков

(Фото размером 28 МБ, которое я сделал в центре города во время первого локдауна в 2020 году)

Я протестировал загрузку с различной скоростью подключения — от 1 Гбит/с до 1 Мбит/с. Всё работало хорошо, кроме случая со скоростью 1 Мбит/с. Поведение загрузки в этом случае было немного странным.

Загрузка долго зависала на 0%, затем процент быстро рос (быстрее, чем это возможно при скорости 1 Мбит/с), потом снова зависал на 100% на длительное время, после чего появилось следующее сообщение:

Обратите внимание: исходный формат моего изображения — JPG, а не PNG… :thinking:

В посте остался текст [Uploading: 20200328_141218.jpg...]() вместо отображения самого изображения.

3 лайка

Две проблемы:

  1. Если мы отменяем сообщение и удаляем черновик во время загрузки изображения, а затем пытаемся опубликовать новый ответ, индикатор загрузки всё ещё отображается в редакторе:

    Чтобы это исправить, нам приходится перезагружать страницу.

  1. Для пользователя довольно запутанно, что сайт позволяет отправлять и отображать изображения размером до 50 МБ, но когда я пытаюсь отправить изображение 21600×21600 размером 108 МБ (отсюда https://visibleearth.nasa.gov/images/73751/july-blue-marble-next-generation-w-topography-and-bathymetry), получаю такое сообщение:

    Путаница возникает из-за того, что изображения больше 4 МБ запрещены, но при этом изображения размером более 50 МБ всё же принимаются.

Какова реальная причина, по которой я не могу загрузить это изображение?

2 лайка

Очень крутое фото! Уменьшение с 28 МБ до 113 КБ — отличный результат!

Таким образом, эта новая функция меняет только этап «предварительной загрузки». Мы перехватываем файл, который вы пытаетесь загрузить, применяем к нему преобразования, затем заменяем его на новый, уменьшенный файл, и возобновляем обычный процесс загрузки.

В фазе предварительной загрузки он остаётся на 0% и показывает «Обработка…», так что это ожидаемое поведение. Я также попробую заменить строку «Загрузка…» внизу.

Файлы размером более 4 МБ по-прежнему запрещены. Суть в том, что мы оптимизируем изображение, чтобы его размер стал ≤4 МБ, насколько это возможно, чтобы оно могло пройти проверку ограничения размера файла.

Я попробовал несколько изображений с этого сайта, но все они используют прозрачность в формате PNG, поэтому я не могу безопасно конвертировать их в JPG, и оптимизатор отказывается работать.

Я также протестировал PNG размером 60 МБ: оптимизатор справился, но при этом использовал более 4 ГБ оперативной памяти, чтобы в итоге получить JPG размером 360 КБ.

Какое устройство, браузер и версию операционной системы вы использовали при этом тесте?

5 лайков

Я добавил новое сообщение о статусе композера «Обработка загрузки», чтобы вы точно знали, что происходит сейчас.

Эту функцию можно безопасно протестировать. Пожалуйста, сообщите, как всё прошло в вашем сообществе!

9 лайков

Пробую с фото размером 1,6 МБ, сделанным на моем iPhone:

Вау, 300 кб и очень высокое качество.

6 лайков

5 лайков

8 лайков

Привет, Фалько,

Я начал использовать оптимизацию изображений через Composer. Обратил внимание, что если я хочу загрузить больше фотографий, кнопка «Ответить» активируется после загрузки первого изображения и деактивируется только после завершения оптимизации следующего. Если нажать кнопку «Ответить» в этот момент, остальные загрузки изображений зависают, и будет составлено только сообщение с текстом (обработка). У меня не удалось воспроизвести это здесь, так как на Meta кнопка меняется быстро, но на моём сайте она часто зависает на ~10 секунд или дольше между загрузками. Я использую настройки по умолчанию и три изображения по ~3–4 МБ.

Я тестировал это на Huawei P20 Pro с Android 10 (Chrome 91.0.4472.120) в веб-приложении.

Как видно на видео, после загрузки (Feltöltés) кнопка «Ответить» активируется. Размер каждого изображения ~2,3 МБ.

Возможно ли отключить кнопку «Ответить» на всё время загрузки изображений?


Я запутался в этих настройках. Правильно ли указано «килобайты»?

Спасибо за ответ! :slight_smile:

3 лайка

Спасибо за сообщение! Была ошибка при вычислении состояния отключения кнопки:

Да, Kilobyte - Wikipedia. По умолчанию установлено половина мегабайта, но вы можете изменить это значение по необходимости. Если вы хотите максимально сэкономить место, рекомендую установить значение около 300 КБ.

5 лайков

Спасибо за исправление. :slightly_smiling_face:

Понятно. Я подумал, что это опечатка: вместо байтов написаны килобайты. Потому что я ввёл 524288 КБ в конвертер, и он показал 512 МБ. Вот от чего возникла путаница. Но теперь я всё понял. :slightly_smiling_face: Спасибо.

3 лайка

Ох, теперь я вижу. Моя вина!

3 лайка

Привет,

Спасибо за исправление :slight_smile: Теперь всё работает отлично!

У меня вопрос по поводу загрузки изображений с мобильных устройств. При загрузке изображения с телефона его размер не изменяется до целевой ширины в пикселях. Мне кажется, меняется только качество. Если я пробую это на настольном ПК, изменение размера работает. Не упустил ли я что-то? Спасибо :slight_smile:

2 лайка

Мы стараемся изменять размер как на мобильных устройствах, так и на настольных компьютерах, но операция изменения размера может не выполниться, если аппаратное обеспечение вашего устройства слишком слабое. В таком случае мы пропускаем её.

4 лайка