Говорят, что изображение может сказать больше, чем тысяча слов – но, как выясняется, оно также может способствовать большему заработку для вас или вашего бизнеса.
Хотя обеспечивать работу своего личного или бизнес сайта – непростая задача, приложить немного усилий, добавив визуальный контент на ваш сайт, окупится с лихвой.
Это не только поможет тому, что посетители будут чаще заходить и им будет интересно, но, по статистическим данным, собранным Tech.Co и NewsCred, это также:
- Более эффективно передает информацию: люди помнят 80% того, что они видят (в отличие от 20% того, что они читают и 10% того, что они слышат).
- Привлекает посетителей: статьи с изображениями на 94% больше просматривают, чем без статьи без них.
- Повышает бизнес репутацию: 67% потребителей предпочитают компании, которые представляют четкие, детальные изображения их продукции (и говорят, что изображения являются более важными, чем описание продукта).
- Воздействует на принятие решений покупки: 93% людей считают визуальные изображения важнейшим фактором, влияющим на решение покупки в интернете.
Но будет трудно получить какие-либо из этих преимуществ, если ваши изображения не отображают то, что нужно. Поэтому следуйте нижеприведенному руководству, чтобы избежать распространенных ошибок, с которыми сталкиваются многие люди при попытке форматирования изображений для своих сайтов.
Проблема № 1: Вы загрузили изображения без их оптимизации для сети, и теперь ваш сайт работает медленно
Решение: Найдите “золотую середину” размера изображения.
Размер изображения имеет большое влияние на производительность вашего сайта. Чтобы быть точным, мы говорим в основном о размере файла в мегабайтах (mb), килобайтах (kb) и т.д. – не о фактических размерах изображения (таких, как 800 х 600 пикселей), хотя они часто взаимосвязаны. Если размеры файлов слишком большие, страницам требуется много времени для загрузки, и вы рискуете потерять посетителей, у которых нет терпения. Слишком маленький размер – и вы подвергаете опасности визуальное качество изображения. Вам нужно найти компромисс между фактическим размером и качеством (разрешением), которые в совокупности определяют общий размер файла.
Совет: Вы можете проверить, как различные размеры изображения влияют на скорость загрузки страницы при помощи бесплатных инструментов, таких, как этот.
Проблема № 2: Изображение нехорошо смотрится на экране
Решение: Узнайте разрешение изображения.
Разрешение это то, что определяет, насколько хорошо ваше изображение выглядит на экране. Говоря простыми словами, это количество отображаемых пикселей на определенном пространстве экрана (пикселей на дюйм, или PPI, иногда пикселей на сантиметр). Тем не менее, так как экраны на устройствах, которые мы используем сегодня, имеют заранее определенные разрешения, мы ограничили контроль над тем, как наши изображения отобразятся. Но это нормально, потому что это упрощает процесс сохранения изображения. Разрешение 72 PPI считается общим стандартом для веб-изображений с приемлемым качеством, но разрешение между минимум 72 PPI до максимум 120 PPI, достаточно для подавляющего большинства экранов. Согласно дизайнеру Google Sebastien Gabriel, сохранение PPI в этом диапазоне “обеспечивает то, что ваша работа будет примерно такого же соотношения везде”. Это также помогает управлять размером файла.
Что еще более важно, до тех пор, как вы сохраняете свои изображения в правильных размерах (в пикселях) для предполагаемого предназначения, вы должны избегать любой пикселизации. Пикселизация (размытость, искажение, потеря качества) возникает, когда цифровое изображение отображается на сайте размером больше, чем его первоначальный размер (например, попытка растянуть фото 50 х 50 пикселей на пространство 500 х 500 пикселей).
Совет: Если вы пытаетесь задать PPI файла изображения и видите только вариант “DPI”, не паникуйте.
Эти термины часто (хотя и ошибочно) используются как взаимозаменяемые. В самом деле, многие люди и программы используют DPI, как общий термин для обозначения разрешения изображения.
Проблема № 3. Узнайте разрешение изображения. Часть 2: Сжатие
Сжатие изображения в программе для редактирования фотографий является одним из способов настройки разрешения и размер файла. Например, при использовании “Сохранить для веб и устройств”, чтобы сохранить JPG изображения в Photoshop, вы можете выбрать предустановленные настройки качества (низкий, средний, высокий, очень высокий, и максимум), или более настроить качество с соответствующим роликом прокрутки от 0 (минимум) и 100 (максимум). Это позволит уменьшить (или сжать) размер файла (для подходящего времени загрузки страницы), но также это уменьшит визуальное качество (чем ниже, тем хуже).
Совет: В диалоговом окне Сохранить для веб и устройств, вы можете просмотреть и сравнить несколько версий вашего изображения (с различными типами файлов, настроек и т.д.). Вы даже можете просмотреть примерное время загрузки или просмотреть изображение в любом веб-браузере вашей системы. Здесь подробная информация об этих вариантах.
Проблема № 4: Основная часть изображения незаметна
Решение: Обрезайте с умом.
Обрезка изображения может быть очень важным шагом в процессе форматирования, особенно для фотографий. Вы не хотите обрезать ничего важного, но не стесняйтесь обрезать, чтобы улучшить фокус или настроение изображения. С другой стороны, вы не хотите обрезать так, что ваша фотография исказится (чем больше пикселей вы удалите, тем ниже будет разрешение); если вы хотите сделать это, вам нужно начать с изображения с довольно высоким разрешением.
Совет: Если вы планируете разместить свое изображение на социальном сайте, вы можете спасти себя от неправильной обрезки, обрезав до соответствующих размеров заранее (ознакомьтесь с руководством инфографики по размерам изображений для всех самых популярных социальных сетей). Таким образом, вы точно знаете, как ваша фотография будет выглядеть, когда она будет выложена, и не будете удивлены, что что-то обрежется или растянется.
Проблема №5: Плохая композиция изображения
Решение: Используйте фрейм для максимального эффекта.
Тесно связанный с обрезкой, фрейминг идеально подходит для случаев, когда вы фотографируете или создаете изображение (и лучше во время процесса, а не после). Он имеет много общего с традиционными правилами композиции, с которыми считаются художники, фотографы, дизайнеры и другие мастера. Некоторые из них содержат в себе:
- “Правило третей” (достижение баланса и фокуса)
- расположение элементов в группы по три
- повторение (выделяя визуально интересные элементы, такие как линии и узоры)
- эффективное использование положительного и негативного пространства
- ведущие линии (которые направляют внимание зрителя к центральной точке)
- и больше…
Все это сводится к созданию изображения – захватывающего, интересного и визуально привлекательного, именно того, что вы хотите для изображений на вашем сайте.
Совет: Во многих камерах, даже в смартфонах, есть сетка правила третей, которую вы можете наложить на дисплей во время фотографирования (или использовать для обрезки после). Просто совместите самые важные части вашего изображения с одним из четырех мест, где пересекаются линии, и вы на пути к хорошей композиции.
Проблема № 6. Используйте фрейм для максимального эффекта. Часть 2: Обходные пути
Если вы создаете изображения для того, чтобы разместить их на вашем сайте, то вы имеете полный контроль над фреймингом и обрезкой. Но если вы выбираете изображения – возможно разместить на вашем блоге или поделиться в социальных сетях, то вам, возможно, придется использовать некоторые ухищрения для достижения желаемых результатов.
Если фрейминг фото, которое вы выбрали, оставляет желать лучшего, то вы можете исправить это обрезкой. Или, вместо того, чтобы вырезать часть изображения, вы можете добавить что-нибудь. Фото с пространством может быть заполнено цитатой или вдохновляющим высказыванием – отличный вариант для социальных сетей.
Вы также можете поэкспериментировать с ориентацией изображения (если композиция изображения позволяет), от вертикального к горизонтальному (или наоборот); поворот изображения; или обрезка круглой или другой формой. Изображения различных форм и размеров добавят визуальный интерес к вашему веб-сайту. Не используйте все время один и тот же процесс форматирования изображений; будьте креативными!
Совет: Canva создает изображения для социальных сетей, как цитата в картинке. Просто откройте подходящий по размеру шаблон, в зависимости от того, какой сайт вы используете, выберите из бесплатных или платных (стоимостью в $1) фотографий (или загрузите свою собственную), добавьте текст (здесь есть более 100 бесплатных шрифтов), и – вуаля! – Вы сделали это.
Проблема №7: Изображение выглядит искаженным
Решение: Масштабируйте пропорционально.
Наиболее распространенной причиной искаженных изображений на веб-сайтах является то, что они были растянуты, чтобы заполнить определенное пространство. Самый простой способ избежать этого – сохранить исходные пропорции изображения при масштабировании его вверх или вниз, а не растягивая длину или ширину.
Некоторые платформы, в которых вы публикуете изображения, могут автоматически масштабировать изображение, чтобы оно соответствовало их собственным требованиям. Так что, если вы публикуете изображения не на своем веб-сайте, узнайте рекомендуемый размер загрузки и заранее отформатируйте свое изображение по этим данным.
Совет: В большинстве программ и приложений для редактирования фото есть инструменты, которые помогут вам убедиться, что вы масштабируете изображения пропорционально. В диалоговом окне, где вы масштабируете или регулируете размер изображения, часто бывает маленький значок замка, на который вы можете нажать, что “зафиксирует” исходные пропорции, или окошко с чем-то вроде “масштабировать пропорционально” или “сохранить пропорции”.
Проблема №8: Вы сохранили изображение в неправильном формате файла
Решение: Изучите различия между типами файлов.
Все эти сокращения могут запутать вас – Какая разница между JPG и PNG? Это имеет значение? Есть ли определенные форматы файлов, которые лучше использовать?
Не все форматы файлов создаются в равной степени. Каждый из них имеет свои специфические применения, со своими плюсами и минусами. Мы сделаем краткий обзор типов файлов, которые подходят для веб-использования, которые должны дать вам достаточно информации, чтобы убедиться, что изображения на вашем сайте выглядят наилучшим образом.
- JPG (или JPEG): в первую очередь для фотографий (или высоко детализированных/красочных иллюстраций и графики); точный и широкий спектр цветопередачи; не очень подходит для изображений с текстом
- PNG: высокое качество изображения и хорошая цветопередача; поддерживает прозрачность/непрозрачность; создает резкие линии и края, поэтому подходит для графики, логотипов, диаграмм и т. д.; отображает текст и ровные цвета без пикселизации (в отличие от файлов JPG, потому что он не теряет качества при сжатии)
- GIF: единственный тип файла, который поддерживает анимацию; подходит для простой графики (низкий размер файла не оказывает негативного влияния на скорость загрузки страницы); возможности цвета не так хороши, как у JPG-файлов (256 цветов или меньше, поэтому не подходит для фотографий)
- SVG: векторный формат, который не зависит от разрешения и зума (т.е., он будет оставаться четким и ясным, независимо от того, на каком устройстве вы его смотрите, насколько высокое разрешение экрана, и насколько вы увеличили его).
- PDF: сохраняет оригинальное содержание и внешний вид файла независимо от того, где и как он рассматривается; лучше всего подходит для отображения целых документов в интернете, таких как брошюры/руководства/справочники, электронные книги, и т.д.
И один, который стоит избегать …
- TIFF: высокое качество изображения, но очень большой размер файла, поэтому непригодный для веб-использования; обычно используется для сдачи документов в печать.
Совет: Касаемо изображений, которые могут быть использованы для печати или веб-проектов (например, JPG-файлы и PDF-файлы), вы должны убедиться, что вы создаете или конвертируете их в правильном цветовом пространстве для веб-использования – RGB. Если вы сохраните в CMYK (который используется только для печати), цвета вашего изображения будут выглядеть очень странно, когда вы загрузите его на свой веб-сайт. Если вы используете Canva для форматирования изображения, этот процесс упрощается: просто нажмите “Скачать”, где вы выберете либо “Как изображение” (файл RGB для веб-использования) или “PDF высокого качества” (CMYK файл для печати).
Проблема № 9: Вы купили стоковые фотографии для вашего сайта, но видите их везде
Решение: Избегайте стоковых фотографий или потратьте время на поиски уникальных.
Если у вас нет времени или ресурсов, чтобы создавать свои собственные изображения, стоковые фотографии – удобный вариант. Тем не менее, там есть много фотографий, которые уже используются, и есть риск увидеть выбранное вами фото в других местах, возможно, даже на веб-сайте конкурента. Очевидным решением было бы вовсе не использовать стоковые фотографии, а вместо этого создавать свои собственные оригинальные изображения, но если это невозможно, вы можете, по крайней мере поискать дальше первой страницы результатов поиска, чтобы найти то, что будет отличаться, и, что более важно, то, что действительно подойдет для вашего бренда или цели.
Совет: Все больше и больше ресурсов бесплатных стоковых фотографий появляются в последние годы, и (несмотря на то, что они бесплатны) до сих пор не используются так часто, как платные сайты. Кроме того, в них часто можно встретить творческие и не заурядные варианты, если вы готовы потратить немного времени на их поиски. Ознакомьтесь со статьей, “Бесплатные стоковые фото: 74 лучших сайтов великолепных бесплатных изображений“, для списка рекомендованных ресурсов.
Бесплатные стоковые фото из Unsplash.
Проблема № 10: Вы не знаете, как добавить информацию к вашим изображениям
Решение: Используйте параметры метаданных.
Метаданные это просто модное слова для дополнительной информации, встроенной в файл изображения, или то, что вы можете добавить (как заголовок или описание). Часть этой информации создается автоматически, например, техническая информация. Другая часть текстовой информации – названия изображений и описания, ключевые слова, заголовки – являются необязательными или могут быть изменены. Так зачем тратить дополнительное время, включая эту информацию? Включение некоторых базовых сведений о ваших изображений часто улучшает ux; но добавление этого типа данных может также помочь вашим изображениям появляться все чаще в подобных результатах поиска. И немного больше трафика веб-сайта никогда не помешает.
Совет: Различные блоги и веб-хостинг платформы будут предоставлять различные варианты для добавления метаданных, как подписи и ключевые слов для ваших изображений – и вы должны воспользоваться любой возможностью, чтобы добавить значение, которое предлагает ваша платформа. Alt text (сокращенно альтернативный текст, который иногда называют “alt tag” или “alt attribute”) является одним из наиболее распространенных вариантов.
Это поле, где вы можете ввести слово или фразу, описывающую то, что представляет ваше изображение. Это важно, потому что: 1) Это играет важную роль в улучшении SEO (search engine optimization) вашего сайта; 2) Если изображение не отображается по какой-то причине, альтернативный текст появится, чтобы подсказать то, что там должно быть; и 3) Альтернативный текст используется слепыми и слабовидящими пользователями, которые используют аудио в браузерах для работы в интернете.
Каждое изображение должно иметь свой собственный уникальный, соответствующий альтернативный текст; и лучше краткий. Но не злоупотребляйте инструментом – загрузка поля альтернативного текста с поисковыми словами, которые вы считаете популярными (известные как “alt spam” или “keyword stuffing”), не помогут вам, и на самом деле могут снизить поисковой рейтинг вашего сайта.
Варианты метаданных изображения в WordPress (название, заголовок, альтернативный текст и описание).
Проблема № 11: Вы думаете, что вашу фотографию можно отредактировать, но вы не хотите переусердствовать
Решение: Не используйте много эффектов.
Иногда, при работе с изображением, вы хотите немного его улучшить: отрегулировать контрастность или яркость, повысить насыщенность, настроить резкость. Нет проблем.
Тем не менее, большинство программ для редактирования фотографий могут сделать намного больше, чем это. И очень легко увлечься драматическими эффектами и фильтрами; есть тонкая грань между умеренным и броским редактированием. Если вы окажетесь перед выбором эффекта только потому, что “это выглядит забавно/странно/неординарно”, вам лучше просто оставить изображение в его первоначальном виде.
Совет: Авторедактирование (цвет, контраст и т.д.) не всегда помогает достичь лучших результатов. Если вы думаете, что что-то выглядит “не очень”, доверяйте своим собственным ощущениям, а не машине, и лучше вручную внесите коррективы.
Проблема № 12: Цвета нехорошо смотрятся на экране вашего компьютера
Решение: Откалибруйте свой монитор.
Если вы работаете с цифровыми изображениями, важно, чтобы цвета правильно отображались. Когда вы выбираете цвет, вы хотите увидеть изображения такими, какие они будут на сайте, и вы не сможете этого сделать, если ваш экран или монитор неточно отображает цвета. Simon Prais в DigitalArts советует:
“Откалибруйте монитор так, чтобы яркость была установлена между 90 и 120 кд/м2.
Хотя это ограничит контрастность дисплея, это, вероятно, больше выразит то, что целевая аудитория испытает на многих мониторах различных версий и качества”.
Совет: В операционных системах Windows и Mac есть встроенные инструменты калибровки. Здесь вы можете найти пошаговую инструкцию того, как их использовать.
