Как сделать на сайте фон картинкой html: Как сделать фон в html: порядок действий

Содержание

Руководство по оптимизации изображений и видео для вашего веб-сайта

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

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

Обзор оптимизации изображений

Ниже приведены общие шаги по оптимизации изображений:

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

Поиск размеров изображения

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

Расширение для браузера

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

Если вы немного знаете HTML

В Chrome щелкните правой кнопкой мыши изображение, которое хотите заменить, и выберите «Проверить».
Наведите указатель мыши на код в Инспекторе элементов, и вы увидите, как появятся размеры изображения. Возможно, вам потребуется перейти к тегу или просмотреть панели «Стили/Вычисляемые», чтобы увидеть фоновое изображение и т. д.

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

Если вы не знаете HTML

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

Общие сведения о типах файлов

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

Неподвижные изображения

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

Анимация/Видео

GIF – формат сжатого изображения с прозрачностью. Обычно используется для небольших вещей, таких как значки и анимация (анимированные GIF-файлы*).
MP4 — широко используемый формат видео. Хотя это сжатый формат, он часто создает файлы огромных размеров. Этот сайт отлично подходит для сжатия видео с сохранением качества: https://www.videosmaller.com/

*Примечание об анимированных GIF-файлах: этот формат файлов часто не нужен на веб-сайтах, потому что встроенные MP4 теперь широко поддерживаются и заменяют его. Встроенные файлы mp4 могут обеспечить гораздо более высокое качество при гораздо меньшем размере файла, чем GIF. Спросите вашего разработчика для получения дополнительной информации!

Иллюстрации/Графика

SVG – масштабируемая векторная графика. Используется для логотипов, иллюстраций и всего остального, созданного с помощью векторной графики. В общем, SVG предпочтительнее, потому что они масштабируются, что делает их естественными для всех размеров экрана, чтобы они всегда выглядели четкими.
PNG — часто используется для таких вещей, как логотипы и графика, поскольку они часто прозрачны — это просто другой способ разместить их в Интернете. Поскольку PNG не масштабируются, они могут выглядеть не так четко, как SVG.
GIF — иногда используется для очень мелкой графики, такой как фавиконы (крошечный значок на вкладке браузера), где ограничение количества цветов, сохраняемых в графике, может помочь уменьшить размер файла, сохраняя при этом великолепный внешний вид.

Как сжимать изображения

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

Для форматов JPG, PNG, GIF

В Photoshop/Illustrator/XD сохраните для Интернета с качеством около 60-85%. Это имеет тенденцию давать хороший баланс качества со сжатием.

Для мобильных устройств экспортируйте в 2 раза (увеличьте размеры в два раза) для мобильных устройств, чтобы также охватить более крупные места размещения изображений на планшетах. Такие программы, как Adobe XD, предназначенные для разработки веб-сайтов, предоставляют вам эту опцию из коробки, но вам нужно будет рассчитать ее самостоятельно в других программах, таких как Photoshop или Illustrator. Просто убедитесь, что вы не увеличиваете размер изображений, которые были созданы в меньших размерах.

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

Для файлов MP4

Загрузите видео высокого качества на videosmaller.com. Хотите верьте, хотите нет, но мы обнаружили, что этот инструмент обеспечивает лучшее качество сжатия и меньший размер файлов, чем Adobe Media Encoder или другие инструменты. Это также может помочь вам уменьшить размеры вашего видео, если это необходимо.

Для SVG

Как правило, нет необходимости сжимать SVG. По своей масштабируемости это уже очень маленький формат файла.