Вставляем картинку в комментарий и не только… (копия статьи от 28.02.2015)

МНОГИЕ ПИШУТ МНЕ О ТОМ, ЧТО НЕ ВСЕ ИЛЛЮСТРАЦИИ (КАРТИНКИ) ВИДНЫ В МОЕЙ СТАТЬЕ "Вставляем картинку в комментарий и не только…" от 28 февраля 2015 года, поэтому делаю сейчас копию ее в своем личном блоге

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

Поэтому сначала расскажу немного о пикселях.

Пиксель (точка), наверное, вы не раз слышали это слово и думаю, основная масса народа, которая держала мышку в руках знает, что это такое, но всё же…

Пиксель - это элементарная неделимая единица изображения. Каждый пиксель имеет свои координаты, например, самый верхний левый пиксель на мониторе имеет координаты x=1, y=1, а самый нижний правый в зависимости от разрешения монитора.. x=800, y=600 - будет соответственно при разрешении 800 на 600 точек. Впрочем, эта информация пригодится нам потом, а сейчас нужно усвоить, что все расстояния в графических изображениях меряются пикселями. так картинка длинной 800 пикселей и шириной в 600 пикселей при указанном разрешении заполнит весь экран.

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

В первой статье ликбеза мы познакомились с тегами (тег, теги, иногда тэг, англ. tag, читается /tæg/; более правильное название — дескриптор) Если знаете адрес картинки в сети (URL) вида http://…jpg вам просто надо вставить его между кавычек в тег (код):

Тег img предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, JPG или PNG.

Обращаю ваше внимание на тот факт, что очень многие вместо адреса картинки в интернете, а он (адрес), как правило, заканчивается на GIF, JPEG, JPG или PNG, ошибочно вставляют в тег адрес веб-страницы, на которой они нашли это фото или рисунок.

Как вставляются картинки в комментарии к записям в МП, ЖЖ и других блогах, везде, где нет кнопки для публикации картинок?

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

Внимание!

Заметьте, копируем URL(адрес) картинки, а НЕ саму картинку, в крайнем случае – нажмите «открыть картинку в новой вкладке» и там вверху скопируйте адрес (URL) картинки.

В Internet Explorer — правой кнопкой мыши — Свойства — копируем Адрес (URL)

В Mozilla Firefox — правый клик — Копировать ссылку на изображение

В Opera — правый клик — Копировать адрес изображения.

Как и другие теги, тег img тоже имеет свои атрибуты. Адрес файла с картинкой задаётся через атрибут src. Возьмем, например, такой известный рисунок, как смайлик.

Вот адрес одного из них.

Когда перейдете по ссылке, то вверху прочтете адрес рисунка в интернете

Вот это и надо вставлять в тег между кавычками вместо слов - адрес фото.

В итоге получаем -

Но такой код не позволяет контролировать размер вставляемой в комментарий картинки и это не правильно. Что делать? Просто добавляем атрибуты width (ширина) и height (высота). Во-первых, таким образом мы будем знать точно размер (в пикселях), во-вторых, можем масштабировать фото или картинку. Только тут надо помнить одну немаловажную деталь. Уменьшая крупные, например, фото для вставки в комментарий, мы не теряем внешний вид картинки, а увеличивая мелкий рисунок, можем заметно потерять в качестве.

Пример масштабирования всё того же смайлика (истинный -начальный размер в интернете 42Х42 пикселя в четвертой строке выделен жирным шрифтом)

Если картинка или фото по размерам, примерно, квадратные (одинаковая ширина и высота), то достаточно указать только ширину или высоту.

Покажем это на примере всё того же смайлика, а заодно и убедимся в потери качества при увеличении. Напоминаю – источник имеет размер 42х42 пикселя, а мы задали 180х180, а затем 240х240.

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

Захотелось нам подписать фото или картинку, но желаем мы, чтобы надпись появлялась только после того, как кто-нибудь наведет на нее мышкой. Нет ничего проще! Вот пример. Наведите на смайлик курсором и появится надпись «Это моя фотка!!!»

Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег img в контейнер a.

Создаем «кнопку» – рисунок, на который, нажав мышкой, можно попасть на указанный сайт.

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

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

Это совсем не так!

Для этого ваш компьютер должен работать в режиме веб-сервера.

Уникальный адрес (URL) типа http://…jpg выдает картинке фотохостинг (специальный сайт для картинок), куда ее (картинку, фотографию) необходимо закачать с вашего компьютера. По сути, любая картинка, которую вы видите в сети — веб-страничка, имеющая свой уникальный адрес, начинающийся с http://… (посмотреть его можно в свойствах картинки).

Фотохостинг (англ. photo hosting) — веб-сайт, позволяющий публиковать любые изображения (например, цифровые фотографии) в Интернете. Любой человек, имеющий доступ к Интернету, может использовать фотохостинги для размещения, хранения и показа изображений другим пользователям сети. Основное преимущество, которое предоставляет фотохостинг пользователям — удобство демонстрации фотографий.

При размещении на фотохостинге, каждому фото присваивается уникальный адрес — URL. Автор снимка может легко поделиться гиперссылкой, ведущей на фотографию, с любым человеком, имеющим доступ в интернет, при помощи email или IM, а также разместив её на своём сайте, блоге или комментарии. Фотохостингов в интернете очень много. Платных и бесплатных. С регистрацией и без оной. Вот список некоторых из них

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

Лично я пользую radikal или fastpic.

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

Очень прошу вас не забывать о том, что написано в начале статьи.

Список предыдущих статей (нажимаете и переходите):

Работа с текстом

Цвет и размер букв

Цвет фона текста