12 Распространенных ошибок форматирования изображений

Posted on by riasevastopol

Говорят, что изображение может сообщить больше, чем тысяча слов – но, как узнается, оно кроме этого может содействовать большему доходу для вас либо вашего бизнеса.

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

Это не только окажет помощь тому, что визитёры будут чаще заходить и им будет весьма интересно, но, по статистике, собранным Tech.Co и NewsCred, это кроме этого:

  • Более действенно передает данные: люди не забывают 80% того, что они видят (в отличие от 20% того, что они просматривают и 10% того, что они слышат).
  • Завлекает визитёров: статьи с изображениями на 94% больше просматривают, чем без статьи без них.
  • Повышает бизнес репутацию: 67% потребителей предпочитают компании, каковые воображают четкие, детальные изображения их продукции (и говорят, что изображения являются более серьёзными, чем описание продукта).
  • Воздействует на принятие ответов приобретения: 93% людей вычисляют визуальные изображения наиболее значимым причиной, воздействующим на решение приобретения в сети.

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

Неприятность № 1: Вы загрузили изображения без их оптимизации для сети, и сейчас ваш сайт трудится медлительно

Ответ: Отыщите “золотую середину” размера изображения.

Размер изображения имеет громадное влияние на производительность вашего сайта. Дабы быть правильным, мы говорим по большей части о размере файла в мегабайтах (mb), килобайтах (kb) и т.д. – не о фактических размерах изображения (таких, как 800 х 600 пикселей), не смотря на то, что они довольно часто взаимосвязаны. В случае если размеры файлов через чур большие, страницам требуется большое количество времени для загрузки, и вы рискуете утратить визитёров, у которых нет терпения.

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

Совет: Вы имеете возможность проверить, как разные размеры изображения воздействуют на скорость загрузки страницы при помощи бесплатных инструментов, таких, как данный.

Неприятность № 2: Изображение плохо смотрится на экране

Ответ: Определите разрешение изображения.

Разрешение это то, что определяет, как прекрасно ваше изображение выглядит на экране. Говоря несложными словами, это количество отображаемых пикселей на определенном пространстве экрана (пикселей на дюйм, либо PPI, время от времени пикселей на сантиметр). Однако, поскольку экраны на устройствах, каковые мы используем сейчас, имеют заблаговременно определенные разрешения, мы ограничили контроль над тем, как отечественные изображения отобразятся.

Но это естественно, по причине того, что это упрощает процесс сохранения изображения. Разрешение 72 PPI считается неспециализированным стандартом для веб-изображений с приемлемым качеством, но разрешение между минимум 72 PPI до максимум 120 PPI, достаточно для подавляющего большинства экранов. В соответствии с дизайнеру Гугл 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”), не окажут помощь вам, и в действительности смогут снизить поисковой рейтинг вашего сайта.

Варианты метаданных изображения в вордпрессе (наименование, заголовок, описание и альтернативный текст).

Неприятность № 11: Вы думаете, что вашу фотографию возможно отредактировать, но вы не желаете переусердствовать

Ответ: Не применяйте большое количество эффектов.

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

Однако, большая часть программ для редактирования фотографий смогут сделать намного больше, чем это. И весьма легко увлечься фильтрами и драматическими эффектами; имеется узкая грань между умеренным и примечательным редактированием. Если вы окажетесь перед выбором результата лишь вследствие того что “это выглядит забавно/необычно/неординарно”, вам лучше изображение в его начальном виде.

Совет: Авторедактирование (цвет, контраст и т.д.) не всегда помогает достигнуть отличных показателей. Если вы думаете, что что-то выглядит “не весьма”, доверяйте своим собственным ощущениям, а не машине, и лучше вручную внесите коррективы.

Неприятность № 12: Цвета плохо смотрятся на экране вашего компьютера

Ответ: Откалибруйте собственный монитор.

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

“Откалибруйте монитор так, дабы яркость была установлена ??между 90 и 120 кд/м2.

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

Совет: В операционных совокупностях Windows и Mac имеется встроенные инструменты калибровки. Тут вы имеете возможность отыскать пошаговую инструкцию того, как их применять.

Случайные статьи:

Как восстановить \


Подборка похожих статей:

riasevastopol

More Posts