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

6 лет назад

241 просмотр

Как добавить текст к изображениям с помощью HTML

Содержание

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

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

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

Но зачем размещать текст на изображениях?

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

✅ Чтобы привлечь внимание пользователей

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

✅ Чтобы выделить текущие предложения

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

✅ Для защиты изображений

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

Необходимые условия для размещения текста на изображении

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

1. Базовое понимание HTML и CSS
2. Учетная запись ImageKit.io

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

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

 https://ik.imagekit.io/fvilrnl1zve/hero.png 

1.

обозначает высоту. Например, на изображении ниже w указывает ширину изображения, 1200, а h указывает высоту, 300.

 https://ik.imagekit.io/fvilrnl1zve/hero.png?tr=w-1200,h -300 

Если вы хотите изменить размер изображения до другого размера, вы можете заменить ширину 1200 другим значением, скажем, 600, что уменьшит ширину изображения до 600, что составляет половину от предыдущей. Таким же образом можно изменить высоту изображения. Выезд документы для получения дополнительных объяснений и примеров.

В этом случае вы можете изменить высоту и ширину изображения, изменив значения в URL-адресе на tr=w-1200,h-300.

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

2. Размещение текста на изображениях с помощью HTML

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

1. Использование атрибутов позиции
2. Использование псевдоклассов CSS

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

Предположим, у нас есть HTML-код, который выглядит как это:

 


<дел>
 
Добро пожаловать в наш блог
 
Мы стремимся ежедневно загружать образовательный контент.
 

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

https://codepen.io/olawanlejoel/embed/ZEJEEaV

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

Давайте также изменим положение текста с помощью CSS. Разместим текст внизу и внизу справа.

https://codepen.io/olawanlejoel/pen/BadGQgx

2. Использование псевдоклассов CSS

Другой метод размещения текста на изображениях с помощью HTML и CSS — использование CSS ::after и ::before псевдоэлементы вместе со свойством CSS содержимого для управления содержимым для наложения текста, что означает, что весь текст (тексты) будет храниться только в CSS.

https://codepen.io/olawanlejoel/pen/zYdYxPK

Наложение текста с помощью ImageKit

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

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

Кроме того, ImageKit предлагает несколько преимуществ в преобразовании изображений по сравнению с HTML.

HTML	ImageKit
Зависит от браузера и не работает в мобильных приложениях и на других платформах.	Устройство и платформа агонисты. Работает везде, где вы хотите, чтобы он работал.
Такие платформы, как Facebook, Twitter, электронная почта и т. д., не поддерживают HTML-код для сжатия изображений.	Позволяет преобразовывать изображения в любой размер или формат, совместимый со всеми платформами и службами.
Требуется сильная зависимость от разработчиков. Или требует, чтобы маркетологи и дизайнеры хорошо разбирались в HTML-программировании, что невозможно.	Удобен в использовании и не требует технических знаний. Любой пользователь-непрофессионал может легко преобразовать изображения, не полагаясь на разработчиков.

Зачем использовать ImageKit

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

Начало работы с ImageKit

Чтобы без труда начать размещать текстовые наложения на изображениях, вам потребуется учетная запись ImageKit. Вы можете создать учетную запись здесь, если у вас ее нет. ImageKit предлагает щедрый бесплатный план, который дает вам до 20 ГБ пропускной способности БЕСПЛАТНО каждый месяц!

Размещение текста на изображениях с помощью ImageKit

Размещение текста на изображениях с помощью ImageKit может быть достигнуто путем добавления некоторых параметров к URL-адресу, точно так же, как мы сделали, когда обрезали изображение, добавив tr=w-1200,h-300 к URL-адресу. .

Добавление параметров к URL можно выполнить двумя способами:

 https://ik.imagekit.io/fvilrnl1zve/hero.png?tr=w-1200,h-300
https://ik.imagekit.io/fvilrnl1zve/tr:w-1200,h-300/hero.png 

Любой подход работает хорошо, но в этом обсуждении мы будем работать с первым подходом.

➡️ Шаг 1

Давайте добавим текст «Добро пожаловать в наш блог» с размером шрифта 25px и черным цветом, который имеет шестнадцатеричный код #000000. Мы будем использовать параметры ot-Welcome to our Blog,ots-25,otc-000000 в URL-адресе.

Это будет

➡️️️ Шаг 2

Давайте добавим прозрачный белый фон, т. е. #FFFFFF80, под текстом, чтобы читатели могли его легко увидеть. Мы добавим в URL параметр otbg-FFFFF80.

Это будет:

 https://ik.imagekit.io/fvilrnl1zve/hero.png?tr=w-1200,h-300,ot-Добро пожаловать в наш блог,ots-25,otc-000000,otbg -FFFFFF80 

️➡️ Шаг 3

Последнее, что нужно сделать, это добавить отступ в 40 пикселей к тексту, чтобы между текстом и фоновым изображением было пространство. Мы добавим в URL параметр otp-40.

Это будет:

 https://ik.imagekit.io/fvilrnl1zve/hero.png?tr=w-1200,h-300,ot-Добро пожаловать в наш блог,ots-25,otc-000000,otbg -FFFFFF80,otp-40 

Конечным результатом изображения будет:

Размещение текста на изображении: другие варианты использования

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

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

Баннеры блога

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

Социальные карточки — это превью изображений, которые вы видите в социальных сетях, таких как Facebook, Twitter, LinkedIn и т. д., когда публикуете блог или веб-страницу. Большинство платформ CMS позволяют использовать баннер блога в качестве социальной карты для Facebook и Twitter.

Давайте посмотрим, как создать баннер для блога с помощью ImageKit.

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

• параметр w & h для размеров ширины и высоты
• ot для текстового содержимого
• otbg для фона содержимого, например, сплошной цвет, непрозрачный фон, прозрачность и т. д.
• otp для определения позиции текста или координат

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

 https://ik.imagekit.io/fvilrnl1zve/Blog_Banner.jpg?tr=w-1200,h-400,ot-Understanding%20the %20Concept%20of%20Design,ots-45,otc-000000,otbg-FFFFFF80,otp-40,ox-753,oy-200 

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

1. Онлайн-галереи изображений
2. Домашние страницы блогов
3. Видеоплатформы, такие как YouTube или OTT-сервисы
4. Интернет-магазины демонстрируют свои продукты, например, обзор портфолио продуктов.

Пример миниатюры, как на изображении ниже, которую можно легко получить, используя следующие параметры: 150,ot-Выходные%20Утренние%20Работа,ots-90,otc-000000,otw-500,otbg-FFFFFF80,otp-40,otia-left

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

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

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

 https://ik.imagekit.io/fvilrnl1zve/web-banner.jpg?tr=w-1200,h-500,ot-Welcome%20to %20Jay%20Commerce,ots-50,otw-400,otc-000000,ox-753,oy-200,otia-right,ott-bold 

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

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

 https://ik.imagekit.io/fvilrnl1zve/francois-olwage-dFFjVeYqMX8-unsplash_NGi4HCiGD5.jpg?tr=w-394,h-540,ot-Black%20boy%20Photography,otc-FFFFFF,otp-8_8, ox-105,oy-480,ots-15 

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

Например, на изображении ниже метка «Самые популярные» была добавлена ​​с использованием текста о возможностях обработки изображений ImageKit. Как мы видели в предыдущих примерах, вы можете изменить цвет фона текста и другие параметры.

 https://ik.imagekit.io/fvilrnl1zve/Untitled_design_8vwRNLtuFe.png?tr=w-394,f-png,h-540,ot-MOST%20POPULAR,otc-FFFFFF,otbg-FF0000 или-4, otp-8_8,ox-135,oy-480,ott-bold,ots-30 

Коротко

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

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

Если вы еще не подписались на ImageKit, СЕЙЧАС самое подходящее время.

Начните с нашего бессрочного бесплатного плана.

https://imagekit.io/blog/css-image-overlay/ https://docs.imagekit.io/features/image-transformations/overlay

Как добавить изображения в HTML из папки

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

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

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

HTML-тег

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

 img 
 

загружает изображение и размещает его на веб-странице. Он имеет 2 важных атрибута:

• src — указывает исходное местоположение, в котором браузер будет искать файл изображения. Как только он получает файл изображения, он загружает изображение на веб-страницу. Мы можем использовать URL-адрес (унифицированный указатель ресурсов) для отображения изображения с другого веб-сайта.
• alt — определяет текст, который нам нужно отображать, если изображение недоступно или если система не может загрузить изображение. Этот текст также помогает посетителям с ограниченными возможностями, использующим программу чтения с экрана.

Как установить источник изображения в HTML

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

Базовый вариант — указать имя файла изображения, которое вы хотите поместить в HTML-документ.

Браузер будет искать изображение в той же папке, куда вы поместили HTML-документ.

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

После того, как вы добавили строку /images в исходник, браузер будет искать в нем изображение flowers.jpg вместо текущего каталога.

Как добавить изображение в HTML из удаленного места

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