Как найти код картинки на сайте

Войти на сайт

или

Забыли пароль?
Еще не зарегистрированы?

Если знаете адрес картинки в сети (URL) вида http://…jpg вам просто надо вставить его в код:

Чтоб узнать URL картинки, нужно кликнуть на нее правой кнопкой мыши.
В Хроме:

В Internet Explorer — правой кнопкой мыши — Свойства — копируем Адрес (URL)
В Mozilla Firefox — правый клик — Копировать ссылку на изображение
В Opera — правый клик — Копировать адрес изображения

Теперь подробнее:

Код любой картинки в сети в самом простом варианте, без рюшечек:
<img src=http://site/…jpg>
Уникальный адрес (URL) типа http://…jpg выдает картинке фотохостинг (специальный сайт для картинок), куда ее необходимо закачать с вашего компьютера. По сути, любая картинка, которую вы видите в сети — вебстраничка, имеющая свой уникальный адрес, начинающийся с http://… (посмотреть его можно в свойствах картинки)
Среди «чайников» кочует миф, что можно показывать в блоге картинки прямо со своего компьютера. Это не так. Для этого ваш компьютер должен работать в режиме вебсервера.

Запомните: Если вы удаляете картинку с хостинга (например, «фотоальбома жж»), то она исчезнет и из записи в вашем блоге!

Как сделать, чтобы текст «обтекал» картинку?
Легко — картинка слева, текст справа:
добавьте в код картинки:

Код картинки примет вид:

Помни:
align=left – картинка слева, текст справа
align=right — картинка справа, текст слева
hspace=20 — расстояние между текстом и картинкой 20 пиксел по горизонтали
vspace=20 — расстояние между текстом и картинкой 20 пиксел по вертикали
Код картинки с плавным обтеканием текстом справа и снизу (или сверху):

Прекратить обтекание и вернуть текст под картинку можно тэгом <br>
Закрывать не надо, он работает один. <br> выполняет перенос на следующую строку. В блогсервисах и редакторах текста его заменяет нажатие Enter.
<br><br><br> — три пустые строки.

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

Регулируем расстояние меж картинками по-горизонтали:
С помощью «неразрывного пробела»:  &nbsp;
Расстояние, равное 8 пробелам будет выглядеть так:

Вставляется меж кодов картинок, есс-но

Если надо всплывающую подсказку при наведении курсора на картинку, как здесь: — введите в код картинки title=»гав-гав»

Чтоб быстро вставить картинку с другого сайта войдите в «Свойства» картинки на этом сайте, скопируйте ее URL и вставьте её в код

Изменить размер картинки можно с помощью атрибутов width (ширина) и height (высота). Вставьте в код картинки, например, width=300 и ваша картинка будет шириной 300 пикселов, высота подгонится пропорционально. Браузер при этом все равно подгружает изначальную картинку, и если та весила 3МБ, то меньше не станет:)

Оптимальный способ уменьшить размер фото на компьютере: Читать

Формируем код для массовой загрузки картинок с помощью вспомогательных сервисов.
С рамками, нумерацией фото и возможностью жж-ката:
ЗДЕСЬ
Для массовой загрузки с Flickr и fotki.yandex.ru:
ЗДЕСЬ
Как запостить галерею? Узнай ЗДЕСЬ
Как запостить слайдшоу? Узнай ЗДЕСЬ

Каждая страница в интернете имеет свой адрес. Его называют URL. Он показан в адресной строке браузера (подробнее о том, что такое адресная строка браузера и где она находится).

Это делает возможным внутри одной страницы отображать содержимое другой страницы. Например:

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

http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif

А вот способы добавления картинки на сайт, которые можно выделить, если посмотреть код страницы:

HTML: тег <img>
<img src=»http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif» alt=»смайлик» height=»30″ width=»30″>
CSS: свойства background-image и border-image
<style> #raz { display: inline-block; height: 32px; width: 32px; background-image: url(http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif); } </style> <span id=»raz»></span>
CSS: псевдоэлементы :before и :after
<style> #raz1:before { content: url(http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif); } </style> <span id=»raz1″></span>
HTML: тег векторной графики <svg> (без URL)
<svg viewBox=»0 0 32 32″ height=»32px» width=»32px»><path fill=»#888″ d=»M0 4v26h32v-26h-32zM30 28h-28v-22h28v22zM22 11c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3zM28 26h-24l6-16 8 10 4-3z»></path></svg>
CSS: без URL
<style> #raz2 { width: 15px; height: 15px; border: 5px solid #ccffcc; border-top-color: rgb(0,255,0); border-radius: 100%; animation: loading2 linear .7s infinite; } @keyframes loading2 { 100% {transform: rotate(360deg);} } </style> <div id=»raz2″></div>

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

Скопировать адрес изображения можно несколькими способами:

1. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено скопировать URL, щёлкнуть по необходимому пункту.

   

2. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено изучить характеристики фотографии, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Информация об изображении»; в Internet Explorer см. пункт «Свойства»), в открывшемся окне выделить адрес рисунка,
   • нажать на правую клавишу мышки, в появившемся контекстном меню щёлкнуть по пункту «Копировать».
   • нажать комбинацию клавиш клавиатуры Ctrl+C.

   

3. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Открыть изображение»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью атрибутов height и width или с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера,
   • нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Копировать».
   • нажать комбинацию клавиш клавиатуры Ctrl+C.

   

4. На сенсорных устройствах (смартфон, планшет) долго без движения держать палец над фото, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (он может называться «Просмотр картинки»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью атрибутов height и width или с помощью с помощью CSS. Затем долго жать на адрес в адресной строке браузера. После того, как появятся ползунки и весь URL будет выделен (в случае необходимости, ползунки можно раздвинуть на необходимое расстояние), щёлкнуть в появившейся панели кнопку «Копировать».
5. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу фонового изображения, щёлкнуть по необходимому пункту. Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера (см. Рис.3),
   • нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Копировать».
   • нажать комбинацию клавиш клавиатуры Ctrl+C.

   

6. Из исходного кода страницы сайта.

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

Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено сохранить картинку, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Сохранить изображение как…»), в открывшемся окне выбрать папку на компьютере, куда будет сохранён рисунок.

Если фотография является фоновой картинкой, то нужно предварительно перейти на страницу картинки (см. Рис.3).

Возможно будет интересно: «Как сохранить изображение экрана монитора (сделать скриншот)»

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

Сначала изображение нужно загрузить с компьютера на хостинг сайта, в социальную сеть (ВКонтакте, Google+ и т.п.), Яндекс.Диск или Гугл.Диск, чтобы у рисунка появился свой адрес в интернете.

Если есть визуальный редактор, то очерёдность действий обычно следующая:

1. установить курсор мышки в то место, где должна будет появиться фотография,
2. нажать на иконку, похожую на или на ,
3. выбрать файл с компьютера,
4. если есть возможность, заполнить альтернативный текст (он же описание изображения).

Итог: картинка будет вставлена на страницу сайта, а самое главное — загружена на сервер веб-проекта. У неё теперь будет свой адрес в интернете. И теперь можно на вкладке «HTML» поправить предоставленный визуальным редактором код, так как часто визуальный редактор добавляет ненужные теги, да и возможности HTML и CSS несравнимо большие.

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

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

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

1. создать папку image,
2. создать в папке image файл .htaccess, содержимым которого будет

   Options -Indexes
   
   <Files .htaccess>
    order allow,deny
    deny from all
   </Files>

3. загрузить в папку image изображение, которое именуется, допустим, plain.gif (в дальнейшим все картинки также загружать в эту папку),
4. на HTML-странице использовать URL вида http://сайт.ru/image/plain.gif, например,

   <!DOCTYPE html>
   <meta charset="utf-8">
   <img src="http://сайт.ru/image/plain.gif" alt="смайлик" height="30" width="30">