Как на фон сайта поставить картинку html: Как добавить фоновый рисунок на веб-страницу?

Содержание

4 способа справиться с отсутствующими изображениями на веб-сайте (руководство для начинающих)

Контент Themeisle бесплатный. Когда вы покупаете по реферальным ссылкам на нашем сайте, мы получаем комиссию. Узнать больше

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

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

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

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

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

Как выглядят отсутствующие изображения в веб-браузерах

Пример отсутствующего изображения в Chrome ( справа )

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

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

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

Четыре способа улучшить работу с отсутствующими изображениями на вашем веб-сайте

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

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

1. Использовать атрибуты

alt и title в теге

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

Замещающий текст изображения имеет две основные функции:

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

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

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

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

2. Использовать атрибут

onerror в теге

Помимо добавления текста, еще одна вещь, которую вы, возможно, захотите сделать, это показать изображение-заполнитель на случай, если изображение пропадет. Для этого вы можете использовать однострочное решение, которое вы можете реализовать в HTML для своего изображения с атрибутом onerror .

  jpg"
   onerror="this.onerror=null;this.src='default-image.jpg';"
>
 

В случае, если исходное изображение недоступно и вызывает ошибку, код в пределах onerror 9Атрибут 0042 изменяет тег src изображения с расположением изображения по умолчанию.

Этот метод работает только для обычных изображений в вашем контенте и будет работать

, а не для фоновых изображений.

Если вы используете WordPress, вам нужно вручную добавить атрибут onerror , используя функцию редактирования кода редактора WordPress:

  • Классический редактор – используйте вкладку Текст .
  • Блочный редактор (он же Гутенберг) — используйте раскрывающийся список в правом верхнем углу, чтобы получить доступ к редактору кода .

Чтобы использовать этот код, замените default-image.jpg ссылкой на фактическое изображение, которое вы хотите использовать ( например, изображение-заполнитель по умолчанию ).

3. Воспользуйтесь сторонним сервисом

Некоторые службы оптимизации изображений имеют возможность использовать изображение по умолчанию, если изображение отсутствует.

Например, в ImageKit есть простое решение для обслуживания изображений по умолчанию, если исходное изображение не существует. Это работает так же, как onerror метод атрибута сверху.

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

Однако, в отличие от атрибута onerror , вы добавите параметр di- непосредственно к изображению src="" . Вот как это выглядит:

 

 

Как и атрибут onerror , этот атрибут , а не будет работать для фоновых изображений.

Служба стороннего поставщика также может помочь вам предотвратить отсутствие изображений, в первую очередь помогая вам доставлять изображения более надежно. Например, плагин оптимизации изображений Optimole WordPress предоставляет изображения через собственную сеть доставки контента (CDN), которая может быть более надежной, чем ваш хостинг-сервер.

4. Отправьте изображение по умолчанию через ваш сервер для отсутствующих изображений

Давайте теперь рассмотрим решение, которое потенциально может заменить любое изображение изображением по умолчанию, используя файл .htaccess вашего сайта.

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

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

По сути, вам нужно:

  • Создайте файл
    . htaccess
    в корневом каталоге вашего веб-сервера, если он еще не существует.
  • Проверка запросов изображений, которые обычно заканчиваются расширением файла изображения (при необходимости вы можете добавить дополнительные расширения).
  • Подавать изображение по умолчанию, если запрошенный файл не существует.

⚠️ Всякий раз, когда вы редактируете файл htaccess своего сайта, вы всегда должны сначала сделать резервную копию.

Вот пример фрагмента кода, который вам нужно добавить в свой Файл .htaccess . Замените /default-image.jpg фактическим URL-адресом изображения-заполнителя, которое вы хотите использовать:

.
 RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC]
RewriteRule .* /default-image.jpg [L]
 

Если вы не знаете, как отредактировать файл

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

Заключительные мысли

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

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

Затем вы также можете рассмотреть возможность использования атрибута onerror для указания резервного образа. Некоторые сторонние службы оптимизации изображений, такие как ImageKit, также позволяют указать резервное изображение аналогичным образом.

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

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

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

У вас есть другие вопросы о том, как исправить отсутствующие изображения на вашем сайте? Дайте нам знать в комментариях, и мы постараемся помочь!

Бесплатная направляющая

5 основных советов по ускорению


вашего сайта WordPress
Сократите время загрузки даже на 50-80%

просто следуя простым советам.

Лучший размер изображения для веб-сайтов 2021 | Полное руководство

Содержание

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

Какой размер изображений лучше всего подходит для веб-сайтов?

Размер ваших изображений зависит от того, где вы хотите разместить их на своем веб-сайте. Оптимальный размер файла для изображений на веб-сайте — не более 200 КБ, а для полноэкранных фоновых изображений — от 1500 до 2500 пикселей в ширину, а для большинства других изображений максимальная ширина — 800 пикселей. Хранение изображений между этими периметрами обеспечит их правильную загрузку на компьютерах и экранах мобильных устройств.

 

Оптимальный размер изображения заголовка

Оптимальный размер изображения для шапки веб-сайта — 1024 пикселя в ширину. Большинство веб-сайтов имеют разрешение 1024 x 768 пикселей. Таким образом, изображение заголовка размером 1024 пикселя будет хорошо отображаться в верхней части вашего веб-сайта, не замедляя скорость вашей веб-страницы.

 

Оптимальный размер фонового изображения

Для фоновых изображений оптимальным размером является 1920 пикселей в ширину и 1080 пикселей в высоту. Это идеальное соотношение 16:9 заполнит всю поверхность веб-страницы без ущерба для качества изображения. С точки зрения пикселей на дюйм (ppi), изображение должно быть не менее 72. Но старайтесь, чтобы размер файла был как можно меньше, иначе это может замедлить время загрузки вашего сайта.

 

Лучший размер изображения логотипа

Оптимальный размер изображения логотипа для веб-сайтов обычно составляет 250 пикселей в ширину и 100 пикселей в высоту и не более 320 пикселей в ширину и 70–100 пикселей в высоту. Но если на вашем сайте есть вариант логотипа «retina», то эти размеры должны быть удвоены. В целом, поскольку мобильные устройства имеют ширину от 320 до 500 пикселей, размер изображения логотипа для мобильных веб-сайтов должен находиться в пределах этого диапазона, чтобы обеспечить его отображение на экране.

 

Какой формат изображений лучше всего подходит для Интернета?

Золотым правилом для типов файлов изображений являются форматы файлов JPG для фотографий и файлы PNG или SVG для логотипов и иллюстраций. Это гарантирует, что ваши изображения будут загружаться правильно и не замедлят скорость загрузки вашей страницы. Если вы работаете с веб-сайтом на WordPress, важно знать, что WordPress не поддерживает типы файлов SVG. Вот почему мы рекомендуем плагин под названием SVG Support для клиентов, которым он нужен.

 

PNG и JPG для Интернета — в чем разница?

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

 

Как ускорить загрузку фотографий на веб-сайтах

Перед загрузкой изображений на веб-сайт убедитесь, что они изменены до нужного размера. Еще один способ ускорить загрузку изображений и не замедлить скорость страницы — сжать их до меньшего размера. Существуют бесплатные инструменты сжатия изображений, такие как Optimazilla или TinyJPG, которые помогут оптимизировать ваши изображения.

 

Почему скорость загрузки так важна?

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *