Веб картинки: Attention Required! | Cloudflare

06.04.2021 alexxlab

Содержание

Лучшие форматы изображений для веб-дизайна и разработки

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

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

Характеристика лучших форматов изображения для веб-дизайна

Публикуя очередной пост в блоге, вы наверняка сталкивались с проблемой, использовать PNG, GIF или JPEG для выбранной картинки. Мы предложим несколько идей, которые помогут уверенно выбирать формат.

Это особенно полезно, если вы планируете провести редизайн сайта.

Формат JPG

Одним из наиболее распространенных форматов изображений в Интернете является формат Объединенной группы экспертов по фотографии (JPG). Он создан в 1986 году, но продолжает использоваться по сей день.

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

Для JPG сжатие выполняется с использованием lossy compression (сжатие с потерями). Это значит, что при сохранении изображения происходит потеря качества. Потеря проявляется в мелких деталях, включая текст.

Этот вид потерь называется «артефактами», так как он проявляется в небольших и блочных компонентах. Сжатие JPG оптимизировано для фотографий, где артефакты почти незаметны для зрителя.

Каждый раз, когда ваша картинка сохраняется, количество артефактов продолжает увеличиваться. Лучший способ избежать этого — сохранить фотографию с помощью lossless compression (сжатие без потерь).

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

JPG поддерживает много цветов, что делает этот тип файла подходящим для реальных изображений, включая пейзажи, портреты людей и так далее.

Поскольку JPG остается лучшим и самым популярным выбором для сайтов, рекомендуется публиковать в нем картинки в социальных сетях.

В большинстве случаев цифровые фотокамеры и смартфоны сохраняют фотографии в формате JPG. Сомневаетесь? Проверьте свой телефон.

Формат GIF

Еще один широко используемый формат изображений для веб-сайтов — это формат обмена графическими данными (GIF), который появился в 1987 году.

Он помогает избавить вас от боли и страданий при отправке файлов через медленные соединения с низкой пропускной способностью.

В отличие от JPG, GIF сохраняет данные без потерь. Это означает, что GIF содержит все данные и, несмотря на уменьшение веса файла по сравнению с JPG, качество не ухудшается с 256 индексированными цветами.

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

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

Многие веб-дизайнеры предпочитают использовать GIF. Это отличный выбор для мелких цветных изображений. Полноцветные изображения и фотографии сохраняются в GIF с высокой степенью сжатия.

Формат PNG

Портативная сетевая графика (PNG) разработана в 1995 году с целью заменить GIF. Если вы беспокоитесь о размере и предпочитаете работать с крупными картинками, тогда PNG — лучший формат изображений для веб-дизайна.

Одним из наиболее предпочтительных вариантов будет PNG-8, поскольку он поддерживает 256 индексированных цветов и обеспечивает прозрачность.

Как и JPG, формат PNG-24 способен поддерживать более 15 миллионов цветов. Он может вместить как статические изображения, так и анимацию.

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

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

Фактически, PNG является №1 для веб-дизайна и разработки, но когда дело доходит до печати, вам придется туго. Проблема в том, что формат совсем не дружит с четырехцветной печатью.

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

PNG — удобный формат для сохранения скриншотов.

Формат SVG

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

Он позволяет получать четкие картинки любых размеров и разрешений. Сохранение данных происходит без потери качества, как и с форматами GIF и PNG. SVG относится к векторной графике, которая состоит из математически управляемых фигур и кривых, а не из пикселей.

При желании вы можете использовать SVG-анимацию, поскольку он поддерживает прозрачность и содержит комбинацию цветов и градиентов.

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

Современные форматы WEBP и HEIC для веб-дизайна

Теперь мы хотели бы познакомить вас с некоторыми недавно созданными форматами WEBP и HEIC, основанными на HEVC. Но начнем с пояснения.

Механизмы, используемые видеокодеками для сжатия потоков, подразделяются на два типа, межкадровый и внутрикадровый. Межкадровый помогает в использовании повторений в кадре, вне зависимости от остальных.

Вы можете применить этот механизм сжатия к статичным изображениям.

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

Эти новые форматы были созданы для соответствия новым стандартам кодирования видео. С ними доступны более серьезные наборы функций.

Формат WEBP

Этот формат изображения был разработан Google в качестве единого веб-формата для многочисленных сфер применения в Интернете.

Он является производным от видеокодека VP8. Среди возможностей WEBP предусмотрено «предсказание» блоков по содержанию ранее декодированных.

Формат обеспечивает сжатие без потерь, но в некоторых видах компьютерной графики наблюдается потеря цветов на изображении.

Но главный недостаток заключается в отсутствии всеобщей поддержки.

До недавнего времени поддержка WEBP была ограничена программным обеспечением Google (браузер Chrome) и нативными приложениями Android.

Недавно было объявлено, что Microsoft Edge и Firefox будут поддерживать WEBP, начиная с 2019 года. Однако Apple, Safari и iOS пока в раздумьях.

Формат HEIC / HEIF

Один из лучших форматов изображений для веб-дизайна и разработки сайтов претерпел эволюцию в двух разных аспектах.

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

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

Большинство изображений используют этот контейнер и сжимаются с производной, которая предназначена для изображений с видеокодека h365 / HEVC. Они разработаны с учетом разрешений 4K и 8K, доступных преимущественно на новейших дисплеях.

Кодирование HEVC включает в себя сложные операции, но с меньшим количеством ограничений, чем JPEG.

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

Изображения в HTML — Изучение веб-разработки

В начале Web был просто текстом, что было довольно скучно. К счастью, это продолжалось не долго — до появления возможности вставлять изображения (и другие, более интересные, типы контента) в веб-страницы. Существуют и другие типы мультимедиа, однако логичнее начать со скромного <img> элемента, используемого для вставки простого изображения в веб-страницу. В этой статье мы рассмотрим, как использовать элемент, начиная с основ, снабжать примечаниями, используя <figure>, и разберём, как это относится к фоновым изображениям CSS.

Чтобы разместить изображение на странице, нужно использовать тег <img>. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — src (произносится эс-ар-си, иногда говорят его полное название, source). Атрибут src содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута href для элемента <a>.

Примечание: Перед тем как продолжить, вам стоит вспомнить про типы адресов URL, чтобы обновить в памяти про относительные и абсолютные адреса.

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

<img src="dinosaur.jpg">

Если изображение было в поддиректории images , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:

<img src="images/dinosaur.jpg">

И так далее.

Примечание: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: dinosaur.jpg лучше, чем img835.png.

Вы можете встроить изображение используя абсолютный URL, например:

<img src="https://www.example.com/images/dinosaur.jpg">

Но это бессмысленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.

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

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

Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своём атрибуте src ссылку на изображение, размещённое на чужом сайте. Это называется «хотлинкинг» (с англ. ‘hotlinking’ — ‘горячая ссылка’). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.

Наш код выше даст нам следующий результат:

Примечание: Такие элементы как <img> и <video> иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в Замещаемых элементах.

Альтернативный текст

Следующий атрибут, который мы рассмотрим — alt. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута alt на практике, внесём изменения в код из предыдущего примера:

<img src="images/dinosaur.jpg"
     alt="Голова и туловище скелета динозавра;
         у него большая голова с длинными острыми зубами">

Самый простой способ увидеть атрибут alt в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как dinosooooor.jpg, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута alt:

Итак, в каких случаях текст из атрибута alt может быть нам полезен? Приведём несколько примеров:

Пользователь с нарушением зрения использует устройство чтения с экрана, которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте alt для описания изображения может быть полезно для большинства пользователей.
В случае, если была допущена ошибка в имени файла или пути к нему (как было описано выше).
Браузер не поддерживает формат данного изображения. Некоторые люди до сих пор используют текстовые браузеры, такие как Lynx, которые вместо изображений отображают текст из атрибута alt.
Если вы хотите добавить возможность найти ваше изображение с помощью поисковых систем. Например, поисковые системы могут искать совпадения поисковых запросов с текстом атрибута alt.
Если пользователи отключили отображение изображений на странице для уменьшения объёма передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.

Что именно вы должны писать в атрибут alt? В первую очередь, это зависит от того, зачем изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:

Декорация. Вы должны использовать Фоновые изображения CSS для декоративных изображений, но если вы должны использовать HTML, добавьте пустой alt = «». Если изображение служит просто украшением и не является частью содержимого, добавьте пустой alt="". Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя.
Контент. Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий alt. Или даже лучше, в главном тексте, который все увидят. Не используйте alt , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы параграфы были написаны дважды в главном контенте? Если изображение адекватно описано в основном тексте, можете просто использовать alt="".
Ссылка. Если вы помещаете изображение в <a>, для того, чтобы сделать из него ссылку, вы всё ещё должны использовать чёткие формулировки описания ссылок. В таком случае, вы сможете использовать элемент <a> или атрибут alt . Старайтесь выбрать лучший вариант.
Текст. Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого CSS вместо добавления текста в изображение. Однако, если действительно этого не избежать, то вам следует дополнить текст в атрибуте alt.

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

Ширина и высота

Вы можете использовать атрибуты width и height, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего изображение можете найти различными способами. Например, на Mac можно использовать Cmd + I чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
    
    >

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

Это хорошая практика, в результате страница загрузится быстрее и более гладко.

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

Примечание: Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого CSS.

Заголовок изображения

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

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
    
    
     title="A T-Rex on display in the Manchester University Museum">

Это даёт нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:

Однако это не рекомендуется — title имеет ряд проблем с доступностью, в основном из-за того, что поддержка программ чтения с экрана очень непредсказуема, и большинство браузеров не будут отображать её, если вы не наведёте курсор мыши (например, нет доступа для пользователей клавиатуры). Зачастую лучше включить такого рода вспомогательную информацию в основной текст статьи, чем прикреплять её к изображению. Однако, она полезна в некоторых обстоятельствах; например, в галереях изображений, когда у вас нет места для их заголовков.

Активное обучение: встраивание изображения

Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым <img> тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

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

Мы также хотели бы, чтобы вы:

Добавили любой альтернативный текст, и проверили как это работает внеся ошибку в ссылку на изображение.
Установите правильные значения width и height (подсказка: это 200px по ширине и 171px по высоте), после поэкспериментируйте с другими значениями, чтобы увидеть какой будет эффект.
Установите title для изображения.

Если вы сделаете ошибку, вы всегда можете очистить код, используя кнопку Reset. Если вы реально не будете понимать как сделать, нажмите кнопку Show solution, чтобы увидеть ответ:

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

<div>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
      
      >

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но, есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?

Лучшим решением будет использование элементов HTML5 <figure> и <figcaption>. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
      
      >

  <figcaption>A T-Rex on display in the Manchester University Museum. </figcaption>
</figure>

Элемент <figcaption> говорит браузерам и вспомогательной технологии, что заголовок описывает содержимое элемента <figure>.

Замечание: С точки зрения доступности, заголовки и alt имеют различные предназначения. Заголовки помогают даже тем, кто имеет возможность просматривать изображение, тогда как alt обеспечивает замену функциональности отсутствующего изображения. Таким образом, заголовки и alt не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.

Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который:

Передаёт смысл компактным, интуитивно понятным способом.
Может использоваться в различных местах страницы.
Предоставляет ценную информацию, поддерживающую основной текст.

Тег <figure> может быть несколькими изображениями, куском кода, аудио, видео, уравнением, таблицей, либо чем-то другим.

Активное изучение: создание <figure>

В этом разделе активного изучения мы хотели бы, чтобы вы взяли текст из предыдущего раздела активного изучения и преобразовали его в <figure>:

Оберните его в <figure> элемент.
Скопируйте текст из атрибута title, удалите атрибут title, и вбейте текст в элемент <figcaption>.

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

Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). Параметры CSS background-image и другие background-* применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:

p {
  background-image: url("images/dinosaur.jpg");
}

Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Как указано выше, фоновые изображения CSS предназначены только для украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, они невидимы для программ чтения с экрана. Вот где блистают HTML-изображения!

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

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

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

Как сохранить картинку или фото с любой веб-страницы (даже если при клике правой кнопкой мышки

Вопрос от пользователя
Здравствуйте.
Мне нужно сохранить несколько картинок с одного «необычного» сайта: на нем, при клике правой кнопкой мышки, не появляется стандартное меню (т.е. нельзя обычным образом сохранить фото).
Есть ли какие-нибудь простые и (главное!) быстрые варианты сохранения?

Здравствуйте.

Ну смотря что понимать под «быстрыми», да и от конкретного человека зависит (каждый из нас даже текст на клавиатуре набирает с разной скоростью 👌).

Ниже приведу несколько способов решения задачи (выбор, как всегда, за вами…).

Важно: имейте ввиду, что определённые фотографии и изображения на сайтах защищены авторскими правами! Если вам нужные бесплатные картинки — см. эту подборку сайтов.

Способы сохранить картинку

👉 Вариант 1

При сохранении всей веб-страницы (сочетание кнопок Ctrl+S в браузере) — в подавляющем большинстве случаев будут загружены к вам на диск и все изображения, что на ней отображаются!

Собственно, пробуем! 👇

Сохраняем веб-страницу на HDD

Обратите внимание, что рядом с html-файлом странички будет и одноименный каталог. Если вы его откроете — в нём должны быть сохранены все картинки, что были на веб-странице.

Рекомендую отсортировать их по размеру и оставить только то, что «нужно»…

Картинки с сохраненной веб-страницы

👉 Вариант 2

А вообще, мне больше всего импонирует вариант с созданием скриншота. Т.е. вы просто делаете скриншот того, что у вас отображается на мониторе! Этот способ универсальный и подходит, как для сайтов, так и для игр, фильмов и т.д. и т.п.

👉 В помощь!
5 способов сделать скриншот экрана на ноутбуке

Чтобы сделать скрин: нажмите клавишу Print Screen, затем откройте Paint или Word и вставьте картинку, нажав на Ctrl+V. Дальше ее можно подредактировать (например, подрезав края), и сохранить на жесткий диск. Быстро?!

Кнопка Print Screen на типовой клавиатуре

👉 Вариант 3

Запомните какой-нибудь текст или описание рядом с нужной фотографией/изображением. После, откройте код страницы — сочетание кнопок Ctrl+U (работает в большинстве браузеров).

Открываем код страницы

Затем в строке поиска (Ctrl+F) укажите текст (который запомнили) и браузер вам найдет этот участок кода веб-странички. Рядом с нужным текстом — вы увидите ссылку на картинку (я ее выделил красным, на конце — «.PNG»). Осталось только ее открыть…!

Открываем картинку

А далее обычным образом (нажав ПКМ на нее) — она легко сохраняется на диск…

Сохранить как…

👉 Вариант 4

Для тех, кому нужны все фотографии с сайта (да и весь другой материал: тексты, сноски, подписи и пр.) — можно посоветовать воспользоваться спец. 👉 программами для скачивания сайтов. Они загрузят весь ресурс целиком, а значит там будет всё, что вам было нужно… 👌

Также можно попробовать сохранить 👉 страничку в PDF-формат. С ним в последствии можно работать, как в MS Word, так и его аналогах.

Ну а у меня на этом пока всё… Доп. способы — приветствуются!

Удачи!

👋

Полезный софт:

Видео-Монтаж

Ускоритель компьютера

Другие записи:

JPEG и PNG — в чём разница форматов?

JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG.

Формат JPEG

JPEG (он же JPG) — это формат изображений, который использует сжатие с потерями и не поддерживает прозрачность. Позволяет настраивать уровень качества сохраняемого изображения — при его снижении удаляются детали и добавляются шумы на изображение, однако размер становится более компактным. JPG в зависимости от настроек может обеспечить сжатие как 2:1, так и 100:1 — но качество прямо пропорционально коэффициенту сжатия. Название формата — аббревиатура от Joint Photographic Experts Group.

JPEG поддерживает цветовые пространства 24-bit RGB и CMYK, а также 8-bit Grayscale. CMYK и Grayscale используются достаточно редко и их поддержка вызывает нарекания.

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

Используемые расширения для файлов — .jpg and .jpeg (работают идентично).

С прикладной точки зрения JPEG оптимален для изображений с большим количеством цветов, например, для фотографий.

Формат PNG

PNG 24 — это формат изображений, который работает с полноцветными изображениями, использует сжатие без потерь и позволяет сохранять прозрачность. Настроить качество сохранения в PNG 24 невозможно, однако, можно адаптировать сохраняемое изображение для достижения минимального размера файла: для этого можно снизить количество цветов в изображении. Название формата — акроним от Portable Network Graphics.

Существует также формат PNG 8 — он более компактный, чем PNG 24, но применим только для изображений с очень ограниченных количеством цветов: 256 — это максимум. В случае использования PNG 8 для изображений с большим количеством цветов сжатие будет с потерями и с эффектом постеризации.

PNG до 2017 года не поддерживал EXIF, но затем его поддержка была реализована в стандарте. В фотографии PNG используется редко — для компактного хранения файлов больше подходит JPEG, а для профессиональной работы лучше подходят RAW-форматы DNG или TIFF.

PNG 24 и PNG 8 используют расширения для файлов .png, используемая битность записывается в метаданные файла и по расширению не определяется.

С прикладной точки зрения PNG 24 оптимален для изображений с небольшим количеством цветов, например, для иконок, схем, рисунков и скриншотов. Если же цветов в изображении меньше 256, то еще более эффективное сжатие возможно в PNG 8.

Резюме. JPEG и PNG — какой формат оптимальнее использовать?

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

Иконки, схемы, картинки с большим количеством текста и изображения с прозрачностью оптимальнее сохранять в PNG 24. Алгорим компрессии PNG 24 сжимает изображения без потери качества.

Конвертируйте изображения в формат WebP

Ошибка: количество входящих данных превысило лимит в 3.
Чтобы продолжить, вам необходимо обновить свою учетную запись:
Ошибка: общий размер файла превысил лимит в 100 MB.
Чтобы продолжить, вам необходимо обновить свою учетную запись:
Ошибка: общий размер файла превысил абсолютный лимит в 8GB.
Для платных аккаунтов мы предлагаем:
Премиум-пользователь
Вплоть до 8GB общего размера файла за один сеанс конвертирования
200 файлов на одно конвертирование
Высокий приоритет и скорость конвертирования
Полное отсутствие рекламы на странице
Гарантированный возврат денег
Купить сейчас
Бесплатный пользователь
До 100 Мб общего размера файла за один сеанс конвертирования
5 файлов на одно конвертирование
Обычный приоритет и скорость конвертирования
Наличие объявлений
Мы не может загружать видео с Youtube.
Картинки для сайта — где найти и как выбрать нужное изображение?
Где найти картинки для сайта?
Изображения для свободного использования в коммерческих и некоммерческих целях можно получить бесплатно и за деньги.
Бесплатные стоки
Бесплатные фотостоки работают по лицензии CCO. Сейчас их очень много, вот некоторые из них:

Плюсы: можно найти картинки для сайта бесплатно по темам и категорям, при этом авторство указывать обязательно. Использовать можно по своему усмотрению, в том числе изменять.

Минусы: искать подходящую иллюстрацию можно очень долго (и не найти).

Платные фотобанки
Платформы с платными картинками работают в двух форматах: подписка или «розничная» продажа отдельных картинок. Изображения продаются по стандартной лицензии, которая дает право использования в коммерческих целях, в том числе для оформления веб-ресурсов.
Примеры фотобанков:

Плюсы: найти нужные изображения для сайта можно гораздо быстрее — выбор там гораздо больше, чем на бесплатных площадках. Некоторые сервисы присылают подборки фотографий для свободного использования на e-mail.

Минусы: придется заплатить.

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

Плюсы: уникальный иллюстративный материал, созданный по вашим требованиям и параметрам.

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

Создавать самому
Если вы умеете работать в известных графических редакторах (например, суперизвестный Photoshop), можно самому создавать нужные изображения. Если умеете фотографировать и у вас есть хорошее оборудование для этого, можно делать снимки и ретушировать их.
Также можно пользоваться простыми онлайн-редакторами, которые помогают создавать иллюстрации разных форматов для разных целей:

Плюсы: можно не платить (у онлайн-редакторов есть и бесплатные тарифные планы), не нужно кому-то объяснять, что должно получиться, — все можно сделать самостоятельно.

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

Как выбрать размер изображения?
Картинки на веб-странице должно быть видно целиком — без прокручивания ползунков в какую бы то ни было сторону. Особенно это важно в эпоху mobile first, когда все больше людей посещают сайты с мобильных устройств.
Чтобы пользователь открыл страницу и сразу увидел изображение целиком, нужно заранее задать ей адекватные параметры и оптимизировать вес (а еще желательно внедрить адаптивный дизайн, который любят все — и поисковики, и пользователи).
Размер изображения
Идеальные размеры картинок для сайта у всех свои. Но относительно универсальным можно считать разрешение от 900х700 пикселей и меньше. Этого будет достаточно, чтобы пользователь видел изображение без дополнительных манипуляций, при этом оно не будет закрывать весь экран или, наоборот, теряться из виду.
Если нужно выбрать картинку под заданное место на сайте, можно пользоваться специальными расширениями для браузеров: например, линейка Page Ruler рассчитывает размер элементов в пикселях.

Наводите курсор на нужный объект, и сервис посчитает его размер
Вес фотогафий и иллюстраций
Чем тяжелее иллюстрации на сайте, тем медленнее он будет загружаться. Если веб-площадка грузится долго, то это замечают и пользователи, и поисковые роботы: ухудшаются поведенческие факторы и «проседают» позиции. Поэтому оптимизация изображений для сайта и проверка инструментами для проверки скорости загрузки — тоже часть поискового продвижения.
Для уменьшения веса фотографий и картинок есть онлайн-сервисы типа Optimizilla: нужно загрузить туда картинку и дождаться, пока программа ее «сожмет». После этого качество можно отрегулировать с помощью ползунков справа:

В зависимости от порога веса картинки, можно увеличить или уменьшить качество
Сколько должна весить одна картинка, определяется всегда отдельно для каждой площадки: есть ресурсы, где приходится пренебречь качеством для более быстрой загрузки, а где-то все наоборот. Чем меньше весит изображение, тем лучше, но без заметного ущерба его внешнему виду.
Как выбрать картинки для сайта и создать свой стиль: советы
Определитесь с целью своего сайта: что именно он дает или должен давать посетителям. Исходя из этого выбирайте и картинки — они должны формировать полноценное представление у пользователя о ваших услугах или товарах. Например, фото спортивной одежды должны показывать, насколько она подходит для спорта, а иллюстрации статей блога о выпечке — пробуждать аппетит.

Фотографии пирожных с сайта пекарни «Хлебница» сделаны в теплых тонах — это вызывает приятные ассоциации
Добавляйте элементы корпоративного цвета. Даже среди бесплатных изображений для сайта можно найти картинки подходящих цветов. А если делать изображения самим, то можно собственноручно расставлять акценты.

Корпоративный цвет SEO.RU — зеленый, и мы стараемся использовать его в том числе при оформлении статей в блоге
Старайтесь быть оригинальными. Если используете общедоступные бесплатные картинки для сайта, делайте необычную ретушь с помощью специальных приложений или нестандартное кадрирование. Если делаете собственный иллюстративный материал, то простора для фантазии больше, поэтому можно разработать собственные методы для обработки.

На сайте образовательной платформы «Теории и практики» превью одной из статей состоит из двух фотографий — оно привлекает внимание контрастом и ярким оформлением
Экспериментируйте со связкой текста и изображений — такие картинки очень нравятся пользователям, поэтому получают социальный отклик.

Именно так работает инфографика — пример с сайта Лаборатории реактивного движения НАСА
5. Просматривайте другие блоги и порталы, изучайте их иллюстративную составляющую. Только не занимайтесь плагиатом, а комбинируйте идеи и методы обработки, дополняйте детали и анализируйте тенденции.

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

Изображения могут улучшить дизайн и внешний вид веб-страницы.
Пример
<img src=»pulpitrock.jpg» alt=»Вид на горы»>
Пример
<img src=»img_girl.jpg» alt=»Девушка в куртке»>
Пример
<img src=»img_chania.jpg» alt=»Цветы в Ханье»>
Синтаксис изображений в формате HTML
В HTML изображения определяются тегом <img>.
Тег <img> пуст, он содержит только атрибуты и не имеет закрывающего тега.
Атрибут src задает URL-адрес (веб-адрес) изображения:
Атрибут ALT
Атрибут alt предоставляет альтернативный текст для изображения, если пользователь по какой-либо причине не может его просмотреть (из-за медленного соединения, ошибки в атрибуте src или если пользователь использует средство чтения с экрана).
Значение атрибута alt должно описывать изображение:
Пример
<img src=»img_chania.jpg» alt=»Flowers in Chania»>
Если обозреватель не может найти изображение, будет отображено значение атрибута alt:
Пример
<img src=»wrongname.gif» alt=»Flowers in Chania»>
Примечание: Атрибут alt является обязательным. Веб-страница не будет корректно проверяться без нее.
Размер изображения-ширина и высота
Для указания ширины и высоты изображения можно использовать атрибут style.
Пример
<img src=»img_girl.jpg» alt=»Girl in a jacket»>
Кроме того, можно использовать атрибуты width и height:
Пример
<img src=»img_girl.jpg» alt=»Girl in a jacket»>
Атрибуты width и height всегда определяют ширину и высоту изображения в пикселях.
Примечание: Всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, страница может мерцать во время загрузки изображения.
Ширина и высота, или стиль?
Атрибуты width , height и style действительны в HTML5.
Однако рекомендуется использовать атрибут style. Это предотвращает изменение размера изображений в таблицах стилей:
Пример

img {
width:100%;
}

<img src=»html5.gif» alt=»HTML5 Icon»>
<img src=»html5.gif» alt=»HTML5 Icon»>
</body>
</html>
Изображения в другой папке
Если не указано, обозреватель ожидает найти изображение в той же папке, что и веб-страница.
Тем не менее, он является общим для хранения изображений в вложенной папке. Затем необходимо включить имя папки в атрибут src:
Пример
<img src=»/images/html5.gif» alt=»HTML5 Icon»>
Изображения на другом сервере
Некоторые веб-узлы хранят свои изображения на серверах образов.
На самом деле, вы можете получить доступ к изображениям с любого веб-адреса в мире:
Пример
<img src=»https://html5css.ru/images/html5cs_green.jpg» alt=»html5css.ru»>
Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.
Анимированные изображения
HTML позволяет анимированные GIF:
Пример
<img src=»programming.gif» alt=»Computer Man»>
Изображение как ссылка
Чтобы использовать изображение в качестве ссылки, поместите тег <img> внутрь тега <a>:
Пример
<a href=»default.php»>
<img src=»smiley.gif» alt=»HTML tutorial» style=»width:42px;height:42px;border:0;»>
</a>
Примечание: border:0; добавляется для предотвращения IE9 (и более ранних) от отображения границы вокруг изображения (когда изображение является ссылкой).
Плавающее изображение
Используйте свойство CSS float, чтобы изображение поплыло вправо или влево от текста:
Пример

The image will float to the right of the text.
<p><img src=»smiley.gif» alt=»Smiley face» style=»float:left;width:42px;height:42px;»>
The image will float to the left of the text.</p>
Графические карты
Тег <map> определяет изображение-карту. Изображение-карта представляет собой изображение с щелчком области.
На картинке ниже, нажмите на компьютер, Телефон, или чашку кофе:
Пример
<map name=»workmap»>
<area shape=»rect» coords=»34,44,270,350″ alt=»Computer» href=»computer. htm»>
<area shape=»rect» coords=»290,172,333,250″ alt=»Phone» href=»phone.htm»>
<area shape=»circle» coords=»337,300,44″ alt=»Coffee» href=»coffee.htm»>
</map>
Атрибут name тега <map> связан с атрибутом usemap <img> и создает связь между изображением и картой.
Элемент <map> содержит несколько тегов <area>, определяющих области, на которые вы щелкнули на карте изображения.
Фоновое изображение
Чтобы добавить фоновое изображение в элемент HTML, используйте свойство CSS background-image:
Пример
Чтобы добавить фоновое изображение на веб-страницу, укажите свойство Background-Image элементу Body:
<h3>Background Image</h3>
</body>
Примере
Чтобы добавить фоновое изображение для абзаца, укажите свойство Background-Image в элементе P:
<p>
…
</p>
</body>
Чтобы узнать больше о фоновых изображениях, изучите наши CSS Background Справочник.
Элемент <picture>
HTML5 ввел элемент <picture> , чтобы добавить больше гибкости при указании ресурсов изображения.
Элемент <picture> содержит ряд элементов <source>, каждый из которых ссылается на различные источники изображения. Таким образом, обозреватель может выбрать изображение, которое наилучшим образом соответствует текущему виду и/или устройству.
Каждый элемент <source> имеет атрибуты, описывающие, когда их изображение является наиболее подходящим.
Обозреватель будет использовать первый элемент <source> с совпадающими значениями атрибутов и игнорировать любые следующие элементы <source>.
Пример
Показать одно изображение, если окно обозревателя (видовой экран) не менее 650 пикселей, а другое изображение, если нет, но больше, чем 465 пикселей.
<picture>
<source media=»(min-width: 650px)» srcset=»img_pink_flowers.jpg»>
<source media=»(min-width: 465px)» srcset=»img_white_flower.jpg»>
<img src=»img_orange_flowers.jpg» alt=»Flowers»>
</picture>
Примечание: Всегда указывайте элемент <img> в качестве последнего дочернего элемента элемента <picture>. Элемент <img> используется обозревателями, которые не поддерживают элемент <picture>, или если ни один из тегов <source> не соответствует.
Читатели экрана HTML
Программа чтения с экрана — это программное обеспечение, которое читает HTML-код, преобразует текст и позволяет пользователю прослушивать содержимое. Читатели экрана полезны для людей, которые слепы, слабовидящих или обучения инвалидов.
Справка
Используйте элемент HTML <img> для определения изображения
Используйте атрибут HTML src для определения URL-адреса изображения
Используйте атрибут HTML alt для определения альтернативного текста для изображения, если он не может быть отображен
Используйте атрибуты HTML width и height для определения размера изображения
Используйте свойства CSS width и height для определения размера изображения (в качестве альтернативы)
Используйте свойство CSS float , чтобы позволить изображению поплавок
Используйте элемент HTML <map> для определения изображения-карты
Используйте элемент HTML <area> для определения областей щелчка на карте изображения
Используйте атрибут usemap элемента HTML <img> , чтобы указать на карту изображения
Используйте элемент HTML <picture> для отображения различных изображений для различных устройств
Примечание: Загрузка изображений занимает время. Большие изображения могут замедлить вашу страницу. Используйте изображения тщательно.
Теги изображений HTML
Тег Описание
<img> Определяет изображение
<map> Определяет изображение-карту
<area> Определяет активную область внутри изображения-карты
<picture> Определяет контейнер для нескольких ресурсов изображения

Переход с Picasa
Переход с Picasa
Переход с Picasa
Мы решили отказаться от Picasa, чтобы сосредоточиться на единственном фото-сервисе в Google Фото — новом, более умном фото-приложении, которое без проблем работает на мобильных устройствах и в Интернете.
Где я могу найти свои фотографии?
Если у вас есть фотографии или видео в веб-альбоме Picasa, самый простой способ получить доступ, изменить и поделиться большей частью этого содержания — это войти в Google Фото. Ваши фото и видео уже будут там.
А как насчет моих тегов, подписей и комментариев?
Вы можете получить доступ к данным своих веб-альбомов Picasa, включая теги, подписи и комментарии, в архиве альбомов.
Узнать больше
Могу ли я использовать настольное приложение?
Для тех, кто уже скачал, продолжит работать так же, как и сегодня. Но мы не будем развивать его дальше, и в будущем не будет никаких обновлений.
Если вы решите переключиться на Google Фото, вы можете продолжить загрузку фотографий и видео с помощью программы загрузки для настольных ПК по адресу photos.google.com/apps.
Как насчет моих фотографий из Blogger, Hangouts и Google+?
Эти фотографии не появятся в Google Фото автоматически, но вы можете получить к ним доступ с помощью данных своих веб-альбомов Picasa в архиве альбомов.
Что делать, если у меня есть вопрос?
Что делать, если я разработчик?
Мы упраздним некоторые функции API Picasa.Разработчики могут узнать больше здесь.
Движение вперед
Приносим извинения за неудобства, причиненные этим переходом, но хотим заверить вас, что делаем это с целью обеспечить наилучшее качество фотографий. Google Фото — это новый и более умный продукт, который предлагает нам лучшую платформу для создания потрясающих возможностей и функций для вас в будущем.
Как эффективно использовать изображения на веб-сайтах
Многие веб-профессионалы проповедуют важность включения изображений в дизайн и содержание веб-сайта.
Визуальная привлекательность важна.
Однако нельзя просто использовать любое изображение и ожидать, что оно сотворит чудеса.
Позвольте мне обсудить некоторые идеи, которые следует учитывать при использовании изображений на своих веб-сайтах.
Целенаправленное использование изображений
Иногда у нас возникает соблазн использовать изображение на нашем веб-сайте только для того, чтобы иметь его. Веб-страница без него выглядит голой, поэтому мы думаем, что что-то лучше, чем ничто.
Якоб Нильсен, уважаемый исследователь юзабилити, провел исследование с отслеживанием взгляда, чтобы изучить влияние фотографий на веб-сайты.
В ходе исследования Нильсен обнаружил, что участники игнорировали изображения, когда они не служили никакой другой цели, кроме заполнения страницы визуальными элементами.
Посмотрите, как фотография справа на веб-странице ниже была полностью проигнорирована:
Фотография справа на веб-странице, откровенный снимок с сидящими студентами колледжа, не дает вам информации о том, как поступить в Йельскую школу менеджмента, о чем и посвящена веб-страница.
Таким образом, пользователи сайта, которые искали информацию о процессе поступления в школу, не нашли использования фотографии.
изображений, которые добавляются на веб-страницу с единственной целью — заполнить пустое пространство, никому не помогают, как показывает пример выше.
Nielsen заключил: «Пользователи уделяют пристальное внимание фотографиям и другим изображениям, которые содержат релевантную информацию, но игнорируют пушистые картинки, используемые для оживления веб-страниц».
Итак, как мы можем определить, полезно изображение или нет?
Задайте себе следующие вопросы, чтобы определить, является ли фотография, которую вы собираетесь использовать на своем веб-сайте, подходящей и целевой:
Есть ли у какие-либо преимущества использования этого конкретного изображения? Например, хорошо ли он демонстрирует мой продукт или услугу?
Помогает ли пользователю понять мысль, которую я пытаюсь донести?
Создает ли этот образ эмоциональную привлекательность? Например, помогает ли это покупателю представить себя с помощью продукта, изображенного на фотографии?
Как это изображение соотносится с моим брендом? Говорит ли это моей целевой аудитории?
Какое сообщение отправляет это изображение? Сообщение вообще отправляется?
Как мои посетителей отреагируют на на это изображение? Изменит ли это их мнение? Например, поможет ли это облегчить процесс покупки?
Использовать фотографии реальных людей
Исследования показывают, что веб-дизайн с привлечением людей более убедителен, чем без него.
Взгляните на результаты исследования A / B-тестирования, проведенного компанией 37signals, занимающейся веб-приложениями.
Они увидели на 102,5% больше регистраций только потому, что добавили изображение улыбающегося счастливого человека на целевую страницу одного из своих веб-приложений!
Укажите на очевидное
Вы должны не только включать людей на свои фотографии, но и использовать их, чтобы направлять пользователя.
Джеймс Бриз, специалист по юзабилити, провел исследование по отслеживанию взглядов, которое показало, что объект фотографии может определять фиксацию взгляда пользователя на веб-странице.
В частности, Бриз обнаружил, что люди сосредотачиваются на глазах объекта на фотографии. Когда объект фотографии обращен вперед, к зрителю, зритель редко связывает модель с содержанием веб-страницы:
Однако, когда объект смотрит прямо на продукт или текст, глаза зрителей следуют в направлении:
Использование направления взгляда — не единственная тактика.
Иногда изображения должны просто указывать на очевидное.
Например, посмотрите, как Karma Wi-Fi использует тему фотографии, чтобы указать пользователям на текст и рекламируемый продукт.
Моя авторская фотография — еще один отличный пример указания на очевидное. Зачем использовать общий выстрел в голову, если вы можете указать пользователям в том направлении, в котором они должны смотреть?
Использование изображений для иллюстрации концепций
Иногда картинка действительно стоит тысячи слов.
Например, на сайте ниже можно использовать 300 слов для описания размера устройства для чтения кредитных карт, пользовательского интерфейса приложения и процесса считывания карты.Или они могут просто использовать хорошо составленную фотографию и покончить с ней:
В то время как изображения-заполнители не служат никакой цели в мире удобства использования, изображения, иллюстрирующие концепцию, имеют огромную ценность.
Если фотография может отвечать на вопросы пользователей о том, кто, что, где, когда, почему и как относится к продукту или услуге, вы используете идеальную фотографию.
Оптимизируйте размер файлов изображений
Средний размер веб-страницы составляет 1,28 МБ. 61,5% из них приходится на изображения.
Если вы не будете осторожны, зависимость вашего сайта от изображений может ухудшить впечатление пользователей, поскольку это замедлит их взаимодействие с сайтом.
Существуют различные бесплатные приложения, которые помогут вам оптимизировать размер файлов ваших изображений. Вот некоторые из них:
Прощальное слово
Не используйте изображения только ради изображений. Используйте изображения для большего, чем заполнение пустого пространства или повышение визуального интереса веб-страницы.
При небольшой предусмотрительности и внимательности изображения могут стать мощным типом контента, который повысит удобство работы пользователей на вашем веб-сайте.
Могу ли я использовать изображения из Интернета на моем веб-сайте?

Следует ли использовать изображения Google для украшения вашего сайта?
Вы недавно запустили веб-сайт и теперь ищете способы улучшить дизайн, добавив изображения? Если это так, то вы, вероятно, поняли, что можете выполнить быстрый поиск в Картинках Google и найти тысячи изображений, которые идеально подойдут для вашего сайта.
Но я готов поспорить, вы всегда задавались вопросом: Могу ли я использовать изображения из Интернета на моем веб-сайте?
Короткий ответ — вы можете . Длинный ответ : вам не следует использовать , и вот почему: хотя может показаться, что очень легко перейти на Google и использовать несколько изображений, это абсолютно неправильный способ добавлять изображения на ваш сайт.
Эти цифровые изображения, хотя их легко найти, не являются вашими собственными. На самом деле они принадлежат кому-то другому и являются частью веб-сайта этого человека или компании, и они не будут довольны тем, что вы используете их собственность без их разрешения.
Хотя кажется очень простым сделать эти изображения и разместить их на своем сайте, вы действительно можете столкнуться с серьезными проблемами нарушения авторских прав на фотографии, выбрав этот путь.
Изображения, полученные без разрешения в сети, могут доставить вам массу неприятностей. Компании нередко подают в суд на другие веб-сайты за использование этих изображений.
То, что вы делаете, может показаться вам совершенно невинным, но другим, кто потратил деньги на получение этих изображений, вы ошибаетесь. Некоторые люди были ошеломлены судебными исками или электронными письмами с просьбой о значительных суммах денег из-за нарушения законов об авторских правах на изображения.
Для наглядного примера того, что я имею в виду, посмотрите это видео ниже об использовании изображений из Google на вашем сайте.

Не делайте этой ошибки, получите свои изображения в соответствии с законом
Теперь, когда вы поняли, что вам не следует получать изображения в Интернете незаконно, вы, вероятно, думаете о том, как вы собираетесь искать изображения для своего нового веб-сайта. На самом деле существует несколько различных способов получения изображений для своего веб-сайта.
Некоторые из этих вариантов требуют от вас большего творчества, в то время как другие позволяют потратить несколько долларов на решение проблемы, чтобы получить нужные изображения.
Как получить изображения легально
1. Создавайте собственные изображения. Самый простой способ получить изображения для вашего веб-сайта — создать их самостоятельно. Это может показаться сложным, но существует множество бесплатных графических инструментов, таких как Gimp, Paint.net и другие, которые позволяют быстро создавать графику для ваших веб-сайтов.
Если вы хотите потратить больше денег, чтобы иметь лучший инструмент, вы всегда можете приобрести Adobe Photoshop, и небо буквально является пределом с точки зрения типов графики, которые вы можете использовать для своего веб-сайта.
2. Покупайте изображения на веб-сайте Stock Photo. Есть множество различных веб-сайтов, предлагающих услуги стоковых фотографий. Многие из этих сайтов имеют интуитивно понятные поисковые системы, которые позволяют искать любую тему, которая должна возвращать сотни, если не тысячи результатов с изображениями.
Любое из этих изображений можно приобрести за небольшую плату и затем использовать на своем веб-сайте. Я являюсь участником depositphotos.com. Некоторые другие популярные сайты стоковых фотографий: istockphoto.com или shutterstock.com, bigstockphoto.com и многие другие.
3. Используйте бесплатную библиотеку изображений Flickr. Flickr имеет большое количество бесплатных изображений, которые находятся в так называемой библиотеке «Creative Commons» . Эти изображения совершенно бесплатны и могут быть использованы на вашем веб-сайте.
Это отличный способ найти изображения бесплатно, когда вы только начинаете. Эти изображения могут быть не такого высокого качества, как стандартные, но для нового веб-сайта они должны служить цели.
А как насчет онлайн-библиотеки содержимого Microsoft?
Изображение, используемое в этом сообщении, взято из Microsoft Online Content Library . Я часто их использую. В большинстве случаев вы можете свободно использовать эти фотографии и картинки при условии, что у вас есть лицензия на продукт Microsoft, например Word или PowerPoint.
Еще одна вещь, которую я всегда делаю, — это предоставление так называемого «имидж-кредита». Это просто обратная ссылка на источник или веб-сайт, с которого я получил изображение.
Но будьте осторожны, , на сайте Microsoft также есть изображения из других источников, которые могут потребовать от вас покупки или получения разрешения перед их использованием.Чтобы узнать, что может быть ограничено, вы можете просмотреть действующую политику Microsoft Copyright Use Policy для картинок и образцов мультимедиа.
Итог
Неважно, какой тип веб-сайта вы создаете, изображения очень важны. При размещении изображений на своем сайте убедитесь, что у вас есть соответствующее разрешение на авторские права. Без этого разрешения вы могли бы рассматривать судебный процесс, что, безусловно, не является вашим намерением!
Также стоит прочитать
Кредит изображения: Microsoft Clip Art
Увеличивают ли человеческие фотографии конверсию веб-сайтов?
Начиная с новой серии в этом блоге под названием Возвращаясь к классике , я еще раз взгляну на наши тематические исследования A / B-тестирования и пролью на них новый свет (с дополнительными комментариями).Тематическое исследование, которое я выбрал для этого поста, касается человеческих фотографий на целевых страницах и того, повышают ли они коэффициент конверсии. Прежде чем читать оставшуюся часть поста, сделайте предположение: действительно ли человеческие фотографии (мужские / женские) в Интернете оказывают какое-либо подсознательное влияние на посетителей?
Что говорят исследования о фотографиях людей на веб-сайтах?
По этой теме проводились серьезные научные исследования, особенно в отношении веб-сайтов электронной коммерции. Когда вы обдумываете решение о покупке, главная проблема в Интернете — это доверие.Как узнать, заслуживает ли доверия тот или иной веб-сайт? Извлекая уроки из телевизионной рекламы и общих принципов маркетинга, люди, владеющие сайтами электронной коммерции, думают, что увязывание фотографий людей с продуктами вызывает доверие. Конечно, фотографии людей = повышенное доверие — всего лишь гипотеза. Но так ли это на самом деле?
Чтобы ответить на этот вопрос, я проанализировал несколько исследовательских работ (опубликованных в рецензируемых научных журналах). Ниже приведены некоторые из основных (вместе с выдержками):
Человеческое лицо электронного бизнеса: обеспечение первоначального доверия потребителей за счет использования изображений торгового персонала на веб-сайтах электронной коммерции: было обнаружено, что первоначальное доверие повысилось для веб-сайтов, использующих фотографии и видеоклипы, по сравнению с контрольными веб-сайтами без таких изображений
Блестящие счастливые люди, укрепляющие доверие ?: фотографии на сайтах электронной коммерции и доверие потребителей: Надежность сайтов с низким уровнем доверия можно повысить, добавив фото
Изучение человеческих изображений в дизайне веб-сайтов в разных культурах: мульти-метод: результаты показывают, что веб-сайты с изображениями, включающими лицевые характеристики, воспринимаются пользователями более положительно, чем изображения без черт лица или вообще без человеческих изображений
Доверие с первого взгляда? Проверка способности пользователей определять надежные сайты электронной коммерции: фотография повлияла только на первое впечатление участников о продавце
Не только научные исследования, но и реальные A / B-тесты, которые я видел, также подтверждают гипотезу о том, что человеческие фотографии могут увеличить коэффициент конверсии. Двое наших клиентов использовали наш инструмент A / B-тестирования (VWO), чтобы проверить наличие человеческих фотографий и их влияние на конверсии. В следующих разделах подробно рассказывается, что они сделали и что узнали.
Фото v / s Картины (A / B test # 1)
Medalia Art занимается продажей бразильского и карибского искусства в Интернете. Поскольку это онлайн-магазин произведений искусства, они демонстрируют картины известных художников на своей домашней странице. Они решили проверить, что будет, если картины заменить фотографиями художников.
Целью этого A / B-теста было повышение вовлеченности посетителей (определяется как щелчок по любой ссылке на главной странице; это обратное значение показателя отказов).Они не использовали продажи как коэффициент конверсии, поскольку многие из их продаж происходят после телефонного разговора с покупателем.
Вот скриншоты контрольной (картины) и победившей версии (фото).
— Оригинал (с росписями) —
— Вариант (с фото) —
Результатов? : Medalia выяснила, что с картинами коэффициент конверсии составил 8,8%, но если картины заменить фотографиями художников, коэффициент конверсии вырастет до колоссальных 17.2%. Это на увеличение коэффициента конверсии более чем на 95% ! (результаты были статистически значимыми) Насколько это круто для внесения небольших изменений?
Фото v / s Общий значок (A / B тест № 2)
Другой пользователь, Джейсон Томпсон, провел A / B-тест в своем блоге, чтобы увидеть, приведет ли замена значка контакта его собственной фотографией к тому, что с ним будет связываться больше людей. Ниже приведен скриншот оригинала и варианта:
Оригинал (со значком)
Вариант (с фото)
3. Конверсия 7%
5,5% коэффициент конверсии
Результаты ясно показывают, что версия с фотографией Джейсона имела на 48% больше конверсий по сравнению с обычным значком. (Опять же, результаты статистически значимы).
Джейсон прокомментировал результаты теста:
Люди хотят общаться с другими людьми эмоционально, фотография делает эту эмоциональную связь намного проще и, как показывает тест, побуждает людей к контактной форме больше, чем невзрачный значок.
Итак, стоит ли вам использовать фотографию человека на своем веб-сайте?
Есть сотни других исследований и, вероятно, больше результатов A / B-тестов, которые вы можете прочитать, но из того, что я читал и наблюдал, вот некоторые важные моменты о человеческих фотографиях на веб-сайтах:
Фотографии людей на веб-сайте определенно положительно влияют на первое впечатление посетителей о надежности.
Человеческие фотографии с фокусом на лице имеют гораздо большее влияние (поскольку эмоциональная связь сильнее)
Фотографии должны быть «настоящими».Посетители могут сказать, когда вы используете стоковые фотографии
Самый важный вывод : человеческие фотографии — не панацея для всех сайтов. Лучше всего проводить A / B-тестовые фотографии, а на вашем сайте нет фотографий. Многие исследовательские работы доказали, что в некоторых случаях фотографии людей могут иметь негативное влияние!
Надеюсь, вы нашли эту статью полезной. Если у вас есть какие-либо комментарии или предложения, дайте мне знать.
Продолжить чтение
изображений в формате HTML — Изучите веб-разработку
Вначале Интернет был просто текстом, и это было действительно довольно скучно. К счастью, вскоре появилась возможность встраивать изображения (и другие более интересные типы контента) внутрь веб-страниц. Можно рассмотреть и другие типы мультимедиа, но логично начать со скромного элемента , который используется для встраивания простого изображения на веб-страницу. В этой статье мы подробно рассмотрим, как его использовать, в том числе основы, аннотируя его подписями с помощью
и подробно описывая его связь с фоновыми изображениями CSS.
Чтобы разместить простое изображение на веб-странице, мы используем элемент . Это пустой элемент (это означает, что он не имеет текстового содержимого или закрывающего тега), для использования которого требуется как минимум один атрибут — src (иногда произносится как его полное название, источник ). Атрибут src содержит путь, указывающий на изображение, которое вы хотите встроить на страницу, который может быть относительным или абсолютным URL, точно так же, как значения атрибута href в элементах .
Так, например, если ваше изображение называется dinosaur.jpg и находится в том же каталоге, что и ваша HTML-страница, вы можете встроить изображение следующим образом:

Если изображение находится в подкаталоге images , который находится в том же каталоге, что и HTML-страница (которую Google рекомендует для целей SEO / индексации), то вы должны встроить его следующим образом:

И так далее.
Примечание : поисковые системы также считывают имена файлов изображений и подсчитывают их для SEO. Следовательно, вы должны дать своему изображению описательное имя файла; dinosaur.jpg лучше, чем img835.png .
Вы можете встроить изображение, используя его абсолютный URL, например:
example.com/images/dinosaur.jpg">
Но это бессмысленно, поскольку это просто заставляет браузер выполнять больше работы, заново искать IP-адрес с DNS-сервера и т. Д.Вы почти всегда будете хранить изображения для своего веб-сайта на том же сервере, что и ваш HTML.
Предупреждение: Большинство изображений защищены авторским правом. Не , а отображать изображение на вашей веб-странице, если:
Изображение принадлежит вам.
Вы получили явное письменное разрешение от владельца изображения.
У вас есть достаточные доказательства того, что изображение на самом деле является общественным достоянием.

Нарушение авторских прав является незаконным и неэтичным.Кроме того, никогда не указывает на ваш атрибут src на изображение, размещенное на чужом веб-сайте, на которое у вас нет разрешения ссылаться. Это называется «хотлинкинг». Опять же, кража чьей-либо полосы пропускания незаконна. Это также замедляет вашу страницу, не позволяя вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.
Приведенный выше код даст нам следующий результат:
Примечание : такие элементы, как и , иногда называют замененными элементами .Это связано с тем, что содержимое и размер элемента определяются внешним ресурсом (например, изображением или видеофайлом), а не содержимым самого элемента. Вы можете узнать о них больше в Замененных элементах.
Альтернативный текст
Следующий атрибут, который мы рассмотрим, — alt . Его значение должно быть текстовым описанием изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения.Например, наш приведенный выше код можно изменить так:
jpg" alt = "Голова и туловище скелета динозавра; у него большая головка с длинными острыми зубцами ">
Самый простой способ проверить текст или — это намеренно неправильно написать имя файла. Если, например, имя нашего изображения было написано dinosooooor.jpg , браузер не отображал бы изображение, а вместо этого отобразил бы замещающий текст:
Итак, зачем вам вообще нужен замещающий текст? Может пригодиться по ряду причин:
Пользователь с ослабленным зрением использует программу чтения с экрана, чтобы читать ему информацию в Интернете.Фактически, наличие альтернативного текста для описания изображений полезно для большинства пользователей.
Как описано выше, имя файла или путь может быть написано неправильно.
Браузер не поддерживает этот тип изображения. Некоторые люди по-прежнему используют текстовые браузеры, такие как Lynx, который отображает замещающий текст изображений.
Вы можете предоставить текст для использования поисковыми системами; например, поисковые системы могут сопоставлять замещающий текст с поисковыми запросами.
Пользователи отключили изображения, чтобы уменьшить объем передаваемых данных и отвлекающих факторов.Это особенно часто встречается на мобильных телефонах и в странах, где полоса пропускания ограничена или дорога.
Что именно вы должны написать в своем атрибуте alt ? Это зависит от , почему изображение здесь вообще. Другими словами, что вы потеряете, если ваше изображение не появится:
Украшение. Вы должны использовать фоновые изображения CSS для декоративных изображений, но если вы должны использовать HTML, добавьте пустое поле alt = "" . Если изображение не является частью содержимого, программа чтения с экрана не должна тратить время на его чтение.
Содержимое. Если ваше изображение содержит важную информацию, предоставьте ту же информацию в кратком тексте alt — или, что еще лучше, в основном тексте, который может видеть каждый. Не пишите лишний текст или . Насколько раздражало бы зрячего пользователя, если бы все абзацы в основном содержании были написаны дважды? Если изображение адекватно описывается основным текстом текста, вы можете просто использовать alt = "" .
Ссылка. Если вы поместите изображение в теги , чтобы превратить изображение в ссылку, вы все равно должны предоставить доступный текст ссылки.В таких случаях вы можете либо записать его внутри того же элемента , либо внутри атрибута изображения alt — в зависимости от того, что лучше всего подходит для вашего случая.
Текст. Не помещайте текст в изображения. Если вашему основному заголовку нужна тень, например, используйте для этого CSS, а не помещайте текст в изображение. Однако, если вы, , действительно не можете избежать этого , вам следует указать текст внутри атрибута alt .
По сути, главное — обеспечить удобство использования, даже когда изображения не видны.Это гарантирует, что все пользователи не пропустят ни одного контента. Попробуйте отключить изображения в своем браузере и посмотрите, как все выглядит. Вы скоро поймете, насколько полезен замещающий текст, если изображение не видно.
Ширина и высота
Вы можете использовать атрибуты width и height , чтобы указать ширину и высоту вашего изображения. Вы можете узнать ширину и высоту своего изображения разными способами. Например, на Mac вы можете использовать Cmd + I , чтобы отобразить информацию для файла изображения.Возвращаясь к нашему примеру, мы могли бы сделать так:

При нормальных обстоятельствах это не приводит к большой разнице в отображении. Но если изображение не отображается, например, пользователь только что перешел на страницу, а изображение еще не загружено, вы заметите, что браузер оставляет место для отображения изображения:
Это хорошая вещь, благодаря которой страница загружается быстрее и плавнее.
Однако не следует изменять размер изображений с помощью атрибутов HTML. Если вы установите слишком большой размер изображения, вы получите изображения, которые будут выглядеть зернистыми, нечеткими или слишком маленькими, и потратите трафик на загрузку изображения, которое не соответствует потребностям пользователя. Изображение также может выглядеть искаженным, если вы не соблюдаете правильное соотношение сторон. Вы должны использовать редактор изображений, чтобы установить изображение нужного размера перед тем, как разместить его на своей веб-странице.
Примечание : Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого CSS.
Заголовки изображений
Как и в случае со ссылками, вы также можете добавить к изображениям атрибуты title , чтобы при необходимости предоставить дополнительную вспомогательную информацию. В нашем примере мы могли бы сделать это:

Это дает нам всплывающую подсказку при наведении курсора мыши, как и заголовки ссылок:
Однако это не рекомендуется — title имеет ряд проблем с доступностью, в основном из-за того, что поддержка программ чтения с экрана очень непредсказуема, и большинство браузеров не будут отображать ее, если вы не наводите курсор мыши (например, e.грамм. нет доступа к клавиатуре пользователей). Если вас интересует дополнительная информация об этом, прочтите Скотт О’Хара «Испытания и невзгоды атрибута титула».
Такую вспомогательную информацию лучше включать в основной текст статьи, чем прикреплять к изображению.
Активное обучение: встраивание изображения
Теперь ваша очередь играть! В этом разделе активного обучения вы сможете приступить к работе с помощью простого упражнения по внедрению. Вам предоставляется базовый тег ; мы хотели бы, чтобы вы встроили изображение, расположенное по следующему URL-адресу:
https: // raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg
Ранее мы сказали никогда не использовать горячие ссылки на изображения на других серверах, но это только в учебных целях, поэтому мы позволим вам отказаться от этого один раз.
Мы также хотим, чтобы вы:
Добавьте альтернативный текст и убедитесь, что он работает путем неправильного написания URL-адреса изображения.
Задайте для изображения правильную ширину и высоту (подсказка: ширина 200 пикселей и высота 171 пикселей), затем поэкспериментируйте с другими значениями, чтобы увидеть, каков будет эффект.
Установите на изображение заголовок .
Если вы допустили ошибку, вы всегда можете сбросить его с помощью кнопки Reset . Если вы действительно застряли, нажмите кнопку Показать решение , чтобы увидеть ответ:
Говоря о подписях, есть несколько способов добавить подпись к изображению. Например, ничто не помешает вам сделать это:
Тираннозавр на выставке в музее Манчестерского университета.
Это нормально. Он содержит необходимый вам контент и красиво стилизован с помощью CSS. Но здесь есть проблема: нет ничего, что семантически связывает изображение с его подписью, что может вызвать проблемы для программ чтения с экрана. Например, если у вас есть 50 изображений и подписей, какая подпись сочетается с каким изображением?
Лучшее решение — использовать элементы HTML5
и
. Они созданы именно для этой цели: предоставить семантический контейнер для рисунков и четко связать рисунок с подписью.Наш пример выше можно переписать так:
<рисунок> Тираннозавр выставлен в музее Манчестерского университета.

Элемент
сообщает браузерам и вспомогательной технологии, что заголовок описывает другое содержимое элемента
.
Примечание : с точки зрения доступности заголовки и текст alt имеют разные роли. Подписи приносят пользу даже людям, которые могут видеть изображение, тогда как текст alt обеспечивает те же функции, что и отсутствующее изображение. Следовательно, подписи и текст alt не должны просто говорить одно и то же, потому что они оба появляются, когда изображение исчезает. Попробуйте отключить изображения в своем браузере и посмотрите, как они выглядят.
Фигурка не обязательно должна быть изображением.Это независимая единица контента, которая:
Выражает ваш смысл в компактном, легком для понимания виде.
Может размещаться в нескольких местах линейного потока страницы.
Содержит важную информацию, подтверждающую основной текст.
Цифрой может быть несколько изображений, фрагмент кода, аудио, видео, уравнения, таблица или что-то еще.
Активное обучение: создание фигуры
В этом разделе активного обучения мы хотели бы, чтобы вы взяли готовый код из предыдущего раздела активного обучения и превратили его в фигуру:
Оберните его в элемент
.
Скопируйте текст из атрибута title , удалите атрибут title и поместите текст внутри элемента
под изображением.
Если вы ошиблись, вы всегда можете сбросить его с помощью кнопки Reset . Если вы действительно застряли, нажмите кнопку Показать решение , чтобы увидеть ответ:
Вы также можете использовать CSS для встраивания изображений в веб-страницы (и JavaScript, но это совсем другая история).Свойство CSS background-image и другие свойства background- * используются для управления размещением фонового изображения. Например, чтобы разместить фоновое изображение в каждом абзаце на странице, вы можете сделать это:
p { фоновое изображение: url ("images / dinosaur.jpg"); }
Полученное встроенное изображение, возможно, легче позиционировать и контролировать, чем изображения HTML. Так зачем возиться с изображениями HTML? Как указано выше, фоновые изображения CSS предназначены только для украшения.Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Впрочем, смыслового значения такие изображения не имеют. У них не может быть текстовых эквивалентов, они невидимы для программ чтения с экрана и т. Д. Вот где блистают HTML-изображения!
Подведение итогов: если изображение имеет значение с точки зрения вашего содержания, вы должны использовать изображение HTML. Если изображение чисто декоративное, вам следует использовать фоновые изображения CSS.
Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — см. Проверка своих навыков: изображения HTML.
На этом пока все. Мы подробно рассмотрели изображения и подписи. В следующей статье мы рассмотрим, как использовать HTML для встраивания видео и аудио на веб-страницы.
Оптимизация изображений для поисковых систем • Yoast
Михиэль Хейманс
Михиэль был одним из наших первых сотрудников и раньше был партнером Yoast. Начните оптимизацию своего сайта с его статей!
Независимо от того, являетесь ли вы блогером или пишете статьи для интернет-журнала или газеты, есть вероятность, что вы задаетесь вопросом, нужно ли вашей статье изображение или нет.Ответ всегда «да». Изображения оживляют статью, а также способствуют поисковой оптимизации вашего сайта. В этом посте объясняется, как полностью оптимизировать изображение для SEO, и даются некоторые советы по использованию изображений для лучшего взаимодействия с пользователем.
Всегда использовать изображения
Изображения при правильном использовании помогут читателям лучше понять вашу статью. Старая поговорка «Картинка стоит тысячи слов», вероятно, не применима к Google, но она определенно верна, когда вам нужно оживить 1000 скучных слов, проиллюстрировать то, что вы имеете в виду, на диаграмме или диаграмме потока данных или просто сделать так, чтобы сообщения в социальных сетях более заманчивые.
Это простая рекомендация: добавляйте изображения в каждую статью, которую вы пишете, чтобы сделать их более привлекательными. Более того, поскольку визуальный поиск становится все более важным — как видно из видения Google будущего поиска — он может обеспечить вам хороший трафик. И если у вас есть визуальный контент, имеет смысл поставить SEO изображений немного выше в вашем списке дел.
Некоторое время назад у Google Images появился совершенно новый интерфейс с новыми фильтрами, метаданными и даже атрибуцией.Эти новые классные фильтры показывают, что Google все больше знает, что находится в изображении и как оно вписывается в более широкий контекст.
Поиск картинок Google показывает гораздо больше, чем просто изображения
Поиск подходящего изображения
Всегда лучше использовать оригинальные изображения — фотографии, которые вы сделали сами, — чем стандартные. На странице вашей команды нужны фотографии вашей реальной команды, а не этого чувака справа или одного из его друзей по стоковой фотографии. Не по теме: еще этому чуваку очень нужна стрижка.
Для вашей статьи необходимо изображение, соответствующее ее теме. Если вы добавляете случайную фотографию только для того, чтобы получить зеленую отметку при анализе контента плагина Yoast SEO, значит, вы делаете это неправильно. Изображение должно отражать тему сообщения или иметь иллюстративную цель в статье. Также постарайтесь разместить изображение рядом с соответствующим текстом. Если у вас есть основное изображение или изображение, которое вы пытаетесь оценить, старайтесь держать его в верхней части страницы, если это возможно, без принуждения.
Для всего этого есть простая причина для SEO: изображение со связанным текстом лучше ранжируется по ключевому слову, для которого оно оптимизировано. Но мы обсудим SEO изображений позже в этой статье.
Альтернативы
Если у вас нет оригинальных изображений, которые можно было бы использовать, есть другие способы найти уникальные изображения и по-прежнему избегать стоковых фотографий. Например, Flickr.com — хороший источник изображений, так как вы можете использовать изображения Creative Commons. Только не забудьте указать оригинального фотографа.Нам также нравятся изображения, предоставленные такими сайтами, как Unsplash. У нас есть сообщение в блоге, в котором вы найдете потрясающий обзор того, где взять отличные изображения. Держитесь подальше от очевидных стоковых фотографий, а если вы используете стоковые фотографии, выберите те, которые выглядят (ладно, чуть-чуть) более подлинными. Но что бы вы ни использовали, вы, вероятно, обнаружите, что изображения с людьми всегда выглядят как стоковые фотографии. Если только вы не сделали фотографии сами, что (на наш взгляд) всегда лучшая идея.
Очевидной альтернативой фотографиям могут быть графики или иллюстрации, которые мы в Yoast и используем. Если вам интересно, наш постоянный иллюстратор Эрвин написал забавную статью о создании иллюстраций в блоге нашего разработчика. Также следует особо отметить анимированные GIF-файлы, которые в наши дни невероятно популярны.
Анимированные GIF-файлы — это круто, но с большой нагрузкой
Но даже несмотря на то, что анимированные GIF-файлы популярны, не переусердствуйте. Это затруднит чтение вашего сообщения, поскольку движение изображения отвлекает внимание ваших читателей. Они также могут замедлить вашу страницу.
Подробнее: Изображения для публикаций в блоге: зачем их использовать и где их найти »
Подготовка изображений для использования в статье
После того, как вы нашли нужное изображение — будь то фотография, иллюстрация или диаграмма, — следующим шагом будет его оптимизация для использования на вашем веб-сайте.Поэтому, прежде чем добавлять изображение, вам нужно подумать о нескольких вещах:
Выберите правильное имя файла
Image SEO начинается с имени файла. Вы хотите, чтобы Google знал, о чем изображение, даже не глядя на него, поэтому используйте ключевую фразу фокуса в имени файла изображения. Это просто: если вы пишете статью о Нотр-Дам и используете изображение восхода солнца в Париже над собором Парижской Богоматери, имя файла не должно быть DSC4536.jpg. Правильное имя файла — notre-dame-paris-sunrise.jpg, убедившись, что основная тема фотографии (и вашей статьи) находится в начале имени файла.
Выберите правильный формат
Для изображений правильный формат не существует; это зависит от типа изображения и от того, как вы хотите его использовать. Вкратце, мы рекомендуем:
Выберите JPEG для больших фотографий или иллюстраций: он даст хорошие результаты с точки зрения цвета и четкости при относительно небольшом размере файла;
используйте PNG, если вы хотите сохранить прозрачность фона в вашем изображении;
или используйте WebP вместо JPEG и PNG. Это даст высококачественные результаты с меньшими размерами файлов. Вы можете использовать такие инструменты, как Squoosh, для преобразования вашего изображения в WebP.
использовать SVG для логотипов и значков. С помощью CSS или JavaScript вы можете управлять изображениями в формате SVG, например, изменять их размер без потери качества.
Если вы знаете, что большая часть вашей аудитории использует определенные браузеры или устройства, обязательно проверьте, поддерживается ли ваш предпочтительный формат этими браузерами на CanIuse.com.
Когда вы выбрали правильное имя и формат, самое время изменить размер и оптимизировать изображение!
Масштаб изображения SEO
Время загрузки важно для UX и SEO.Чем быстрее сайт, тем легче пользователям и поисковым системам посещать (и индексировать) страницу. Изображения могут иметь большое влияние на время загрузки, особенно когда вы загружаете огромное изображение, чтобы отобразить его действительно маленьким — например, изображение размером 2500 × 1500 пикселей, отображаемое с размером 250 × 150 пикселей, — поскольку все изображение все еще должно быть загружено. Поэтому измените размер изображения так, как вы хотите, чтобы оно отображалось. WordPress помогает вам в этом, автоматически предоставляя изображение нескольких размеров после его загрузки. К сожалению, это не означает, что размер файла также оптимизирован, это просто размер отображаемого изображения.Так что подумайте о размере, в котором вы загружаете свои изображения!
Используйте адаптивные изображения
Это также важно для SEO, и если вы используете WordPress, это сделано за вас, так как он был добавлен по умолчанию из версии 4.4. Изображения должны иметь атрибут srcset , который позволяет использовать разные изображения для каждой ширины экрана — это особенно полезно для мобильных устройств.
Уменьшить размер файла
Следующим шагом в поисковой оптимизации изображений должно быть обеспечение сжатия масштабированного изображения, чтобы оно отображалось с наименьшим возможным размером файла.
Конечно, вы можете просто экспортировать изображение и поэкспериментировать с процентами качества, но мы предпочитаем использовать изображения максимально возможного качества, особенно учитывая популярность сетчатки и подобных экранов в наши дни.
Такие инструменты, как JPEGmini, могут значительно уменьшить размер файла изображения без артефактов.
Вы все равно можете уменьшить размер файла этих изображений, например, удалив данные EXIF. Мы рекомендуем использовать такие инструменты, как ImageOptim или такие веб-сайты, как Squoosh, JPEGmini, jpeg.io или Kraken.io.
После оптимизации изображений вы можете протестировать свою страницу с помощью таких инструментов, как Google PageSpeed Insights, Lighthouse, WebPageTest.org или Pingdom.
Добавление изображения в статью
В то время как Google становится все лучше и лучше распознает изображения, пока не стоит полностью полагаться на их способности. Все сводится к тому, что вы предоставляете контекст для этого изображения — так что заполните как можно больше! Мы обсудим, как это сделать, ниже.
Ваше изображение готово к использованию, но не добавляйте его в свою статью.Как упоминалось ранее, очень помогает добавление его рядом с соответствующим текстовым контентом. Он гарантирует, что текст так же актуален для изображения, как и изображение для текста, что предпочитают пользователи и Google.
Подписи
Подпись к изображению — это текст, который сопровождает изображение на странице. Если вы посмотрите на изображения в этой статье, это будет текст в сером поле под каждым из них. Почему подписи важны для SEO изображений? Потому что люди используют их при сканировании статьи. Люди склонны сканировать заголовки, изображения и подписи во время сканирования веб-страницы.Еще в 1997 году Якоб Нильсен писал:
«Элементы, улучшающие сканирование, включают заголовки, крупный шрифт, полужирный текст, выделенный текст, маркированные списки, графику, подписи, тематические предложения и оглавления».
В 2012 году KissMetrics пошел еще дальше, заявив, что:
«Подписи под изображениями читаются в среднем на 300% чаще, чем основной текст, поэтому неиспользование или неправильное использование означает упущенную возможность привлечь огромное количество потенциальных читателей.”
Вам нужно добавлять подписи к каждому изображению? Нет, потому что иногда изображения служат другим целям. Решите, хотите ли вы использовать свой для SEO или нет. Помня о необходимости избегать чрезмерной оптимизации, мы бы посоветовали добавлять подписи только там, где посетителю будет иметь смысл их присутствие. В первую очередь подумайте о посетителе и не добавляйте подпись только для SEO-оптимизации изображений.
alt текст и заголовок текст
Текст alt (или тег alt) добавляется к изображению, поэтому на месте будет описательный текст, если изображение не может быть показано посетителю по какой-либо причине.Мы не можем выразить это лучше, чем Википедия:
«В ситуациях, когда изображение недоступно для читателя, возможно, потому, что они отключили изображения в своем веб-браузере или используют программу чтения с экрана из-за нарушения зрения, альтернативный текст гарантирует, что никакая информация или функциональные возможности не будут потеряны. ”
Не забудьте добавить замещающий текст к каждому изображению, которое вы используете, и убедитесь, что замещающий текст включает ключевую фразу SEO для этой страницы (при необходимости). Самое главное, опишите, что изображено на изображении, чтобы и поисковые системы, и люди могли разобраться в этом.Чем больше релевантной информации окружает изображение, тем больше поисковые системы считают это изображение важным.
При наведении курсора на изображение некоторые браузеры показывают текст заголовок как «всплывающую подсказку». Chrome показывает текст заголовка, как и предполагалось. Текст заголовка для изображений аналогичен, и многие люди, использующие заголовки, просто копируют замещающий текст, но все больше и больше людей вообще их не учитывают. Это почему? Вот оценка Mozilla:
“ title имеет ряд проблем с доступностью, в основном из-за того, что поддержка программ чтения с экрана очень непредсказуема, и большинство браузеров не будут отображать ее, если вы не наведете курсор мыши (т. Е.грамм. нет доступа к пользователям клавиатуры) ».
Такую вспомогательную информацию лучше включать в основной текст статьи, чем прикреплять к изображению.
Продолжайте читать: Подробнее об оптимизации тегов alt и title »
Добавить структурированные данные изображения
Добавление структурированных данных на ваши страницы может помочь поисковым системам отображать ваши изображения в качестве расширенных результатов. Хотя Google утверждает, что структурированные данные не помогают вам лучше ранжироваться, они помогают получить более подробный список в Поиске изображений.Но есть еще кое-что. Например, если у вас есть рецепты на вашем сайте, и вы добавляете структурированные данные к своим изображениям, Google также может добавить к вашим изображениям значок, показывающий, что это изображение принадлежит рецепту. Google Images поддерживает структурированные данные для следующих типов:
При поиске Yoast SEO Premium в Картинках Google появляется этикетка продукта на странице нашего плагина.
У Google есть ряд рекомендаций, которым вы должны следовать, если хотите, чтобы ваши изображения выглядели богатыми при поиске изображений. Во-первых, при указании изображения как свойства структурированных данных убедитесь, что изображение действительно принадлежит экземпляру этого типа.Кроме того, ваше изображение должно иметь атрибут image, и ваши изображения должны быть доступны для сканирования и индексации. Вы можете найти их все Общие рекомендации Google по структурированным данным.
Yoast SEO автоматически добавляет правильные структурированные данные к нескольким изображениям на вашем сайте, таким как ваш логотип или те, которые вы добавляете в свои статьи с практическими рекомендациями, встроенные в наши блоки. Плагин всегда находит хотя бы одно релевантное изображение на любой странице для добавления в граф структурированных данных. Таким образом, Yoast SEO сможет правильно описать вашу страницу для поисковых систем.Хотите узнать больше о структурированных данных? Запишитесь на наш бесплатный курс обучения структурированным данным, если вы хотите научиться добавлять структурированные данные на свои страницы!
Карты OpenGraph и Twitter
Ранее мы упоминали об использовании изображений для публикации в социальных сетях. Если вы добавите следующий тег изображения в раздел на своей странице HTML, например:

Это гарантирует, что изображение будет включено в вашу долю на Facebook (например, OpenGraph также используется для Pinterest).
В нашем плагине Yoast SEO есть раздел «Социальные сети», где вы можете установить и — в версии Premium — даже предварительно просмотреть свои сообщения в Facebook и Twitter. Премиум-пользователи также могут использовать интеграцию Zapier для автоматизации публикации в социальных сетях. Убедитесь, что вы используете высококачественное изображение, такое как исходное изображение, которое вы использовали в публикации, поскольку социальные платформы чаще используют изображения более высокого качества / большего размера. Если вы все настроили правильно и изображение не отображается, попробуйте очистить кеш Facebook в отладчике URL.Карты Twitter делают то же самое для Twitter и также создаются нашим плагином.
XML-файлы Sitemap для изображений
Если вы веб-разработчик, вас могут интересовать карты сайта с изображениями XML. Я бы предпочел описать это как изображения в XML-карте сайта . Google ясно об этом:
Кроме того, вы можете использовать расширения изображений Google для карт сайта, чтобы предоставить Google больше информации об изображениях, доступных на ваших страницах. Информация карты сайта с изображениями помогает Google обнаруживать изображения, которые мы иначе не могли бы найти (например, изображения, которые ваш сайт получает с помощью кода JavaScript), и позволяет вам указывать на своем сайте изображения, которые вы хотите, чтобы Google просканировал и проиндексировал.
Время от времени люди спрашивают нас о файлах Sitemap для изображений XML. Мы не создаем их в нашем плагине, но следуем советам Google и включаем их на страницу или публикуем карты сайта. Просто прокрутите вниз карту сайта для публикации, и вы увидите, что мы добавили изображения ко всем нашим последним сообщениям (для этого есть столбец). Добавление изображений в ваши XML-карты сайта помогает Google индексировать ваши изображения, поэтому обязательно сделайте это для лучшего SEO изображений.
Передача образов через образ CDN
Все мы знаем CDN как одну из самых популярных оптимизаций скорости сайта.Некоторые компании, предоставляющие CDN, также имеют специальный CDN для образов. CDN изображений построены вокруг основных задач: оптимизировать ваши изображения и как можно быстрее доставить их вашему посетителю. Запуск CDN образов может во много раз ускорить доставку ваших изображений.
CDN изображений позволяет управлять преобразованием, оптимизацией и доставкой изображений. Вы можете определить, какие нагрузки, когда и как это должно работать. Например, вы можете сказать, что все ваши изображения PNG должны быть преобразованы в webp на лету, потому что они загружаются быстрее всего и обеспечивают наилучшее качество изображения.В CDN образов есть множество опций для точной настройки процесса, но часто есть настройка по умолчанию, которая, вероятно, лучше всего подходит для большинства сайтов.
Существует множество CDN образов на выбор, например Sirv, Cloudinary и Imagekit. Кроме того, такие платформы, как Cloudflare, позволяют вам определять, как изменять размер, форматировать и обслуживать изображения.
Image SEO: резюме
SEO изображений — это сумма нескольких элементов. Поскольку Google с каждым днем все лучше распознает элементы в изображениях, имеет смысл убедиться, что изображение и все его элементы способствуют хорошему пользовательскому опыту, а также SEO.Было бы глупо пытаться обмануть Google.
Помните об этом, добавляя изображение в статью:
Используйте соответствующее изображение, которое соответствует вашему тексту
Выберите хорошее имя файла для вашего изображения
Убедитесь, что размеры изображения соответствуют размеру изображения, как показано
Используйте srcset , если возможно
Уменьшите размер файла для более быстрой загрузки
При необходимости добавьте подпись для облегчения сканирования страницы.
Используйте замещающий текст изображения.Текст заголовка не нужен
Добавьте структурированные данные к изображениям
Добавьте теги OpenGraph и Twitter Card для изображения
Используйте изображения в своих XML-картах сайта
Подача изображений через CDN
Предоставьте весь контекст, который вы можете!
Изображения также могут играть важную роль в конверсии. Так что не стоит недооценивать важность SEO для изображений на вашем сайте!
Читайте дальше: WordPress SEO: полное руководство по повышению рейтинга сайтов WordPress »
Оптимизация изображений для Интернета: пошаговое практическое руководство
Говорят, что картинка стоит тысячи слов, и это одна из причин, по которой изображения так важны в электронной коммерции.Поскольку покупатели не могут взять, потрогать и осмотреть продукт, они в значительной степени полагаются на изображения, чтобы понять цвет, качество и историю продукта.
Само собой разумеется, что ваши изображения должны быть четкими и с высоким разрешением. Но за это приходится платить. Большие изображения высокой четкости могут иметь файлы огромных размеров. Поместите несколько из них на свой сайт, и эта мгновенная навигация по вашему интернет-магазину может в конечном итоге вызвать ощущение плавания через патоку. Это не только приведет к отказу посетителей, но со временем это заметит и Google, и это может повлиять на ваше SEO.
В электронной коммерции очень важно найти хороший баланс между качеством изображения и размером файла изображения при сохранении изображения для своего сайта. В этой статье мы покажем вам, как это сделать.
Если вам приходилось делать фото продукта и загружать его прямо в свой магазин, это руководство для вас. Если у вас нет формальных знаний или процесса для сохранения изображений с учетом размера файла, это руководство для вас. Если на вашем сайте много изображений, и работа кажется вялой, это руководство для вас.Если вы еще не начали создавать свой интернет-магазин, это руководство специально для вас.
Готовы оптимизировать изображения?
Параметры типа файла изображения
Есть три основных типа файлов, на которых мы хотим сосредоточиться для сохранения изображений, оптимизированных для Интернета: GIF, JPG и PNG. У каждого типа файла есть свои сильные и слабые стороны, и очень важно знать и учитывать их при сохранении изображения.
Работа с JPG
JPG (также известный как JPEG) — самый популярный тип файлов для изображений в Интернете.JPG идеально подходят для фотографий или сложных изображений, содержащих много цветов, теней, градиентов или сложных узоров. JPG хорошо справляются с изображениями такого типа, потому что JPG имеют огромную цветовую палитру, с которой можно работать.
JPG также могут быть сохранены в высоком качестве, низком качестве или где-то посередине. Это позволяет настраивать и сохранять изображение именно так, как вы хотите, балансируя качество и размер файла.
Пример использования для предпринимателей в области электронной коммерции: JPEG-файлы являются наиболее популярным форматом файлов в Интернете и обычно используются для изображений продуктов, фотографий и баннеров / изображений главной страницы.
Работа с PNG
PNG — еще один популярный формат файлов в Интернете. В Adobe Photoshop у вас будет возможность сохранять PNG как PNG-8 или PNG-24.
PNG-8 имеет очень ограниченную цветовую палитру из 256 цветов. Хотя размер изображения меньше, это не лучший вариант для сложных изображений и фотографий.
PNG-24 обеспечивает гораздо более высокое качество изображения, но за счет большего размера файла.
Самое главное, PNG могут обрабатывать прозрачность.Это одно из самых больших различий между PNG и JPEG.
Пример использования для предпринимателей электронной коммерции: PNG обычно используются для логотипов, потому что они высокого качества и могут обеспечивать прозрачность. Это хорошо работает для логотипов, потому что логотипы почти всегда требуют прозрачности, вы, вероятно, хотите, чтобы она была высокого качества, и поскольку логотипы являются небольшой частью вашего сайта в целом, поэтому размер файла по-прежнему невелик.
Работа с GIF GIF-файлы
были более популярны много лет назад, но все еще остаются вариантом для изображений небольшого размера, когда требуется всего несколько цветов.Как и в случае с PNG-8, файлы GIF могут содержать только 256 цветов. По этой причине нельзя использовать GIF-файлы для фотографий товаров.
Пример использования для предпринимателей электронной коммерции: GIF-файлов можно использовать для логотипов, но из-за их ограниченного количества цветов они не так популярны в большинстве случаев использования в электронной коммерции.
Правильное сохранение изображений
Как и следовало ожидать, загрузка больших изображений занимает больше времени. Когда мы говорим «большой», мы имеем в виду размер файла, а не размеры изображения, т.е.е. значение в КБ, МБ, ГБ и т. д. Поскольку 47% пользователей ожидают, что веб-страница загрузится менее чем за 2 секунды, а 40% покинут страницу, загрузка которой занимает более 3 секунд, важно, чтобы ваши изображения были достаточно маленькими. для обеспечения быстрого сайта.
Есть три вещи, которые вы можете сделать, чтобы правильно оптимизировать изображения для своего интернет-магазина:
Сохраните правильные размеры
Вы должны открыть изображение в Photoshop и просмотреть его на 100%. Это позволяет просматривать изображение с точным размером, который будет отображаться на мониторе компьютера при сохранении изображения для Интернета.
Сохранить изображения для Интернета
Можно уменьшить размер файла без значительного снижения качества изображений. Наш любимый метод уменьшения размера файла без значительного снижения качества изображения — это использование функции Photoshop «Сохранить для Интернета». Откройте изображение в Photoshop и выберите «Файл»> «Экспорт»> «Сохранить для Интернета (устаревшая версия)…». Появится окно, в котором вы сможете выбрать качество экспорта. Мы обнаружили, что качество 60 работает лучше всего, потому что при этом размер файла уменьшается до менее мегабайта, и нет заметной разницы в качестве.
Сжать изображения для Интернета

Приложения для сжатия изображений — это самый простой способ уменьшить размер файлов изображений. Эти типы инструментов удаляют скрытые данные в файле изображения, такие как дополнительные цветовые профили и метаданные (например, геолокацию того места, где была сделана фотография), которые не нужны. Эти инструменты предоставляют быстрый и простой способ уменьшить размер файлов без потери качества изображения.
Приложения и службы сжатия изображений
Сохранение изображения для Интернета: обзорный пример
Для начала давайте представим, что мы Stiff Salt (на самом деле принадлежит другу и разработчику Shopify), и мы хотели изменить изображение функции в нашем интернет-магазине.
Мы настраиваем сцену, заставляем нашу соль выглядеть совершенно невероятно и делаем снимок с помощью цифровой зеркальной камеры. Отлично, у нас есть фото. Что за красота!
Но… размер файла ОГРОМНЫЙ! 14,6 МБ, если быть точным. А размеры фото — 5184 × 3456 пикселей. Сейчас это совершенно непригодно для использования. Буквально он достаточно большой, чтобы напечатать плакат размером с фильм. При размере 14,6 МБ загрузка этого изображения на компьютер посетителя займет много времени. Это нехорошо.
Пора приступить к работе и значительно уменьшить размер изображения и размер файла.
Помните, мы собираемся сделать три вещи с изображением.
Уменьшить размер изображения: Это размеры фотографии
Правильное сохранение изображения для уменьшения размера файла: Это размер файла и сколько места он занимает на жестком диске вашего компьютера и / или на вашем веб-сервере.
Сжать файл изображения: Чтобы избавиться от дополнительных скрытых данных, занимающих место
Уменьшить размер изображения
В зависимости от того, какую программу вы решите использовать, и личных предпочтений, вы можете:
Уменьшите размер изображения перед сохранением
Уменьшить размер изображения при сохранении изображения
Сохраните изображение, затем уменьшите его размер
Для простоты сначала уменьшим размер изображения.Для этого мы собираемся открыть изображение в Photoshop (вы можете использовать любую программу обработки изображений, которая вам удобнее).
Чтобы выяснить, какой размер, мы рассмотрели рекомендуемый размер изображения для главной страницы темы. Это было 1600 x 800 пикселей (помните, что оригинал был 5184 x 3456 пикселей).
В Photoshop выберите «Изображение»> «Размер изображения».
Хорошо, мы уменьшили размер (размеры) изображения до более подходящего и рекомендованного разработчиком темы.
Правильное сохранение изображения (Сохранить для Интернета)
В Photoshop есть специальная команда под названием «Сохранить для Интернета», которая оптимизирует файл изображения для отображения в Интернете. Это важно, поскольку обычная команда «Сохранить» может привести к созданию файлов размером в 2-3 раза больше, чем команда «Сохранить для Интернета».
В поле «Сохранить для Интернета» нам нужно сделать несколько вариантов.
Тип изображения: Тип файла влияет на качество и размер выходного файла
Качество изображения: Это важно и может сильно повлиять на окончательный размер файла
Размеры: Мы уже сделали это на первом этапе, поэтому нет необходимости делать это снова, но если бы мы не сделали этого на первом этапе, мы могли бы просто изменить размеры изображения здесь
Основываясь на том, что мы узнали в начале этого поста, мы знаем, что JPEG — лучший тип файла для фотографий или любого изображения с большим количеством цветов и сложностью.Выберем JPEG.
Для качества изображения у вас есть шкала, которую вы можете выбрать из 5 предустановок в диапазоне от максимального до низкого. Давайте посмотрим на окончательный размер выходного файла для каждого из уровней качества (эта информация отображается в нижнем углу окна сохранения изображения):
Максимум: 1,38 МБ
Очень высокий: 611 КБ
Высокий: 339 КБ
Средний: 152 КБ
Низкий: 86k
Как видите, с каждым понижением уровня качества размер изображения уменьшается почти вдвое.В целом, мы обнаружили, что для большинства изображений лучше всего подходит высокий уровень. На этом уровне человеческий глаз практически не может увидеть ухудшение качества изображения, а размер файла почти в 4 раза меньше, чем если бы мы просто выбрали максимум.
Если изображение является чрезвычайно важным изображением с большим количеством деталей, вы можете выбрать более высокий уровень и сохранить на Очень высоком.
По сути, сохранение для Интернета — это балансирующее действие: вы должны сбалансировать качество графики и размер файла мультимедиа в соответствии с вашими личными потребностями.
СОВЕТ ПРОФЕССИОНАЛА: Как правило, мы хотим, чтобы фотографии наших продуктов были не более 80–150 КБ, а для больших изображений главной страницы — не более 250–350 КБ. Это хорошие контрольные цифры, к которым вы тоже должны стремиться.
Сжать изображения для Интернета

Если вы использовали Adobe Photoshop, он уже проделал действительно большую работу по уменьшению размера изображения, однако вы все равно можете сократить еще 5-10% размера изображения с помощью приложения для сжатия, такого как ImageOptim и / или ShortPixel.
ImageOptim — это также самый простой способ быстро уменьшить размер файла изображения, если вы использовали другую программу для сохранения изображений, которая уступает по качеству Photoshop.
Перетащив каждый файл из предыдущего шага в ImageOptim, мы смогли еще больше уменьшить размер изображения еще на 5%. Небольшие, но опять же, они уже были оптимизированы с помощью Photoshop. В любом случае, каждый килобайт на счету.
Заключение
Напомним, наша фотография была безумно огромной, когда мы начинали, однако с помощью нескольких простых шагов мы уменьшили размер фотографии с 5184 × 3456 до 1600 x 800, чтобы она идеально подходила для нашей домашней страницы и, в то же время, взял с компа-грохот 14.4 МБ, до гораздо более разумных 336 КБ.
Сохранение изображений для Интернета — важный шаг, который нужно выучить на ранней стадии и неукоснительно применять. Даже если вы сэкономите только 10-20% на каждом изображении, со временем, по мере роста вашего магазина и веб-сайта, каждый маленький КБ может дать значительную экономию, которая приведет к гораздо более приятным впечатлениям в целом для ваших посетителей, клиентов и Google.