Эта функция теперь доступна для тестирования здесь, на Meta. Загрузка изображения здесь вызовет изменение размера и кодирование в браузере пользователя перед отправкой на сервер.
Пожалуйста, попробуйте это в этой теме или в своём собственном сообществе, включив настройку сайта «composer media optimization image enabled». Мы оставляем её выключенной по умолчанию, пока проводим тестирование.
Чтобы проиллюстрировать разницу, вот пример «до/после»:
Один небольшой момент касается индикатора загрузки. При загрузке этого изображения HEIC размером 6,1 МБ прогресс довольно быстро достигал 100%, а затем оставался на этом уровне около 50 секунд, прежде чем завершиться. Это может вызвать путаницу или привести к отмене операции.
Это здорово. Быстрый вопрос, возможно, очевидный — возможно ли включить это только для изображений, превышающих лимит сайта? Таким образом, изображения в пределах лимита не обрабатываются, но если кто-то попытается превысить его, система, по-видимому, уменьшит их масштаб?
Вы не протестировали эту новую функцию, так как она не работает с уже загруженными изображениями 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) — это серверный процесс, поэтому они существенно различаются.
(Фото размером 28 МБ, которое я сделал в центре города во время первого локдауна в 2020 году)
Я протестировал загрузку с различной скоростью подключения — от 1 Гбит/с до 1 Мбит/с. Всё работало хорошо, кроме случая со скоростью 1 Мбит/с. Поведение загрузки в этом случае было немного странным.
Загрузка долго зависала на 0%, затем процент быстро рос (быстрее, чем это возможно при скорости 1 Мбит/с), потом снова зависал на 100% на длительное время, после чего появилось следующее сообщение:
Если мы отменяем сообщение и удаляем черновик во время загрузки изображения, а затем пытаемся опубликовать новый ответ, индикатор загрузки всё ещё отображается в редакторе:
Очень крутое фото! Уменьшение с 28 МБ до 113 КБ — отличный результат!
Таким образом, эта новая функция меняет только этап «предварительной загрузки». Мы перехватываем файл, который вы пытаетесь загрузить, применяем к нему преобразования, затем заменяем его на новый, уменьшенный файл, и возобновляем обычный процесс загрузки.
В фазе предварительной загрузки он остаётся на 0% и показывает «Обработка…», так что это ожидаемое поведение. Я также попробую заменить строку «Загрузка…» внизу.
Файлы размером более 4 МБ по-прежнему запрещены. Суть в том, что мы оптимизируем изображение, чтобы его размер стал ≤4 МБ, насколько это возможно, чтобы оно могло пройти проверку ограничения размера файла.
Я попробовал несколько изображений с этого сайта, но все они используют прозрачность в формате PNG, поэтому я не могу безопасно конвертировать их в JPG, и оптимизатор отказывается работать.
Я также протестировал PNG размером 60 МБ: оптимизатор справился, но при этом использовал более 4 ГБ оперативной памяти, чтобы в итоге получить JPG размером 360 КБ.
Какое устройство, браузер и версию операционной системы вы использовали при этом тесте?
Я начал использовать оптимизацию изображений через Composer. Обратил внимание, что если я хочу загрузить больше фотографий, кнопка «Ответить» активируется после загрузки первого изображения и деактивируется только после завершения оптимизации следующего. Если нажать кнопку «Ответить» в этот момент, остальные загрузки изображений зависают, и будет составлено только сообщение с текстом (обработка). У меня не удалось воспроизвести это здесь, так как на Meta кнопка меняется быстро, но на моём сайте она часто зависает на ~10 секунд или дольше между загрузками. Я использую настройки по умолчанию и три изображения по ~3–4 МБ.
Я тестировал это на Huawei P20 Pro с Android 10 (Chrome 91.0.4472.120) в веб-приложении.
Как видно на видео, после загрузки (Feltöltés) кнопка «Ответить» активируется. Размер каждого изображения ~2,3 МБ.
Возможно ли отключить кнопку «Ответить» на всё время загрузки изображений?
Я запутался в этих настройках. Правильно ли указано «килобайты»?
Спасибо за сообщение! Была ошибка при вычислении состояния отключения кнопки:
Да, Kilobyte - Wikipedia. По умолчанию установлено половина мегабайта, но вы можете изменить это значение по необходимости. Если вы хотите максимально сэкономить место, рекомендую установить значение около 300 КБ.
Понятно. Я подумал, что это опечатка: вместо байтов написаны килобайты. Потому что я ввёл 524288 КБ в конвертер, и он показал 512 МБ. Вот от чего возникла путаница. Но теперь я всё понял. Спасибо.
Спасибо за исправление Теперь всё работает отлично!
У меня вопрос по поводу загрузки изображений с мобильных устройств. При загрузке изображения с телефона его размер не изменяется до целевой ширины в пикселях. Мне кажется, меняется только качество. Если я пробую это на настольном ПК, изменение размера работает. Не упустил ли я что-то? Спасибо
Мы стараемся изменять размер как на мобильных устройствах, так и на настольных компьютерах, но операция изменения размера может не выполниться, если аппаратное обеспечение вашего устройства слишком слабое. В таком случае мы пропускаем её.