Изображения и фотографии · Изменение размера изображений в социальных сетях
Почему мелкий текст на изображениях в социальных сетях становится нечитабельным после изменения размера
· Почему это важно
качество изображения типографика доступность
Текст, который хорошо читается на дизайнерском холсте, может стать неразборчивым, если изображение будет уменьшено до размера телефона и сжато. В этом посте объясняется пиксельная арифметика, обеспечивающая разборчивость, и способы ее проверки перед публикацией.
Инфографика, которую никто не смог прочитать — конкретный провал плотного дизайна на экране телефона
Инфографика может быть прекрасно читаема на широком дизайнерском холсте и потерпеть неудачу, если ее представить в виде социального изображения размером с телефон. Слова не изменились, но изменилось количество выходных пикселей, доступных для описания каждой буквы. Плотный вспомогательный текст становится текстурой еще до того, как зритель сможет ее прочитать.
Проверьте экспортированный файл, а не только исходный макет. Social Image Resizer выполняет рендеринг с заданными целевыми размерами и предлагает полученный Blob для загрузки. Эта производная версия является подходящим артефактом для проверки разборчивости, поскольку она содержит фактические решения по выборке и локальному кодированию, принятые браузером.
Текст — это тоже пиксели: как уменьшение масштаба уменьшает высоту букв и почему штрихи тоньше, чем размытие или исчезновение пикселей.
Текст внутри изображения больше не является семантическим типом. Это цветные пиксели. Когда масштаб всего изображения уменьшен, высота буквы и ширина штриха уменьшаются вместе со всем остальным. Штрих, охватывающий несколько исходных пикселей, может составлять лишь часть выходного пикселя, вынуждая ресэмплер смешивать его с фоном.
Высококонтрастные края делают потерю очевидной, но контраст сам по себе не может спасти структуру после закрытия счетчиков или слияния соседних штрихов. Сглаживание холста направлено на то, чтобы избежать неровных псевдонимов, поэтому крошечные буквы могут стать мягкими, а не резко сломанными. Эффект зависит от масштаба, шрифта, веса, контрастности и реализации браузера.
Локальное кодирование с потерями может смягчить мелкие детали; сжатие назначения выходит за рамки этих доказательств
Экспорт JPEG и WebP в этом инструменте осуществляется с потерями, и их аргумент качества может повлиять на мелкие детали изображения. PNG позволяет избежать этапа вывода с потерями, но не восстанавливает информацию, уже смешанную во время уменьшения масштаба. Выбор PNG для надписей может удалить одну переменную, оставив основной бюджет пикселей неизменным.
Учебное пособие приписывает социальным платформам еще один завершающий шаг. ToolAcre не тестирует целевые кодировщики, поэтому эта статья не обещает, что каждый сервис сжимает текст одним способом. Сравните одобренный локальный экспорт с предварительным просмотром реального места назначения, чтобы отделить то, что произошло до загрузки, от того, что наблюдается после.
Дизайн по размеру дисплея — проверка типа на высоте пикселя, на которой он будет отображаться, а не на размере холста.
Обзор дизайна должен включать размеры в пикселях и масштаб, в котором люди фактически увидят изображение. Откройте загруженный файл в обычном размере презентации на соответствующем телефоне, а не масштабируйте его, пока слова не станут читаемыми. Предварительный просмотр на большом мониторе может скрыть дефект, предоставив изображению больше физического пространства.
Используйте проверку пикселей один к одному в качестве диагностики, а не как впечатления аудитории. Это может выявить размытые границы, но вопрос принятия состоит в том, читается ли сообщение без усилий в контексте. Никакого универсального ограничения по размеру шрифта не указано, поскольку устройство, макет и творческий выбор меняют результат.
Меньше слов, более крупный шрифт — переместите детали в заголовок или на связанную страницу и оставьте изображение для заголовка.
Если текст не работает, уменьшите количество слов, прежде чем попробовать другое качество экспорта. Продвигайте один заголовок, удаляйте определители и перемещайте детали в заголовок сообщения или на связанную страницу. Более крупный шрифт с меньшим количеством строк дает каждому символу больше пикселей и позволяет изображению выполнять свою визуальную роль, а не имитировать документ.
Также упростите тонкие правила, крошечные значки и декоративные узоры, конкурирующие с формулировкой. Они используют одну и ту же конечную выходную сетку. Если изображение должно содержать подробные инструкции, предложите доступную страницу или документ, предназначенный для чтения, а не полагайтесь на одно растровое социальное изображение.
Рабочий пример: сравнить текст окончательного размера, не заявляя об универсальных сохранившихся размерах.
Подготовьте объявление 16:9 с заголовком, подзаголовком и плотным подвалом. Экспортируйте его с текущей предустановкой инструмента 1920×1080, а затем просмотрите его в обычном масштабе отображения места назначения на телефоне. Обратите внимание, какая иерархия читается сразу, а какая требует масштабирования или вывода.
Создайте исправленную версию с меньшим количеством слов и более крупными штрихами, а затем экспортируйте ее по тому же пути. Сравнение должны оценивать читатели, а не придуманные минимальные высоты пикселей. Запишите целевые размеры, формат и качество, чтобы будущая версия могла воспроизвести прошедшие условия.
Чего это не касается — доступность программ чтения с экрана; тексту на изображении нужен замещающий текст независимо от его размера, и это этап публикации, а не изменения размера.
Читаемые пиксели не делают текст изображения доступным для программы чтения с экрана. Альтернативный текст, подписи и любые поля доступности для конкретного места остаются частью этапа публикации. Social Image Resizer работает с пикселями изображения и не создает эти семантические описания.
Не размещайте длинные важные инструкции только внутри изображения. Даже крупные буквы могут быть недоступны для людей, использующих вспомогательные технологии или инструменты перевода. Обрезка может помочь создать четкую графику, но доступность требует эквивалентной информации за пределами растрового изображения и рабочего процесса публикации, который ее сохраняет.
Вывод: проверьте разборчивость в окончательном размере — функция Social Image Resizer предоставит вам файл с измененным размером, чтобы вы могли проверить его на телефоне перед публикацией.
Проверьте разборчивость в окончательном размере и рассматривайте неудачу как проблему дизайна контента, прежде чем рассматривать ее как проблему кодировщика. Более краткие формулировки, более строгая иерархия и более крупные штрихи обычно создают более надежный артефакт, поскольку они выделяют ограниченную сетку пикселей той части, которую необходимо понять.
ToolAcre предоставляет точный результат, необходимый для этой проверки. Экспортируйте, откройте файл на соответствующем устройстве, сравните любой предварительный просмотр места назначения и отредактируйте его с мастер-файла. Дизайн, который работает только при увеличении в редакторе, не готов к использованию на маленьком экране, для которого он предназначен.