Изменить размер изображений в Интернете: ловушка сетчатки и то, что тихо выбрасывает холст

В течение примерно шести месяцев каждая миниатюра в этом блоге была немного мягкой. Не сломал. Не явно неправильно. Просто… неясный, так, как вы замечаете краем глаза, а затем говорите о себе не замечать.

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

Причина в том, что пиксель CSS не является пикселем устройства Современный телефон или ноутбук на сетчатке глаза упаковывает два или три физических пикселя в каждый пиксель CSS - это's что window.devicePixelRatio отчеты. Таким образом, мое 600-пиксельная картинка растягивалась на 1200 физических пикселях стекла, и браузер изобретал разницу. Вы не можете придумывать детали, которых нет в файле. Исправлено было экспортировать на 1200 и позволить CSS отображать его на 600.

На этой ошибке построено это руководство, а также три или четыре других, которые делают изменения размеров хуже, чем должны. выше Инструмент изменения размера изображения на Toolz.dev делает работу в вашем браузере - файл никогда не покидает вашу машину - но инструмент является легкой частью. знать, какие числа ввести в него, - это та часть, которая на самом деле имеет значение.

TL;DR: экспортировать в 2× размер дисплея Для экранов Retina (слот 600px требует файла 1200px) и никогда не масштабируется ввысь- вы можете't добавить детали, которые никогда не были зафиксированы. Заблокируйте соотношение сторон, если только вы действительно не хотите исказить изображение. Изменить размер перед Вы сжимаете, а не после. использовать Инструмент изменения размера изображения Для установки размеров Калькулятор соотношения сторон Чтобы разобраться с недостающей стороной и имиджевый компресс чтобы уменьшить размер файла после этого. Все работает на стороне клиента. Одно предостережение, которое стоит знать заранее: изменение размера перекодирует изображение, поэтому Все метаданные EXIF удаляются- отлично подходит для конфиденциальности, иногда удивляет.

Почему мои изображения после изменения размера выглядят размытыми?

Девять раз из десяти это одна из трех вещей, и все они поправляются.

Вы увеличили масштаб. Увеличение фотографии 400×300 до 1600×1200 просит программное обеспечение создать двенадцать пикселей информации для каждого, что у него есть. Он делает это путем интерполяции - усреднения соседей, чтобы угадать, что принадлежит между ними - и результат мягкий, потому что детали действительно не существует. Ничто, кроме генеративной модели, не изобретает его обратно. Всегда начинайте с самого большого оригинала, который у вас есть, и масштабируйте. Вниз почти без потерь, вверх - это предположение.

Вы проигнорировали соотношение пикселей. Описанная выше ошибка Если CSS-бокс равен 600×400, а экран пользователя 's равен 2×, браузеру нужно 1200×800 реальных пикселей, чтобы сделать его четким Экспорт в 2× и позволить браузеру масштабироваться вниз - масштабирование в браузере выглядит великолепно; масштабирование выглядит как грязь.

что-то еще сжало его после вас. Вы тщательно изменили размер, а затем загрузили на платформу, которая перекодировала ваше изображение при его собственной настройке качества. Это делает каждая социальная платформа. Вы не можете остановить это, но вы можете уменьшить его: загружать близко к целевым измерениям платформы, чтобы она выполняла как можно меньше работы, и передать ей уже чищенный файл, а не тот, который он должен исправить.

Что на самом деле происходит при изменении размера изображения?

Стоит понять, потому что это объясняет большинство сюрпризов.

Растровое изображение представляет собой сетку пикселей. Уменьшение этой сетки означает принятие решения о том, что такое недавно Пиксель должен быть, когда он находится между несколькими старыми. Это решение называется передискретизация, и алгоритм имеет значение:

• ближайший сосед- захватите ближайший исходный пиксель Быстрые, блочные, неровные края. Корректируйте только для пиксельной графики, где блочность - это точка.
• билайнарный- усредните четыре ближайших пикселя. Гладкий, немного мягкий.
• бикубический- взвесьте шестнадцать окружающих пикселей с кубической кривой. Острее, чем билинейно; разумный дефолт в большинстве настольных программ.
• ланчосы- оконный фильтр sinc в более крупном районе. Лучшее качество для уменьшения масштаба, самое медленное, может вызвать слабый звон на высококонтрастных краях.

Изменение размера холста браузера находится в диапазоне от билинейного до бикубического и позволяет 't позволить вам точно выбрать - вы можете только попросить качество сглаживания, и спецификация HTML's по умолчанию для этого подсказки такова "low", йо- Это нормально для подавляющего большинства веб-работ, поэтому инструмент Toolz.dev кажется мгновенным.

Есть один трюк для мощного пользователя, который стоит знать, Когда вы уменьшаете масштаб на большой фактор за один шаг - скажем, 4000px до 400px, сокращение на 10 × - некоторые реализации браузера сэмплируются слишком редко, и вы получаете наложение: мерцающие края, муаровые узоры в ткани или кирпичной кладке, и теряют мелкие детали. обходной путь Понижательное масштабирование: Повторно вдвое (4000 → 2000 → 1000 → 500 → 400), поэтому каждый шаг выбрасывает только половину пикселей. Если когда-либо выйдет большое сокращение, чем вы ожидали, то причина, и это исправит это, и сделать это за два прохода.

Что на самом деле делает инструмент resize Toolz.dev?

Я лучше скажу вам ТОЧНО, чем вы узнаете позже. Это холст-изменитель на основе:

1. Ваш файл читается в браузере через URL-адрес объекта. это никогда не загружал- там 's нет сервера, на который можно было бы его загрузить.
2. Он нарисован на холсте HTML в целевых измерениях.
3. холст перекодирован в PNG, JPEG или webp (По умолчанию для форматов с потерями по умолчанию установлено значение 0,9).
4. Вы скачиваете результат.

Из этого следуют три последствия, и только один из них находится в большинстве инструментов, маркетинговой копии:

Метаданные EXIF удаляются. Повторный код холста создает совершенно новый файл. Модель камеры, объектив, время захвата и, что немаловажно, GPS-координаты не выживать. Для всего, что вы публикуете, это функция конфиденциальности, и настоящая: фотографии прямо с телефона обычно содержат точные координаты того, где они были сделаны. если вы нуждаться EXIF (скажем, для фотопортфолио) изменяет размер с помощью инструмента, который явно сохраняет его. Если источник сразу поступил с камерой, взгляните на ориентацию выхода перед публикацией.

Анимированные GIF-файлы выходят в виде единого кадра. Холст рисует один кадр. нет честного способа описать это как что-то иное, кроме ограничения - если вам нужно изменить размер анимации и поддерживать ее движение, это не инструмент. (I & # 39; лучше скажите это прямо, чем позволить вам обнаружить это после загрузки.)

Блокировка соотношения сторон означает "встраивающаяся" внутреннюю, а не "растягиваю до заливки". Если вы введете и ширину, и высоту с заблокированным соотношением, изображение будет масштабировано до соответствующего в пределах эта коробка, сохраняя при этом свои пропорции. так что фотография 16:9 с целью 1000×1000 выходит 1000×563, а не 1000×1000. она никогда не исказит ваше изображение - но она также выиграла 't обрезать его, чтобы заполнить квадрат. если вам нужен точный квадрат из прямоугольника, вам нужен обрез, а не изменение размера. это различие постоянно сбивает людей с толку и это & #39;s стоит быть точным.

Как на самом деле работают соотношения сторон?

Соотношение сторон — это просто ширина ÷ высота, выраженная в паре. Математика проста, и вы должны быть в состоянии сделать это в своей голове, потому что она предотвращает наиболее распространенную ошибку изменения размера: давя, йо-

Чтобы найти недостающую сторону, сохраняйте соотношение постоянных:

new_height = new_width × (original_height ÷ original_width)

Фото 4000×3000 (4:3) с изменением размера до 1200 шириной 1200 × (3000/4000) = 900 высокий. Вместо этого тип 1200 и 800, и вы ' вы втиснули изображение 4:3 в 3:2 - лица становятся уже, круги становятся овалами, и каждый может что-то сказать 's выключено, даже если он может 't сказать что. The Калькулятор соотношения сторон Делает это для вас и снижает соотношение для вас тоже.

Вот коэффициенты, которые продолжают появляться, с проверкой, а не копируются, а математические данные:

Одна честная нота на том & quot;1.91:1 & quot; строка, так как она меня каждый раз багет: 1200×628 на самом деле не 1.91:1. Уменьшается правильно it& #39;s 300:157, или 1.911. индустрия обходит его и все пожимают плечами.Это не & #39; не имеет значения на практике - но если вы & #39; вы когда-нибудь задумывались, почему 1200×628 не и #39;t делить на что-то чистое, то& #39;s почему.

Спецификации пикселей платформы меняются, коэффициенты почти никогда не меняются. Вместо того, чтобы доверять таблице измерений в сообщении в блоге (включая эту) для кампании, которая имеет значение, проверьте собственную текущую спецификацию платформы, а затем используйте приведенное выше соотношение, чтобы попасть в нее. Форма стабильна, даже когда цифры дрейфуют.

Какой размер должен быть на веб-изображениях?

Для веб-сайта, которым вы управляете - где вы & #39; оптимизируете для самой большой контентной краски, а не для кого-то другого и #39;s загрузчик - рассуждения другие и лучшие.

Начните с поля CSS, а не с изображения. Найдите, насколько широко изображение на самом деле отображается в вашем макете. Не контейнер's максимальная ширина - the изображение'с ширина, в точке останова, которая вас волнует. Затем удвойте его для сетчатки. Это ваш экспортный размер. Все, что помимо этого, — это байты, которые вы платите за доставку, а пользователь платит за скачивание, для нулевой видимой выгоды.

Подавайте более одного размера. Один файл 2400px расточительно для телефона, который будет отображать его в 380 пикселях CSS. srcset Существует именно для этого:

<img
  src="hero-1200.webp"
  srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200" height="675"
  alt="..."
/>

Браузер выбирает самый маленький файл, который все еще будет выглядеть на этом устройстве. и всегда ставь width а height атрибуты - они позволяют браузеру зарезервировать пространство до загрузки изображения, что не позволяет странице прыгать и разрушать вашу совокупную оценку изменения макета.

Сначала измените размер, сожмите второй. Это порядок, который люди получают назад. Сжатие изображения размером 4000 пикселей и к тому же изменение размера до 800px означает, что вы потратили усилия на оптимизацию пикселей, которые собирались выбросить - и вы, вероятно, впекли артефакты сжатия в пиксели, которые сохранили. Сначала отрежьте размеры, затем сжимайте то, что 's осталось с имиджевый компресс, йо- В любом случае размеры почти всегда являются более крупной победой: вдвое уменьшает обе стороны изображения 75% своих пикселей, прежде чем компрессор прикоснется к нему. Я углублюсь в это в Руководство по сжатию изображений, йо-

Затем выберите правильный формат. Примерно: JPEG для фотографий, png, когда вам нужна прозрачность или четкий текст и строки, WebP для практически всего в Интернете, потому что он превосходит оба по сравнению с эквивалентным качеством. выше Конвертер формата изображения обрабатывает этот шаг, и Обзор инструментов изображений Покрывает, как детали совпадают.

Как изменить размер изображения на Toolz.dev?

1. откройте Инструмент изменения размера изображения, йо- Нет аккаунта, ничего не устанавливал.
2. Вставьте свое изображение. Он загружается прямо в браузер.Смотрите вкладку "Сеть", если хотите ничего не доказать 's отправляется куда угодно - это's проверка, которую стоит выполнить на любом инструменте изображений, в который вы вставляете личные фотографии.
3. Введите целевые размеры. Введите ширину, при этом соотношение заблокировано, высота следует. Не забудьте удвоить для Retina, если это для экрана.
4. Выберите свой выходной формат- PNG, JPEG или WebP.
5. Скачать. Сгенерировано в вашем браузере, прямо на ваш диск.

Если вы 're создаете одно и то же изображение в нескольких размерах, работайте с самого большого оригинала каждый раз. Don't измените размер экспорта 1200px до 600px - вернитесь к оригиналу и экспортируйте 600 из него. Каждый повторный код уже потерянного файла усугубляет повреждение, точно так же, как ухудшается фотокопия фотокопии. It's небольшая дисциплина, которая отображается в конечном результате.

Часто задаваемые вопросы

Можно ли изменить размер изображения без потери качества?

При уменьшении масштаба почти ничего не заметно - вы 'отбрасываете данные пикселей, которые вам больше не нужны, и результат на экране выглядит резким. масштабирование всегда теряет качество, потому что программное обеспечение должно интерполировать пиксели, которые никогда не были захвачены, создавая мягкость или видимые артефакты. Всегда изменяйте размер вниз от самого большого оригинала, который у вас есть, а не вверх от маленького.

Какой размер я должен экспортировать для экранов Retina?

Экспортируйте в 2 раза больше, чем отображается изображение. Если ваш макет отображает изображение в поле 600 × 400, экспортируйте его со скоростью 1200 × 800, чтобы он оставался четким на устройствах с devicePixelRatio 2. Переход за 2× редко стоит дополнительных байтов, поскольку видимая выгода минимальна даже на 3-х дисплеях.

Изменение размера изображения удаляет данные EXIF?

Да, когда изменение размера происходит через холст HTML - как это происходит на Toolz.dev - инструмент повторно кодирует изображение в новый файл и метаданные EXIF не переносятся Это означает, что детали камеры, время захвата, и GPS координаты все удалены Для публикации, это преимущество конфиденциальности; если вам нужно сохранить EXIF, используйте инструмент, который явно поддерживает его.

Могу ли я изменить размер анимированного GIF и сохранить анимацию?

Не с холстом на основе resizer. Canvas захватывает один кадр, поэтому выход представляет собой неподвижное изображение в формате PNG, JPEG или WebP. Для изменения размера анимации при сохранении всех ее кадров требуется выделенный инструмент обработки GIF.

Как изменить размер изображения до определенного размера файла в КБ?

Размер файла - это не то, что вы устанавливаете напрямую - он выпадает из размеров, формата и качества сжатия. Работайте наоборот: уменьшите размеры до того, на чем изображение на самом деле отображается, экспортируйте как WebP или JPEG, а не PNG для фотографий, затем снизьте качество и повторно проверьте размер вывода. Попадание в жесткую цель, такую как & quot; менее 100 КБ & quot; обычно это два или три прохода этого цикла, а не один.

Как изменить размер изображения, не обрезав его?

Держите соотношение сторон заблокированным Когда ширина и высота остаются в исходной пропорции, каждый пиксель кадра сохраняется и меняется только масштаб Обрезка становится неизбежной только тогда, когда целевая форма отличается от исходной формы - подгонка фотографии 3:2 в слот аватара 1:1 означает либо почтовый ящик пустого пространства, либо вырезку части изображения.

Должен ли я изменить размер или сжать мои изображения в первую очередь?

Измените размер сначала, затем сжимайте. уменьшение размеров полностью удаляет пиксели - уменьшение вдвое ширины и высоты устраняет 75% из них - что почти всегда является большим выигрышем в размере файла, чем только сжатие. Сжатие перед изменением размера тратит усилия на пиксели, которые вы собираетесь выбросить, и может запекать артефакты в те, которые вы храните.

В чем разница между изменением размера и обрезкой?

Изменение размера изменяет размеры всего изображения, сохраняя все его содержимое. обрезка отрезает часть изображения, чтобы изменить его кадрирование или соотношение сторон. Если вам нужен квадрат из прямоугольной фотографии, изменение размера с заблокированным соотношением сторон поместит изображение внутрь квадрата, а не заполнит его - вам нужен обрез, чтобы заполнить кадр.

Есть ли ограничение на размер файла для изменения размера изображений в браузере?

Нет никакого ограничения, навязанного сервером, потому что ничего не загружается - практичный потолок - это ваше устройство и #39;s доступная память Типичные фотографии, включая большие файлы камеры, мгновенно изменяют размер Чрезвычайно большие изображения (например, сканирование с очень высоким разрешением) могут занять мгновение или, на телефоне с ограниченной памятью, не загружаться.

Почему мое изображение все еще выглядит размытым после изменения размера до нужных размеров?

Проверьте три вещи по порядку: масштабируете ли вы исходные данные меньшего размера (неисправимо - найдите источник большего размера), учитывали ли вы соотношение пикселей устройства (файл 600px на экране 2× должен быть 1200px) и должна ли платформа, которую вы загрузили для повторного сжатия изображения после этого. Третий распространен в социальных сетях, и его лучше всего смягчить, загрузив на платформу и #39;s рекомендуемые размеры.