Содержание

Изображения | Марафон HTML+CSS

Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание документа. Тег <img> предназначен для разметки изображений в различных графических форматах.

  • src="путь" — обязательный атрибут, указывает адрес изображения. Путь к картинке может быть абсолютным, или относительным.
  • alt="описание" — обязательный атрибут, альтернативное описание.
  • width="значение" и height="значение" — задают размеры изображения в пикселях. Без задания размеров, изображение отображается на странице в оригинальном размере. Если задать только одну величину, браузер автоматически вычислит другую для сохранения пропорций.

Атрибут

alt#

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

<img>.

  • В описании должно быть законченное, полносью сформированное предложение.
  • Альтернативный текст должен отвечать на вопрос «Что изображено на картинке?».
  • Описание должно быть уникальным и не повторять то, что уже есть в тексте к этому изображению.
  • В описании не нужно использовать слова «изображение», «картинка» или «илюстрация», это само собой понятно.

Если в тексте страницы описывается история этих котят, достаточно будет следующего описания.

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

Изображение-ссылка#

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

Для создания изображения-ссылки оборачиваем тег <img> в ссылку.

Изображение с подписью#

Такая задача часто встречается в статьях, где много изображений с пояснением под или над картинкой, например иллюстрации, графики или диаграммы. Если необходимо разметить изображение с подписью, можно использовать теги <img> и абзац <p>. Но, именно для таких задач, есть семантические теги

<figure> и <figcaption>.

Внутрь <figure> помещаем разметку изображения и описания. Тег <figcaption> обязательно должен быть первым или последним ребёнком <figure>.

Абсолютные и относительные пути#

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

Абсолютный путь#

Указывает точное местоположение файла в структуре папок на сервере.

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

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

  • https:// — протокол.
  • images.pexels.com — имя сервера.
  • /photos/583842/pexels-photo-583842.jpeg — путь к файлу изображения, где «photos» и «583842» имена папок. Папка «583842» вложена в «photos».
Интересно

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

Относительный путь#

Описывает путь к ресурсу относительно текущего файла. Используется для составления путей к изображениям, файлам стилей или создания навигации на другие страницы сайта который вы создаёте.

Возьмём стандартную структуру файлов и папок проекта.

Для того чтобы в index.html достучаться до изображения логотипа из папки images, в атрибуте src нужно указать относительный путь, то есть относительно HTML-документа.

Символ / обозначает переход на один уровень ниже. Такой путь браузер буквально понимает как: «В папке images

, на одном уровне с текущим файлом index.html, взять файл logo.png».

В будущем необходимо будет подключать изображения в файле стилей. Для того чтобы в файле styles.css достучаться до изображения логотипа из папки images, необходимо указать относительный путь (относительно файла-стилей).

Последовательность символов ../ обозначает переход на одну папку (уровень) выше. Такой путь браузер буквально понимает как: «Перейти на одну папку выше (назад), зайти в папку images и взять в ней файл logo.png».

Графические форматы#

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

Растровая графика#

Растровая графика (raster, bitmap) — описание графического файла в виде массива с координатами каждого пикселя и описанием цвета этого пикселя. Как карта цветов с фиксированным размером.

Самые популярные растровые форматы изображений:

  • JPEG — большие файлы не требующие прозрачного фона или анимации. Этот формат идеален для красочных фотореалистичных фотографий, так как они могут содержать миллионы цветов.
  • PNG — в отличие от JPEG, имеет дополнительный параметр для описания прозрачности (альфа канал). Подходит для изображений, фон которых должен быть прозрачный или одноцветный. Используется для иконок и декоративных элементов. Также используется для изображений повышенной точности — скриншотов, чертежей, графиков и т. п.
  • webP — формат заменяющий PNG и JPEG, но еще с неполной поддержкой в браузерах. При равном качестве изображения, сжатые файлы будут меньше PNG и JPEG в среднем на 25%.
Полезно

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

Векторная графика#

Векторная графика (SVG, Scalable Vector Graphics) — описывается в виде правил или уравнений, определяющих линии, а также дополнительные свойства, цвет линий и фон для фигур.

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

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

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

  • Squoosh для оптимизации растровой графики
  • SVGOMG для оптимизации векторной графики

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

Внимание

Оптимизация изображения делается один раз. Экспортированное из макета изображение оптимизируется и только после этого добавляется в проект.

Прогрессивный JPEG#

Прогрессивные JPEG-изображения — это файлы изображений в формате JPEG, которые были закодированы таким образом, что при отображении они загружаются слоями. Прогрессивный JPEG выглядит точно так же, как и обычные JPEG-изображения. Разница в том, как они отображаются во время загрузки.

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

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

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

Создание#

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

Интересно

Вес файла прогрессивного JPEG-изображения обычно немного меньше его базового JPEG-аналога.

Как оптимизировать картинки на сайте для мобильных

47887

How-to – Читать 8 минут

Прочитать позже

АУДИТ САЙТА — СКОРОСТЬ ЗАГРУЗКИ

Инструкцию одобрил
Руководитель SEO отдела в Mnogoland

Юрий Горбатый

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

Содержание

  1. Что дает сжатие картинок для мобильных устройств
  2. Как проверить скорость загрузки страницы на мобильных устройствах
  3. Как уменьшить картинки для мобильных устройств
  4. Что такое адаптивный дизайн RWD

Заключение

Что дает сжатие картинок для мобильных устройств

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

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

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

Как проверить скорость загрузки страницы на мобильных устройствах

Наиболее простой метод — использовать инструмент PageSpeed Insights, разработку от Google. Во вкладке «Мобильные устройства» отображается полноценная информация о скорости загрузки и распределении веса страницы. К тому же сервис указывает, как должна проводиться оптимизация изображений для мобильных устройств на конкретном сайте:

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

Найти проблемы со скоростью загрузки для мобильных можно с помощью Аудита сайта Serpstat. Модуль покажет проблемные места и даст рекомендации по устранению неполадок.

Как уменьшить картинки для мобильных устройств

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

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

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

Какие форматы изображений используют на сайтах

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

На разных площадках можно встретить стандартные форматы картинок:

  • JPEG — фотографии, изображения с плавными переходами цветов;
  • GIF — простые логотипы, знаки, графики, диаграммы и анимации;
  • PNG — знаки, логотипы и графики с большим количеством оттенков;
  • SVG — индивидуальные разработки логотипов и картинок в векторном виде.

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

Способы сокращения веса изображений

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

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

Также можно задать размер картинки в HTML с помощью запроса:

В зависимости от ширины экрана или монитора выполняется вставка HTML картинки с размерами, указанными в коде. Так будет происходить при добавлении каждой картинки на сайт. Альтернативный вариант кода для сайтов с установленными последними версиями CSS:

Но что делать, если все картинки уже загружены, и все переделать вручную физически сложно? Используйте скрипты в таком порядке:

  • сначала необходимо собрать все стили:
  • уменьшить изображения с указанием желаемого размера:
  • сжать и переместить картинки в другую директорию:

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

Для формата JPEG:

  • JpegTran избавляет от метаданных;
  • ImageMagic задает параметр качества для сжатия.

Для формата PNG:

  • PngQuant сжимает картинку через уменьшение количества оттенков. В результате немного ухудшается ее качество;
  • PngCrush сжимает картинку и не влияет на ее качество.

Активировать разработку Google — модуль PageSpeed, который подходит для серверов Apache и Nginx и обладает набором функций для оптимизации картинок. Нужно установить и активировать модуль через команду:

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

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

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

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

Что такое адаптивный дизайн RWD

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

RWD избавляет от потребности в создании нескольких версий сайта. По факту адаптивный дизайн полезен только при использовании современных устройств с высоким уровнем производительности.

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

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

Заключение


Оптимизация изображений для мобильных устройств подразумевает:

  • уменьшение формата;
  • сжатие размера;
  • кэширование;
  • объединение иконок в CSS-спрайты.

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

Для автоматического сжатия картинок используйте онлайн-сервисы и серверные команды. Также можно использовать эффект постепенной загрузки Lazy Load: текст отображается сразу, а картинки подгружаются по мере прокрутки страницы.

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

Запустить аудит сайта

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами 😉

Оцените статью по 5-бальной шкале

3.52 из 5 на основе 24 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Рекомендуемые статьи

How-to

Анастасия Сотула

Как распределить семантическое ядро по страницам сайта

How-to

Анастасия Сотула

Как настроить подписку на обновления сайта

How-to

Denys Kondak

Как проверить отображение сайта во всех браузерах

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

Поделитесь статьей с вашими друзьями

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

Видео курс HTML и CSS. Работа с изображениями

Здравствуйте, уважаемые слушатели. Меня зовут Александр Петрик. Я сотрудник компании CyberBionicSystematics. И мы с вами продолжаем цикл лекций по языку HTML.

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

Язык HTML мы рассматриваем в контексте его тегов. Сейчас мы посмотрим на такой тег, как <img>. Данный тег предназначен для вставки изображений в разметку. Тег не имеет текстового содержимого и, соответственно, не имеет закрывающегося тега.

Посмотрим на следующие атрибуты тега. Атрибут Src. Это источник, откуда будет подгружаться наше изображение.

Следующий атрибут – это атрибут Alt. Он указывает альтернативный текст. Т.е. если наше изображение не будет отображаться, то будет отображаться данный альтернативный текст вместо него.

Атрибут Title. Задает всплывающую подсказку. При наведении курсора на наше изображение, будет появляться всплывающее окошко с подсказкой.

Следующие два атрибута – Width и height. Ими можно задать ширину и высоту изображения.

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

Атрибут Src указывает источник, откуда будет подгружаться изображение. Форматы могут быть разными.

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

Формат png характеризуется очень высокое качество. Из недостатков – большой размер.

Формат gif. Он способен хранить сжатые данные без потери качества.

Посмотрим на атрибуты подсказки — Alt и Title. Вот приведена строка с тегом img. После атрибута alt ставим =, кавычки, а в кавычках текст. Если картинка не будет отображаться, вместо нее в нашем случае будет отображен текст deleted. Атрибут title. Мы ему присваиваем значение self-portrait. Это значит, что когда мы наведем курсор на наше изображение, будет отображаться фраза self-portrait. Рекомендуется использовать всегда оба выше сказанные атрибуты. Это удобно для пользователей, а также для поисковых систем.

Посмотрим на примеры. Первый пример показывает использование img. Здесь использованы атрибуты src, alt title. Запустим и посмотрим, что выйдет. В окне мы видим слово deleted. Это потому, что я убрал 4 из названия рисунка и браузер не находит измененного названия в указанной папке источника изображения.

Следующий пример показывает нам различное использования атрибута src. В первой строке у нас используется изображение из папки, во второй – изображение из ресурса сети. Запустим. Видите, у нас тут еще появилась анимация. Это потому, что в третьей строке мы используем картинку в формате .gif.

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

Запустим. А теперь попробуем запустить другой браузер. Теперь у нас здесь появилась надпись. Давайте попробуем написать delete. Запустим и посмотрим. Да, у нас вывелась запись delete. Попробуем запустить этот код в браузере FireFox. Запустим, теперь у нас показывает delete без обрамляющего прямоугольника. Что показывает этот пример? Что один и тот же тег по-разному работает в разных браузерах.

Посмотрим на то, как можно изменить размер изображения. Для этого существуют два атрибута – width и hight.

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

Запустим. Размеры разные.

Посмотрим на атрибут align. Посмотрим, как с его помощью можно выравнивать изображения. Bottom – выравнивание по нижней границе, middle – по середине, top – по верхнему краю.

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

Посмотрим следующий пример. В 16й строке у нас атрибуту align присвоено значение left, а в 30й – right. Посмотрим, что у нас получилось. Как видим, наши рисунки выровнены по краям и обтекаются текстом.

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

Посмотрим теперь, как задать фон для нашей страницы. Для этого используется атрибут bgcolor. Следующий метод – это использование атрибута style и его свойства background-color.

Третий вариант – использование свойства background-image в атрибуте style. Здесь мы обязательно указываем url и в скобках имя нашего изображения.

Поговорим о свойстве background-repeat. У этого свойства есть 3 параметра: no-repeat – наше изображение будет вставлено один раз вверху страницы; repeat-x – рисунок будет повторен определенное количество раз до конца строки по оси х; repeat-y – по оси ординат.

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

В данном примере задаем синий цвет фона.

Смотрим дальше. Тут мы использует атрибут style и присваиваем bgcolor = “Blue”, background-color = “Yellow”. Запустим и видим, что background-color является приоритетной.

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

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

Посмотрим на 4й пример. Мы можем использовать не только стили для фона, а и атрибут background. В данном случае мы используем его вместе с background-repeat, так как не хотим, чтобы наш фон повторялся.

Запустим пример и посмотрим.

Посмотрим дальше. Здесь мы используем свойство repeat-x.

Посмотрим следующий пример, где указываем свойство repeat-у.

Посмотрим еще пример. Он очень важный. В 14 строке тегу body мы присваиваем атрибут style. Здесь мы используем свойство contain. Запустим и посмотрим, что выйдет. Здесь мы видим, что браузер как-бы взял и растянул его по направлению сверху-вниз, а ширину он не трогал.

Теперь 14 строку мы закомментируем, а 13ю розкомментируем и посмотрим, как работает параметр cover.

Давайте посмотрим. Ctrl+F5. Вот, обратите внимание, наш рисунок полностью был помещен в окно браузера. Он растягивает наш рисунок во всех направлениях.

Посмотрим последний наш пример. Мы видим, что логотип был размещен в качестве фона, но с поправкой количества пикселей.

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

Рассмотрим основные шаги при создании карты изображения. Для начала нужно пометить изображение атрибутом usemap, далее создать тег <map> </map>. Следует также указать тег <area />. Если мы создаем карту Украины, то в данном теге мы прописываем области нашей страны. Shape задает границы области. Особенности задания координат области посмотрим на примере. Alt и title имеют одни и те же функции, только alt используется в более старых браузерах.

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

Посмотрим теперь на примерах использование карт. Здесь мы используем такой тег, как map. В нем мы задаем два таких атрибута как name и id. В 26й строке мы создаем области. Первая область будет ссылаться на саму себя. Указываем координаты и альтернативный текст. На 27й строке мы используем такую фигуру, как прямоугольник. Запустим. Наводим мышкой, появляется всплывающая подсказка.

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

Глянем еще раз на наш код.

Давайте посмотрим на следующий пример. Здесь показано, как мы можем использовать другие фигуры для отображения карт. На 16 строке мы также никуда не будем переходить. На 17 строке все то же самое, но мы задаем область круглую, на 18й – многоугольник.

Посмотрим на дизайн нашей страницы. Поиграемся с радиусом и сторонами многоугольника.

Последний пример. Рассмотрим применение навыков создания карт на практике. Вот эта область – деревья, вот дорога и вот лужайка. Рассмотрим построчно, что у нас здесь есть. Здесь мы задаем цвет нашего фона. Здесь выравнивание нашего текста по центру. На 11 й строке указываем ширину рисунка и указываем, что рисунок будет картой изображения.

На 15й строке начинаем создавать области. Первая – прямоугольная. Следующая – тоже прямоугольная. Далее. У нас круглая область. Вот она. Следующая – многоугольник. Деревья – тоже многоугольник. Последняя область – газон. Так выделяются области. Каждой из областей мы можем задать какую-то ссылку. На этом урок закончен. Всего доброго. До свиданья.

Лучшие практики и код HTML в одном полезном руководстве »

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

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

Содержание

  • 1 История тега img
  • 2 Пять советов по использованию изображений в Интернете
    • 2.1 Используйте только те изображения, на использование которых у вас есть право
    • 2.2 Обеспечьте доступность вашего контента и веб-сайта
    • Альтернатива 2. Текст
    • 2.4 Знайте, когда использовать свойство CSS Background-Image
    • 2.5 Оптимизация изображений для Интернета
  • 3 Два других способа добавления изображений на веб-страницу
    • 3.1 Элемент изображения
    • 3.2 Рисунок Элемент
  • 4 Заключение
  • 5 Связанные элементы
  • 6 Учебные пособия и ресурсы

ИСТОРИЯ

IMG TAG

До 1993 года. Интернет не был очень полезным местом для изображений. Но в 1993 году был предложен тег img , и был запущен Mosaic, первый браузер, отображающий изображения в тексте. До Mosaic и тега img изображения загружались в отдельном окне или загружались и открывались с помощью программы просмотра изображений. Однако с Mosaic и img , добавленный в HTML, в середине 1990-х годов наблюдался быстрый рост популярности Интернета. Хотя массовый рост Интернета в начале 1990-х нельзя полностью объяснить улучшенной поддержкой изображений, это был один из немногих факторов, которые ознаменовали переход Интернета из сети для исследователей в коммуникационную платформу для масс.

Пять советов по использованию изображений в Интернете

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

Используйте только изображения, на использование которых у вас есть право

Вы когда-нибудь слышали, чтобы кто-то говорил это раньше?

«Знаете ли вы, что можете использовать поиск изображений Google, чтобы найти любое изображение, которое вы хотите?»

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

Обеспечьте доступность вашего контента и веб-сайта

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

Всегда предоставляйте альтернативный текст

Как мы только что упоминали, альтернативный текст — это то, на что полагаются посетители веб-сайта, если они не видят ваше изображение. Однако использование 9Текст 0043 alt выходит за рамки простого добавления краткого описания к вашим изображениям. Знаете ли вы, что иногда вам следует использовать атрибут alt , но оставить его пустым? Это так! Если на вашем сайте есть изображение, которое имеет исключительно эстетический характер и не добавляет значимого контента на сайт, используйте пустой атрибут alt="" , чтобы браузеры, работающие только с текстом, и программы чтения с экрана знали, что его нужно полностью пропустить. Атрибут alt следует использовать для каждого отдельного изображения 9.0044 на вашем сайте. Чтобы узнать больше об этой теме, прочитайте нашу статью о правилах alt .

Знайте, когда использовать свойство CSS Background-Image

Существует два способа добавления изображений на веб-страницу.

  • С HTML-элементом img .
  • Со свойством CSS background-image .

Когда следует использовать каждый из них? Используйте img , когда изображение является частью содержимого веб-страницы, и используйте background-image 9. 0044, когда изображение является частью презентации страницы или визуального оформления. Хотя эти рекомендации охватывают большинство случаев использования изображений, если вам нужны более конкретные рекомендации, вы можете найти отличное обсуждение этой темы на StackOverflow.

Оптимизация изображений для Интернета

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

Два других способа добавления изображений на веб-страницу

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

Элемент изображения

Элемент изображения используется для определения версии изображения, которое следует использовать на основе результатов мультимедийного запроса. Это особенно полезно, когда есть определенные причины, по которым следует использовать определенную версию изображения, а не другую для определенного размера экрана. Если все, что вы пытаетесь сделать, это предоставить несколько размеров изображения для различных размеров экрана и разрешений, тег img и атрибут srcset являются лучшим вариантом, поскольку они позволяют браузеру определить наилучшее изображение для устройства. . Используйте элемент изображения, когда параметры изображения, доступные для браузера, не являются идентичными версиями друг друга с измененным размером и каким-то образом отличаются. Например, если у вас есть изображение с наложенным текстом, когда изображение сжимается, может потребоваться увеличить размер текста по сравнению с изображением, чтобы он оставался читаемым на небольших экранах. Это прекрасное время, чтобы использовать picture , чтобы вы могли явно указать браузеру, какое изображение использовать. С другой стороны, если вы просто хотите предоставить уменьшенную версию изображения для использования на небольших экранах, используйте тег img и атрибут srcset . Узнайте, как использовать srcset здесь. Элемент picture еще не полностью поддерживается всеми браузерами. Поэтому, если вы используете этот новый элемент HTML5, не забудьте предоставить резервный вариант img для посетителей, использующих неподдерживаемые браузеры.

Элемент Figure

Элемент Figure — это функция HTML5, используемая для идентификации элемента на веб-странице, который имеет отношение к остальному содержимому веб-страницы, но не зависит от появления в определенной позиции на странице. Содержимое, содержащееся между тегами и , должно иметь возможность перемещаться в другое место на странице, не влияя на его значение или значение остального содержимого страницы. Спецификация HTML говорит об этом так: «Элемент рисунка представляет собой единицу контента… которая является автономной». Графики, диаграммы и изображения являются общими элементов, но практически любой тип контента, включая видео, аудио и текст, может быть вложен между тегами . Тег figcaption может быть добавлен в элемент figcaption для назначения подписи к содержимому рисунка.

Заключение

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

Джон Пенланд

Джон — писатель-фрилансер, любитель путешествий, муж и отец. Он пишет о веб-технологиях, таких как WordPress, HTML и CSS.

Связанные элементы

HTML-изображения — бесплатный онлайн-учебник

❮ Пред. Следующий ❯

Чтобы вставить изображение на веб-страницу, используйте тег .

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

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

Атрибут src (источник) указывает имя или местоположение отображаемого изображения. Значение атрибута src должно содержать имя файла изображения или его URL.

 
 или же
 example.com/images/example.jpg" />

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

Синтаксис тега с обязательными атрибутами src и alt будет выглядеть следующим образом:

 HTML tutorial

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

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

 HTML tutorial

Пример тега HTML

с атрибутами src, alt, width и height:
 

  <голова>
    Название документа
  
  <тело>
     
Место для вашего заголовка 
 
    
Это фото Алека

    Aleq

Попробуй сам "

Результат

Вместо использования размеров ширины и высоты вы можете установить размер, используя Свойства CSS max-width или max-height для дополнительной гибкости. Это может предотвратить разрушение макета большими изображениями на устройстве с маленьким экраном.

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

Чтобы картинка отображалась слева, а текст справа, добавьте к тегу .

Пример тега

и свойства float CSS для перемещения изображения влево:
 

  <голова>
    Название документа
  
  <тело>
     
Место для вашего заголовка 
 
    Aleq
    
Фото Алека

Попробуй сам "

Добавление атрибута к тегу размещает текст слева, а изображение справа.

Пример тега

и свойства float CSS для перемещения изображения вправо:
 

  <голова>
    Название документа
  
  <тело>
     
Место для вашего заголовка 
 
    Aleq
    
Фото Алека

Попробуй сам "

Результат

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

Пример тегов

и для добавления гиперссылки к изображению:
 

  <голова>
    Название документа
  
  <тело>
    
    логотип

Попробуй сам "

Существует три основных типа форматов изображений, поддерживаемых браузерами:

  • GIF (формат обмена графикой)
  • JPG/JPEG (Объединенная группа экспертов по фотографии)
  • PNG (переносимая сетевая графика)

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

JPEG , будучи 16-битным форматом, может смешивать красный, синий и зеленый свет для отображения миллионов цветов. Таким образом, он используется в основном для фотографий. Этот формат дает вам возможность выбирать степень сжатия изображения — от 0 % (сильное сжатие) до 100 % (без сжатия). Вы можете выбрать этот формат, если вы не против пожертвовать качеством ради уменьшения размера. Избегайте использования JPEG для изображений с текстом, фигурами или большими цветными блоками, потому что при сжатии файла линии будут размыты, а цвета сдвинутся.

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

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

WebP , разработанный Google, обеспечивает сжатие изображений в Интернете без потерь и с потерями. Его главная цель — стать основным форматом для фотографий в Интернете, заменив JPEG. (WebP — Википедия)

Другим форматом, предназначенным для замены формата JPEG, является BPG (Better Portable Graphics), который также может похвастаться высокой степенью сжатия (файлы меньше, чем JPEG при том же качестве).

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

образов GitLab Docker | GitLab

  • Предварительные требования
  • Настройка расположения томов
  • Установка
    • Установка GitLab с помощью Docker Engine
    • Установка GitLab с помощью Docker Compose
    • Установка GitLab с использованием режима Docker Swarm
    • Установка документации по продукту
  • Конфигурация
    • Предварительно настроить контейнер Docker
    • Использовать тегированные версии GitLab
    • Запустить GitLab на общедоступном IP-адресе
    • Открыть GitLab на разных портах
  • Обновление
    • Обновление GitLab с помощью Docker Engine
    • Обновление GitLab с помощью Docker compose
    • Обновление документации по продукту
    • Понижение версии GitLab
  • Резервное копирование GitLab
    • Создание резервной копии базы данных
  • Устранение неполадок
    • Диагностика потенциальных проблем
    • 500 Внутренняя ошибка
    • Проблемы с правами доступа
    • Windows/Mac: Ошибка при выполнении действия run на ресурсе ruby_block [ресурс каталога: /data/GitLab]
    • Linux ACL issues
    • /dev/shm mount not having enough space in Docker container
    • Docker containers exhausts space due to the json-file
    • Buffer overflow error when starting Docker

The Образы GitLab Docker — это монолитные образы GitLab, на которых запущены все необходимые услуги в одном контейнере. Если вместо этого вы хотите установить GitLab в Kubernetes см. диаграммы GitLab Helm.

Найдите официальный образ Docker GitLab по адресу:

  • Образ GitLab Docker в Docker Hub

Образы Docker не включают почтовый транспортный агент (MTA). Рекомендуемый Решение состоит в том, чтобы добавить MTA (например, Postfix или Sendmail), работающий в отдельном контейнер. В качестве другого варианта вы можете установить MTA прямо в GitLab. контейнер, но это увеличивает затраты на обслуживание, так как вам, вероятно, придется переустанавливать MTA после каждого обновления или перезапуска.

В следующих примерах, если вы хотите использовать последний образ RC, используйте gitlab/gitlab-ee:rc вместо этого.

Внимание

Docker для Windows официально не поддерживается. Известные проблемы с громкостью разрешения и, возможно, другие неизвестные проблемы. Если вы пытаетесь запустить на Docker для Windows см. ссылки на странице справки к ресурсам сообщества (таким как IRC или форумы), чтобы обратиться за помощью к другим пользователям.

Предпосылки

Требуется докер. См. официальную документацию по установке.

Настройка расположения томов

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

Для пользователей Linux укажите путь /srv/gitlab :

 export GITLAB_HOME=/srv/gitlab

Для пользователей macOS используйте каталог пользователя $HOME/gitlab :

 export GITLAB_HOME=$HOME/gitlab

The GitLab container uses host mounted volumes to store persistent data:

Local location Container location Usage
$GITLAB_HOME/data /var/opt/gitlab Для хранения данных приложения.
$GITLAB_HOME/logs /var/log/gitlab Для хранения логов.
$GITLAB_HOME/config /etc/gitlab Для хранения файлов конфигурации GitLab.

Установка

Образы GitLab Docker можно запускать несколькими способами:

  • С помощью Docker Engine
  • С помощью Docker Compose
  • С использованием режима Docker swarm

Установка GitLab с помощью Docker Engine

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

 sudo docker run --detach \
  --hostname gitlab.example.com \
  --опубликовать 443:443 --опубликовать 80:80 --опубликовать 22:22 \
  --имя гитлаб \
  --перезапускать всегда \
  --volume $GITLAB_HOME/config:/etc/gitlab \
  --volume $GITLAB_HOME/журналы:/var/журнал/gitlab \
  --volume $GITLAB_HOME/данные:/var/opt/gitlab \
  --шм-размер 256м\
  gitlab/gitlab-ee: последний

Это загрузит и запустит контейнер GitLab и опубликует порты, необходимые для доступ к SSH, HTTP и HTTPS. Все данные GitLab будут храниться в подкаталогах $GITLAB_HOME . Контейнер автоматически перезапустит после перезагрузки системы.

Если вы используете SELinux, запустите вместо этого:

 sudo docker run --detach \
  --hostname gitlab.example.com \
  --опубликовать 443:443 --опубликовать 80:80 --опубликовать 22:22 \
  --имя гитлаб \
  --перезапускать всегда \
  --volume $GITLAB_HOME/config:/etc/gitlab:Z \
  --volume $GITLAB_HOME/журналы:/var/журнал/gitlab:Z \
  --volume $GITLAB_HOME/данные:/var/opt/gitlab:Z \
  --шм-размер 256м\
  gitlab/gitlab-ee: последний

Это гарантирует, что процесс Docker имеет достаточно разрешений для создания конфигурационные файлы в смонтированных томах.

Если вы используете интеграцию Kerberos, вы также должны опубликовать свой порт Kerberos (например, --publish 8443:8443 ). В противном случае операции Git с Kerberos прекратятся.

Процесс инициализации может занять много времени. Вы можете отслеживать это процесс с:

 sudo docker logs -f gitlab

После запуска контейнера вы можете посетить gitlab.example.com (или http://192.168.59.103 , если вы использовали boot2docker в macOS). Это может занять некоторое время до того, как контейнер Docker начнет отвечать на запросы.

Посетите URL-адрес GitLab и войдите в систему с именем пользователя root и пароль из следующей команды:

 sudo docker exec -it gitlab grep 'Пароль:' /etc/gitlab/initial_root_password
примечание

Файл паролей будет автоматически удален при первом запуске реконфигурации через 24 часа.

Установите GitLab с помощью Docker Compose

С помощью Docker Compose вы можете легко настроить, установите и обновите установку GitLab на основе Docker:

  1. Установите Docker Compose.

  2. Создайте файл docker-compose.yml (или загрузите пример):

     версия: «3.6»
Сервисы:
  веб:
    изображение: 'gitlab/gitlab-ee: последний'
    перезапуск: всегда
    имя хоста: 'gitlab. example.com'
    Окружающая среда:
      GITLAB_OMNIBUS_CONFIG: |
        external_url 'https://gitlab.example.com'
        # Добавьте сюда любую другую конфигурацию gitlab.rb, каждую в отдельной строке
    порты:
      - «80:80»
      - '443:443'
      - '22:22'
    тома:
      - '$GITLAB_HOME/config:/etc/gitlab'
      - '$GITLAB_HOME/журналы:/var/журнал/gitlab'
      - '$ GITLAB_HOME/данные:/var/opt/gitlab'
    shm_size: '256m'

  3. Убедитесь, что вы находитесь в том же каталоге, что и docker-compose.yml , и запустите GitLab:

     docker compose up -d
примечание

Прочтите раздел «Предварительная настройка контейнера Docker» чтобы увидеть, как работает переменная GITLAB_OMNIBUS_CONFIG .

Ниже приведен еще один пример docker-compose.yml с GitLab, работающим на пользовательском HTTP и SSH порт. Обратите внимание, как переменные GITLAB_OMNIBUS_CONFIG соответствуют портов раздел:

 версия: '3. 6'
Сервисы:
  веб:
    изображение: 'gitlab/gitlab-ee: последний'
    перезапуск: всегда
    имя хоста: 'gitlab.example.com'
    Окружающая среда:
      GITLAB_OMNIBUS_CONFIG: |
        external_url 'http://gitlab.example.com:8929'
        gitlab_rails['gitlab_shell_ssh_port'] = 2224
    порты:
      - '8929:8929'
      - '2224:22'
    тома:
      - '$GITLAB_HOME/config:/etc/gitlab'
      - '$GITLAB_HOME/журналы:/var/журнал/gitlab'
      - '$ GITLAB_HOME/данные:/var/opt/gitlab'
    shm_size: '256m'

Это то же самое, что и использование --publish 8929:8929 --publish 2224:22 .

Установите GitLab, используя режим роя Docker

В режиме роя Docker вы можете легко настроить и развернуть свой Установка GitLab на основе Docker в swarm-кластере.

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

Вот пример развертывания GitLab с четырьмя исполнителями в виде стека с использованием секретов и конфигураций:

  1. Настройте рой Docker.

  2. Создайте файл docker-compose.yml :

     версия: «3.6»
Сервисы:
  гитлаб:
    изображение: gitlab/gitlab-ee:последнее
    порты:
      - "22:22"
      - "80:80"
      - "443:443"
    тома:
      - $GITLAB_HOME/данные:/var/opt/gitlab
      - $GITLAB_HOME/журналы:/var/журнал/gitlab
      - $GITLAB_HOME/config:/etc/gitlab
    shm_size: '256m'
    Окружающая среда:
      GITLAB_OMNIBUS_CONFIG: "from_file('/omnibus_config.rb')"
    конфиги:
      - источник: гитлаб
        цель: /omnibus_config.rb
    секреты:
      - gitlab_root_password
  gitlab-бегун:
    изображение: gitlab/gitlab-runner:alpine
    развертывать:
      режим: реплицированный
      реплики: 4
конфиги:
  гитлаб:
    файл: ./gitlab.rb
секреты:
  gitlab_root_пароль:
    файл: . /root_password.txt

    Для простоты конфигурация сети была опущена. Дополнительную информацию можно найти в официальном справочнике по файлам Compose.

  3. Создайте файл gitlab.rb :

     external_url 'https://my.domain.com/'
gitlab_rails['initial_root_password'] = File.read('/run/secrets/gitlab_root_password').gsub("\n", "")

  4. Создайте файл root_password.txt :

     MySuperSecretAndSecurePass0rd!

  5. Убедитесь, что вы находитесь в том же каталоге, что и docker-compose.yml , и запустите:

     docker stack deploy --compose-file docker-compose.yml mystack

Установка документации по продукту

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

Конфигурация

Этот контейнер использует официальный пакет Omnibus GitLab, поэтому все настройки делается в уникальном конфигурационном файле /etc/gitlab/gitlab. rb .

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

 sudo docker exec -it gitlab /bin/bash

Вы также можете просто отредактировать /etc/gitlab/gitlab.rb :

 sudo docker exec -it gitlab editor /etc/gitlab/gitlab.rb

После открытия /etc/gitlab/gitlab.rb обязательно установите external_url по указать действительный URL-адрес.

Чтобы получать электронные письма от GitLab, вы должны настроить Настройки SMTP, потому что образ GitLab Docker не иметь установленный SMTP-сервер. Вас также могут заинтересовать включение HTTPS.

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

 sudo docker перезапустить gitlab

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

Предварительно настроить контейнер Docker

Вы можете предварительно настроить образ GitLab Docker, добавив переменную среды GITLAB_OMNIBUS_CONFIG в команду запуска Docker. Эта переменная может содержать любое gitlab.rb и оценивается перед загрузкой контейнера файл gitlab.rb . Это поведение позволяет настроить внешний URL-адрес GitLab, и выполните настройку базы данных или любой другой вариант из Омнибусный шаблон GitLab. Настройки, содержащиеся в GITLAB_OMNIBUS_CONFIG не записываются в gitlab.rb файл конфигурации и оцениваются при загрузке.

Вот пример, который устанавливает внешний URL-адрес и включает LFS при запуске контейнер:

 sudo docker run --detach \
  --hostname gitlab.example.com \
  --env GITLAB_OMNIBUS_CONFIG="external_url 'http://my.domain.com/'; gitlab_rails['lfs_enabled'] = true;" \
  --опубликовать 443:443 --опубликовать 80:80 --опубликовать 22:22 \
  --имя гитлаб \
  --перезапускать всегда \
  --volume $GITLAB_HOME/config:/etc/gitlab \
  --volume $GITLAB_HOME/журналы:/var/журнал/gitlab \
  --volume $GITLAB_HOME/данные:/var/opt/gitlab \
  --шм-размер 256м\
  gitlab/gitlab-ee: последний

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

Использовать помеченные версии GitLab

Также предоставляются тегированные версии образов GitLab Docker. Чтобы увидеть все доступные теги, см.:

  • Теги GitLab CE
  • Теги GitLab EE

Чтобы использовать конкретную версию с тегами, замените gitlab/gitlab-ee: последний с версию GitLab, которую вы хотите запустить, например gitlab/gitlab-ee:12.1.3-ce.0 .

Запустите GitLab на общедоступном IP-адресе

Вы можете заставить Docker использовать ваш IP-адрес и перенаправлять весь трафик на Контейнер GitLab, изменив флаг --publish .

Чтобы выставить GitLab на IP 198.51.100.1 :

 sudo docker run --detach \
  --hostname gitlab.example.com \
  --опубликовать 198.51.100.1:443:443 \
  --опубликовать 198.51.100.1:80:80 \
  --опубликовать 198.51.100.1:22:22 \
  --имя гитлаб \
  --перезапускать всегда \
  --volume $GITLAB_HOME/config:/etc/gitlab \
  --volume $GITLAB_HOME/журналы:/var/журнал/gitlab \
  --volume $GITLAB_HOME/данные:/var/opt/gitlab \
  --шм-размер 256м\
  gitlab/gitlab-ee: последний

Затем вы можете получить доступ к своему экземпляру GitLab по адресу http://198. 51.100.1/ и https://198.51.100.1/.

Предоставление GitLab на разных портах

GitLab займет несколько портов внутри контейнера.

Если вы хотите использовать хост-порт, отличный от 80 (HTTP) или 443 (HTTPS), вам нужно добавить отдельную директиву --publish в команду docker run .

Например, чтобы открыть веб-интерфейс на порту хоста 8929 и службу SSH на порт 2289 :

  1. Используйте следующую команду docker run :

     sudo docker run --detach \
  --hostname gitlab.example.com \
  --опубликовать 8929:8929 --опубликовать 2289:22 \
  --имя гитлаб \
  --перезапускать всегда \
  --volume $GITLAB_HOME/config:/etc/gitlab \
  --volume $GITLAB_HOME/журналы:/var/журнал/gitlab \
  --volume $GITLAB_HOME/данные:/var/opt/gitlab \
  --шм-размер 256м\
  gitlab/gitlab-ee: последний
    note

    Формат публикации портов: hostPort:containerPort . Подробнее в Документация Docker о открытие входящих портов.

  2. Войдите в работающий контейнер:

     sudo docker exec -it gitlab /bin/bash

  3. Откройте /etc/gitlab/gitlab.rb в вашем редакторе и установите external_url :

     # Для HTTP
external_url "http://gitlab.example.com:8929"
или же
# Для HTTPS (обратите внимание на https)
external_url "https://gitlab.example.com:8929"

    Порт, указанный в этом URL-адресе, должен совпадать с портом, опубликованным для хоста Docker. Кроме того, если порт прослушивания NGINX не указан явно в nginx['listen_port'] , он будет извлечен из external_url . Для получения дополнительной информации см. документацию NGINX.

  4. Установить gitlab_shell_ssh_port :

     gitlab_rails['gitlab_shell_ssh_port'] = 2289

  5. Наконец, перенастройте GitLab:

     gitlab-ctl перенастройте

Следуя приведенному выше примеру, вы сможете получить доступ к GitLab со своего веб-браузер под :8929 и отправить с помощью SSH через порт 2289 .

А 9Пример 0043 docker-compose.yml , использующий разные порты, можно найти в Раздел компоновки Docker.

Обновление

В большинстве случаев обновить GitLab так же просто, как загрузить новейшую версию Docker. тег изображения.

Обновление GitLab с помощью Docker Engine

Чтобы обновить GitLab, установленный с помощью Docker Engine:

  1. Сделать резервную копию. Как минимум, сделайте резервную копию базы данных и файл секретов GitLab.

  2. Остановить запущенный контейнер:

     sudo docker остановить gitlab

  3. Удалить существующий контейнер:

     sudo docker rm gitlab

  4. Получить новый образ. Например, последний образ GitLab:

     sudo docker pull gitlab/gitlab-ee:latest

  5. Создайте контейнер еще раз с ранее указанные параметры:

     sudo docker run --detach \
--hostname gitlab.example.com \
--опубликовать 443:443 --опубликовать 80:80 --опубликовать 22:22 \
--имя гитлаб \
--перезапускать всегда \
--volume $GITLAB_HOME/config:/etc/gitlab \
--volume $GITLAB_HOME/журналы:/var/журнал/gitlab \
--volume $GITLAB_HOME/данные:/var/opt/gitlab \
--шм-размер 256м\
gitlab/gitlab-ee: последний

При первом запуске GitLab перенастроится и обновится.

См. рекомендации по обновлению GitLab при обновлении между основными версиями.

Обновление GitLab с помощью Docker compose

Чтобы обновить GitLab, который был установлен с помощью Docker Compose:

  1. Сделать резервную копию. Как минимум, сделайте резервную копию базы данных и файл секретов GitLab.

  2. Загрузите новейшую версию и обновите экземпляр GitLab:

     докер составить тянуть
докер составить -d

    Если вместо этого вы использовали теги, вам потребуется для первого редактирования docker-compose.yml .

Вы можете преобразовать существующий контейнер GitLab Community Edition (CE) на основе Docker. в контейнер GitLab Enterprise Edition (EE) используя тот же подход, что и при обновлении версии.

Мы рекомендуем преобразовать ту же версию CE в EE (например, CE 14.1 в EE 14.1). В этом нет явной необходимости, и любое стандартное обновление (например, с CE 14.0 до EE 14.1) должно работать. В следующих шагах предполагается, что вы обновляете ту же версию.

  1. Сделать резервную копию. Как минимум, сделайте резервную копию базы данных и файл секретов GitLab.

  2. Остановите текущий контейнер CE и удалите или переименуйте его.

  3. Чтобы создать новый контейнер с GitLab EE, замените ce на ee в команде docker run или в файле docker-compose.yml . Однако повторно используйте имя контейнера CE, сопоставления портов и файлов, а также версию.

Обновление документации по продукту

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

Понизить версию GitLab

Чтобы понизить версию GitLab после обновления:

  1. Выполните процедуру обновления, но укажите тег оригинальной версии GitLab вместо последний .

  2. Восстановите резервную копию базы данных, созданную в ходе обновления.

    • Восстановление требуется для возврата данных базы данных и изменений схемы (миграции), сделанных в рамках обновления.
    • Резервные копии GitLab должны быть восстановлены до той же версии и редакции.
    • Следуйте инструкциям по восстановлению образов Docker, включая остановив Puma и Sidekiq. Восстанавливать нужно только базу, поэтому добавляем SKIP=артефакты,репозитории,реестр,загрузки,сборки,страницы,lfs,пакеты,terraform_state в аргументы командной строки gitlab-backup restore .

Резервное копирование GitLab

Вы можете создать резервную копию GitLab с помощью:

 docker exec -t <имя контейнера> gitlab-backup create

Узнайте больше о резервном копировании и восстановлении GitLab.

примечание

Если конфигурация предоставляется полностью через переменную среды GITLAB_OMNIBUS_CONFIG (в соответствии с шагами «Предварительная настройка контейнера Docker»), это означает, что конфигурация не задается непосредственно в файле gitlab. rb , тогда нет необходимости для резервного копирования файла gitlab.rb .

предупреждение

Требуется резервное копирование файла секретов GitLab чтобы избежать сложных шагов при восстановлении GitLab из резервной копии. Файл секретов хранится в /etc/gitlab/gitlab-secrets.json внутри контейнера или $GITLAB_HOME/config/gitlab-secrets.json на узле контейнера.

Создать резервную копию базы данных

Резервная копия базы данных требуется для отката обновления GitLab в случае возникновения проблем.

 docker exec -t <имя контейнера> gitlab-backup create SKIP=artifacts,repositories,registry,uploads,builds,pages,lfs,packages,terraform_state

Резервная копия записывается в /var/opt/gitlab/backups , который должен быть на том, смонтированный Docker.

Образ GitLab CE Docker

Чтобы установить Community Edition, замените ee на ce в командах на этом страница.

Поиск и устранение неисправностей

Следующая информация поможет, если вы столкнетесь с проблемами при использовании Omnibus GitLab и Docker.

Диагностика потенциальных проблем

Чтение журналов контейнеров:

 журналы sudo docker gitlab

Введите работающий контейнер:

 sudo docker exec -it gitlab /bin/bash

Изнутри контейнера вы можете администрировать контейнер GitLab так же, как и обычно управляют Установка Omnibus

500 Внутренняя ошибка

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

 sudo docker перезапустить gitlab

Проблемы с разрешениями

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

Чтобы исправить ваш контейнер, выполните update-permissions и перезапустите контейнер впоследствии:

 sudo docker exec gitlab update-permissions
sudo docker перезапустить gitlab

Windows/Mac:

Ошибка выполнения действия над ресурсом ruby_block [ресурс каталога: /data/GitLab]

Эта ошибка возникает при использовании Docker Toolbox с VirtualBox в Windows или Mac, и использование томов Docker. Том /c/Users монтируется как Общая папка VirtualBox и не поддерживает все функции файловой системы POSIX. Владелец каталога и разрешения не могут быть изменены без перемонтирования, и Гитлаб терпит неудачу.

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

Если вы не можете использовать собственную установку Docker (Windows 10 Home Edition или Windows 7/8), тогда альтернативным решением является установка монтирования NFS вместо общих ресурсов VirtualBox для boot2docker в Docker Toolbox.

Проблемы с ACL для Linux

Если вы используете файловые ACL на хосте Docker, группе docker требуется полный доступ к томам для работы GitLab:

 getfacl $GITLAB_HOME
# файл: $GITLAB_HOME
# владелец: ХХХХ
# группа: ХХХХ
пользователь::rwx
группа::rwx
группа: докер: rwx
маска::rwx
по умолчанию: пользователь :: rwx
по умолчанию: группа:: rwx
по умолчанию: группа: докер: rwx
по умолчанию:маска::rwx
по умолчанию: другое :: г-х

Если они неверны, установите их с помощью:

 sudo setfacl -mR default:group:docker:rwx $GITLAB_HOME

Группа по умолчанию — docker . Если вы изменили группу, обязательно обновите команды.

/dev/shm mount не хватает места в контейнере Docker

GitLab поставляется с конечной точкой метрик Prometheus по адресу /-/metrics для предоставления разнообразные статистические данные о работоспособности и производительности GitLab. Файлы необходимые для этого, записываются во временную файловую систему (например, /run или /dev/shm ).

По умолчанию Docker выделяет 64 МБ каталогу общей памяти (подключенному в /dev/shm ). Этого недостаточно для хранения всех показателей Prometheus, связанных с созданные файлы, и будут генерироваться журналы ошибок, подобные следующим:

 запись значения в /dev/shm/gitlab/sidekiq/gauge_all_sidekiq_0-1.db не удалась с несопоставленным файлом
запись значения в /dev/shm/gitlab/sidekiq/gauge_all_sidekiq_0-1.db не удалась с несопоставленным файлом
запись значения в /dev/shm/gitlab/sidekiq/gauge_all_sidekiq_0-1.db не удалась с несопоставленным файлом
запись значения в /dev/shm/gitlab/sidekiq/histogram_sidekiq_0-0.db не удалась с несопоставленным файлом
запись значения в /dev/shm/gitlab/sidekiq/histogram_sidekiq_0-0.db не удалась с несопоставленным файлом
запись значения в /dev/shm/gitlab/sidekiq/histogram_sidekiq_0-0.db не удалась с несопоставленным файлом
запись значения в /dev/shm/gitlab/sidekiq/histogram_sidekiq_0-0.db не удалась с несопоставленным файлом

Помимо отключения Prometheus Metrics в административной области, рекомендуется решение этой проблемы — увеличить размер разделяемой памяти как минимум до 256 МБ.

No related posts.