Как поставить картинку
Перейти к содержимому

Как поставить картинку

  • автор:

Как вставить картинку в HTML-код страницы

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

как добавить картинки в html

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

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

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

В статье пошагово и не торопясь разбираемся, как добавить картинку в HTML ��

Как вставить картинку в HTML-код:
  1. Выбрать изображение
  2. Определить формат изображений
  3. Выбрать название файла картинки
  4. Использовать img-тег
  5. Вставить ссылку в картинку
  6. Шпаргалка: как добавить картинку в HTML-код страницы

Выбрать изображение

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

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

Использование картинок регулирует группа лицензий Creative Commons. Это американская некоммерческая организация, которая разработала варианты соглашений, по которым в интернете распространяется контент.

На сайтах для скачивания картинок встречаются такие лицензии и условия использования бесплатных изображений:

  • CC Attribution — чтобы использовать скачанные картинки, укажите автора.
  • CC Attribution-NoDerivs — укажите автора и не видоизменяйте исходное изображение.
  • CC Attribution-NonCommercial — укажите авторство и используйте картинку в некоммерческих целях.
  • СС0 или Public Domain — можете свободно использовать в любых проектах без указания авторства.

Для платных изображений есть такие типы лицензий:

  • Royalty-Free — покупаете картинку один раз и используете изображение без временных ограничений. Эксклюзивные права остаются у автора.
  • Editorial — такие картинки нельзя использовать в коммерческих целях.
  • Rights-Managed — получите исключительное право на использование картинки.

Вот список сервисов с бесплатными изображениями:

Они предлагают миллионы бесплатных картинок в высоком разрешении под лицензией СС0, которая дает свободно пользоваться ими для своих целей.

Если не нашли нужную картинку на бесплатных стоках, продолжите поиски на платных сервисах:

Большинство изображений распространяются по Royalty-Free лицензии.

Как вставить картинку в HTML

Как вставить картинку в HTML

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

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

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

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

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

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

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

Бесплатные фотографии unsplash

Вот список некоторых сервисов, на которых размещены как бесплатные, так и платные изображения:

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

Год хостинга в подарок при покупке лицензии 1С-Битрикс

Закажите лицензию 1С-Битрикс, легко размещайте картинки в визуальном редакторе и не платите за хостинг весь год.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Добавляем картинку в HTML

Немного поговорили, теперь давайте приступим к основной части статьи – добавлению изображений в разметку HTML. Как мы уже выяснили ранее, вставить картинку в код и отобразить ее на сайте мы можем с помощью тега . В него по умолчанию входят два атрибута – «src» и «alt». Первый должен содержать в себе путь к изображению, второй – текстовое описание, которое используется поисковыми системами. Если вы не хотите, чтобы фотография индексировалась поисковиками, то не используйте атрибут «alt».

Шаблон: , где photo – папка, размещенная рядом с основным файлом HTML. Если бы изображение было размещено в другом месте, то до него бы полностью указывался путь, например, .

Давайте рассмотрим, как добавить картинку в HTML на примере фотографии из Unsplash:

  1. Скачиваем нужную фотографию из стоков и добавляем ее в папку img, заранее созданную в директории с содержимым сайта. Необязательно создавать новую папку, файл можно разместить рядом с HTML-документом. Если вы берет картинку из другого места, то также учитывайте ее путь.
  2. Прописываем тег и добавляем в него атрибут «src» со скопированным путем. В нашем случае получается просто . При использовании снимка из другой папки, потребовалось бы указать полный путь с обратным слэшем.Как вставить картинку в html
  3. Запустим HTML-файл и убедимся, что все было прописано правильно. В результате фото должно занимать всю область – обратите внимание на ползунки, расположенные справа и снизу. Мы можем их прокрутить, чтобы просмотреть изображение полностью.Как добавить картинку в html

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

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

Размер указывается как в единицах измерения, так и без; если указать простое число, то оно автоматически определится в пикселях. Также можно указать в em, ex, % и прочих единицах.

Попробуем немного сжать нашу фотографию, чтобы она не расплывалась по всей территории страницы. Для этого пропишем внутри тега атрибут width=”500px”. После этого обновим страницу и убедимся, что изображение было сокращено до размера 500х500(px).

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

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

Список атрибутов тега img

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

Полный список атрибутов:

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

Возможные форматы: JPEG, JPG, PNG, GIF, BMP, ICO, APNG, SVG и Base64.

 или  
  • alt — устанавливается альтернативный текст для изображения. Текстовая информация отображается при отключенной загрузке графики в браузере пользователя и дает понять, что изображено на этой картинке. Помимо этого, данный атрибут также необходим для поисковых систем – таким образом они индексируют изображение и выводят пользователю подходящий результат. Может содержать русскую раскладку.
”яхта
  • align — определяет выравнивание картинки относительно рядом находящегося текста.

Возможные значения: top, bottom, middle, left и right.

  • border — добавляет вокруг картинки рамку с выбранным размером.

Возможные значения: px, % и другие.

  • height – позволяет изменять высоту изображения, пропорционально которому изменяется ширина.

Возможные значения: px, % и другие.

  • width — позволяет изменять ширину изображения, пропорционально которой изменяется высота.

Возможные значения: px, % и другие.

  • hspace — добавляет отступ слева и справа от изображения.

Возможные значения: px, % и другие.

  • vspace — добавляет отступ сверху и снизу от изображения.

Возможные значения: px, % и другие.

  • longdesc — позволяет добавить адрес с расширенным описанием выбранной фотографии.

Возможный формат: txt.

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

Возможные значения: anonymous – анонимный запрос без передачи учетных данных, use-credentials – запрос с передачей учетных данных.

  • srcset – добавляет список изображений, которые будут отображаться в зависимости от ширины или плотности экрана. Не поддерживается в браузерах Android и Internet Explorer.

Допустимые значения: Nw, где N – любое целое положительное число, и Kx, где K – положительное десятичное число.

  • sizes — относится к предыдущему атрибуту и позволяет указать размер выбранных изображений.

Возможные значения: Nex, Nrem, Nem, Nvmin, Nch, Nvh, Nvw, Nvmax, Nin, Nq, Nmm, Npc, Ncm, Npt и Npx, где N – положительное число.

Работает следующим образом: при разрешении экрана меньше 800px задается ширина картинки в 500px. Если экран больше 800px, то изображение фиксируется в положении 800px.

  • usemap — позволяет совместить картинку с картой, которая была указана в теге .

Возможные значения: #name, где name – значение атрибута name карты, и #id, где id – значение атрибута id карты.

  • ismap — совмещает фотографию с областью серверной карты. Таким образом, при нажатии считываются координаты клика от левого верхнего угла. Они отправляются запросом на указанный адрес в ссылке. Обязательное требование для работы с атрибутом: картинка должна быть обвернута в тег < a>.

Дополнительные опции

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

  • Изображение как ссылка на другую страницу:
  • Атрибут img позволяет добавлять не просто картинки, но и GIF-изображения:
  • Гибкий тег, появившийся в HTML5 под названием , позволяет изменять картинки при различных расширениях:

При размере дисплея больше 750px будет показано одно изображение, при размере больше 265px, но меньше 750px – другое.

  • Фоновое изображение добавляется в тег body с помощью CSS стиля «background-image» и других подобных:
 

Привет, мир!

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

Как вставить картинку на сайт

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

2. В поле текстового контента поместите курсор в место, куда Вы планируете вставить картинку.

3. На панели инструментов текстового редактора нажмите на кнопку «Вставить/редактировать изображение»

4. В появившемся окне в правой части поля «Источник» нажмите по кнопке «Обзор».

5. В окне «Файловый менеджер» Вам доступны следующие функции для работы с базой изображений:

  • Поиск картинок в текущей папке;
  • Создание папки;
  • Выбор папки для загрузки в нее изображения;
  • Добавление картинок в текщую папку.

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

При создании папки следует учесть 2 момента:

  • Папка создается относительно текущей папки, например в графе «Текущая папка» у Вас написано /images — это означает, что папка, создаваемая Вами будет размещена в корне каталога и адрес картинки будет иметь следующий вид: /images/papka/foto.jpg.
  • Название папки указывается на латинском языке

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

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

7. Вернитесь к списку файлов и выбрать загруженную картинку в общем списке (кликнуть по изображению левой кнопкой мыши).

8. В окне «Вставить/редактировать изображение» в поле «Источник» будет указан путь к выбранной Вами картинке. Кроме того, Вам доступно редактирование некоторых параметров картинки:

  • Текст из поля «Описание изображения» используется в качестве содержимого для html-тега «alt» (этот тег используется поисковыми системами);
  • Параметры «Размер» отвечает за то, какие размеры будут у картинки при просмотре на сайте (по умолчаю используются параметры исходного изображения);
  • При включеном параметре «Сохранять пропорции» ширина и высота картинки привязываются друк к другу. Так при изменении ширины картинки, ее высота автоматически будет пересчитана на пропорциональную величину, и соотношение сторон картинки останется неизменным;
  • Параметр «Создать превью» отвечает за функцию, которая позволяет открывать на сайте полноразмерное изображение при клике левой кнопкой мыши по миниатюре.

9. После изменения параметров картинки (по желанию), нажмите кнопку «Ок» и сохраните изменения, внесенные в раздел.

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

Как вставить картинку в письмо?

Чтобы письмо получилось красиво сверстанным, вам не обязательно разбираться в HTML. Прежде всего крутую рассылку можно создать в удобном редакторе нашего сервиса. Для этого у нас реализована вкладка «Контент». Для вставки изображения выберите в ней элемент «Картинка»:

При загрузке картинки в блок или структуру доступны различные настройки:

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

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

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

Требования к изображениям рассылки

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

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

Размер картинки для рассылки

Если вы используете блочный онлайн редактор, с выбором размера картинки для рассылки не возникнет никаких сложностей. Например, если ваш контейнер для картинок имеет размеры 100×100 пикселей, заблаговременно подготовьте фото товара или картинки именно этой ширины и высоты, либо ровно в два раза больше, если рассылка ориентирована на пользователей с экранами Retina (Mac). Также можно с помощью специализированных программ изменить размер изображения до нужного. В целом не следует использовать слишком большие размеры картинок. Ошибкой будет применить в одном письме картинки разной ширины и высоты: приведите все изображения к одному размеру. Изменить размер изображений также вы можете непосредственно в блочном редакторе или html-коде (включив в тег img атрибут style и прописав для него значения height и width).

Вес изображения

Изображение должен небольшим, до 500 Кбайт. Такой подход позволит сохранить качество иллюстраций, при этом письма будут загружаться быстро. Что касается форматов картинок, предпочтительно использовать стандартные варианты форматов файлов растровых изображений: jpg, png и т.д. Некоторые форматы картинок, например, gif, используйте осторожно, так как не все почтовые провайдеры их корректно отображают.

Alt-текст и title

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

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

Как вставить картинку в письмо в Яндекс Почте?

Для начала давайте узнаем, как вставить картинку в письмо Яндекс не прикрепленным файлом, а поместив ее в тело письма. Это можно легко сделать через традиционный web-интерфейс. Что для этого нужно?

  • Выберите «Написать» чтобы открыть форму создания нового письма:

  • Можно просто скопировать любую нужную картинку из интернета и вставить ее в тело письма. Тот самый «Ctrl+C» и «Ctrl+V». Затем задайте размер и положение привычными инструментами во встроенном редакторе:

  • Другой способ — кнопка «Добавить изображение», расположенная вверху на панели управления. Сервис предлагает 2 варианта: с устройства или ссылкой. С компьютера загружаете нужный файл, ссылкой — вставляете ссылку на требуемое изображение:

  • Также Яндекс Почта предоставляет возможность вставить смайлы (отнесем их тоже теоретически к изображениям для простоты восприятия) через специальную кнопку:

Теперь вы знаете, как в пару кликов добавить картинку в письмо, если вы — активный пользователь Яндекс Почты.

Как вставить картинку в письмо в Gmail?

Не менее популярен сервис Gmail, в котором также можно быстро и просто вставлять в письма картинки, чтобы добавить интереса, информативности и прочих факторов, влияющих на восприятие. Здесь все аналогично Яндекс Почте:

  • Скопируйте нужную картинку и вставьте ее в письмо для последующего редактирования:

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

  • Сервис предлагает загрузку фото из облака Google Фото, альбомов, с устройства, из интернета (ссылкой):

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

Как вставить картинку в письмо в Mail.ru?

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

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

  • Вставка картинки путем загрузки через кнопку на панели управления (только с компьютера). Возможностей для редактирования размеров также нет, учтите это при создании письма:

Как вставить картинку в письмо Outlook?

На повестке дня остался еще один важный вопрос: как вставить картинку в тело письма Outlook, если вы используете именно этот путь для отправки. Можно вставлять изображения с компьютера или интернета. Рассмотрим все возможности подробнее:

  • Вставка файла изображения с устройства на вкладке «Вставка» — «Рисунки»:

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

Далее можно редактировать изображение и все письмо целиком посредством вкладки «Сообщение»:

  • Другой вариант — загрузка изображений из интернета старым способом («Копировать» и «Вставить»).

Это может быть полезно: чтобы сделать сообщение еще более интересным и привлекательным, можно не только вставить картинку в письмо Outlook, но и добавить GIF-файлы посредством функции «Вставка рисунка».

Подводим итоги по вставке изображений

Конечно, можно идти уже проторенным путем, который позволяет прикреплять файлы к письму. Такая функция есть практически в каждом сервисе отправки, однако этот вариант лучше использовать, когда вы отправляете сообщения уже «горячей» аудитории (это могут быть чек-листы, прайсы и пр.).

Хотите еще больше удобства во время создания рассылки? Тогда добро пожаловать в сервис почтовых рассылок DashaMail. У нас есть все необходимое, а главное — удобный редактор, где можно добавлять изображения за считанные секунды, не задумываясь о том, как вставить картинку в тело письма. Также хотим напоследок дать еще несколько актуальных советов:

  • Если сервис предусматривает эту функцию, прописывайте SEO-параметры изображения — Alt-текст очень важен. Он позволяет сделать так, чтобы пользователь понял смысл картинки, даже если она не загрузится (например, из-за плохого качества интернета).
  • Не рекомендуем делать текст картинкой, так как этот прием возможен только в исключительных ситуациях, когда не хватает места, например.
  • Не злоупотребляйте вставкой картинок. Помните, что иногда они становятся негативным сигналом для spam-служб, а еще могут не отобразиться. Такая проблема, например, особенно часто возникает в Outlook.
  • Не следует начинать письмо с картинки, которая растянута на весь экран. Только представьте, что изображение не загрузится у читателя, и он увидит просто пустой лист.

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

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

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