Как сохраняются изображения вставляемые на страницу. Как сохранить страницу и картинку из интернета. Сохранение изображения в отдельном файле
При использовании компьютера в повседневной жизни часто возникает ситуация, когда мы хотим сохранить фотографию или картинку из Интернета себе на компьютер. Но как это сделать?!
Картинка в Интернете может быть сохранена в любом из случаев, даже когда содержимое сайта защищено от копирования или заблокирована правая кнопка мыши. В этом уроке Вы узнаете и научитесь сохранять любые картинки и фотографии из Интернета.
: любой Интернет браузер
Также при сохранении с различных сайтов возникают несколько разнообразных препятствий, которые мы рассмотрим в этом уроке:
Это основные трудности, с которыми Вы можете столкнуться при сохранении картинки или фотографии из Интернета.
В этом уроке, для примера, будет использован интернет-браузер Google Chrome. В других браузерах принцип может быть похожим.
Обычное копирование картинки с сайта
К примеру, у нас есть сайт, на странице которого мы хотим скопировать картинку себе на компьютер:
Рис. 2. Кнопка сохранения картинки на компьютер
После нажатия на кнопку «Сохранить картинку как... » откроется диалоговое окно, в котором необходимо выбрать путь (папку) куда мы хотим сохранить нашу картинку или фотографию с сайта. После того, как Вы выбрали место для сохранения, в этом же окне, кликаем левой кнопкой мыши по кнопке «Сохранить».
Теперь картинка или фотография сохранена на Ваш компьютер. На этом способ « » завершен, далее рассмотрим более сложные ситуации.
Сохранение картинки, на которой нет пункта «Сохранить картинку как...»
Данный вариант работает также и для картинок или фотографий на сайте, которые нельзя сохранить стандартным способом «Сохранить картинку как... ». Причиной этого может быть: запрет с помощью скрипта на сохранение или копирование материала, на странице сайта наша картинка сверстана как слой (
В рассматриваемом примере картинка размещена как фоновый рисунок слоя. Чтобы сохранить эту картинку кликаем правой кнопкой мыши по нужной картинке и во всплывающем меню выбираем элемент «Просмотр кода элемента»:
Рис. 4. Элемент «Просмотр кода элемента» в Google Chrome
После нажатия по этому пункту появится дополнительное окно в котором программа сразу выделит необходимый нам элемент:
Рис. 5. Слой с картинкой или фотографией, которую необходимо сохранить
Справа, в этом окне, находится дополнительный раздел с вкладками «Style, Computed...», в нем мы можем увидеть ссылку на картинку или фотографию:
Рис. 7. Кнопка открытия картинки в новом окне Google Chrome
После этого программа откроет новую вкладку (окно) с требуемой картинкой:
Рис. 8. Картинка, открытая в новом окне или вкладке
На этом этапе раздел «Сохранение картинки, на которой нет пункта «Сохранить картинку как...» » завершен, теперь мы умеем сохранять картинки или фотографии на сайтах, где нет кнопки для сохранения. Далее мы рассмотрим более сложный и редкий вариант: сохранение картинки или фотографии со страницы, на которой отключена правая кнопка мыши.
Сохранение фото при защите страницы от копирования
Предположим у нас есть картинка или фотография, которую мы хотим сохранить на свой компьютер:
По уже наработанной процедуре мы кликаем по ней правой кнопкой мыши с целью сохранить ее, но в результате у нас не появляется всплывающее меню с основными операциями копирования, печати и прочих полезных действий. Существует способ 100% копирования картинок или фотографий с таких страниц сайта.
Как и было описано выше, для этого урока используется браузер Google Chrome и все примеры будут приводиться исходя из особенностей именно этого браузера. В других современных браузерах есть примерно похожие возможности. В этом уроке Вы поймете логику решения этой задачи, даже если у Вас другой браузер.
Для начала копирования картинки с защищенной страницы нажмём клавишу на клавиатуре «F12 ». После нажатия на эту клавишу нам откроется дополнительное окно, именуемое как «Инструменты разработчика »:
Рис. 10. «Инструменты разработчика» браузера Google Chrome
Рис. 11. Вкладка инструмента «Network» браузера Google Chrome
После этого, чтобы было проще найти нужную нам картинку, кликаем по иконке с изображение воронки («Filter »), после этого нам станет доступным строка для сортировки элементов на странице:
Рис. 12. Кнопка фильтрации элементов браузера Google Chrome
Теперь нам необходимо девой кнопкой мыши кликнуть по кнопке «Images », чтобы в поле ниже отображались только картинки и фотографии:
Рис. 13. Кнопка «Images» для фильтрации изображений на странице
Наш фильтр готов для того, чтобы найти и сохранить на компьютер нужную нам картинку. После этого необходимо обновить страницу сайта (клавиша «F5 » на клавиатуре). После того как страница обновилась, в поле «Network » появятся данные о загружаемых картинках:
Рис. 14. Во вкладке «Network» отображаются все картинки на текущей странице
В этом списке, полистав его вверх и вниз колесиком мыши, мы найдем нашу картинку в уменьшенном варианте:
Рис. 15. В общем списке находим нашу картинку
Теперь все что нам остается, это открыть эту картинку в новом окне, чтобы сохранить её себе на компьютер. Для этого нажимаем правую кнопку мыши на имени этой картинки (имя картинки показано справа от миниатюры) и во всплывающем меню выбираем «Open link in new tab
Также не забывайте, что не следует злоупотреблять копированием картинок или фотографий с сайтов, так как у каждого рисунка или фотографии может быть автор и они обладают авторскими правами.
Здравствуйте уважаемые читатели блога! В этой статье вы узнаете все о том как вставить изображение на html страницу . У вас есть несколько изображений, которые вы хотите поместить на свою страничку или вы хотите поместить на свой сайт логотип? Все это легко. Прочитав эту статью, вы сможете без каких-либо трудностей вставлять картинки на свои html страницы. Для этого мы подробно поговорим о теге img и его атрибутах, кратко рассмотрим форматы графических файлов, таких как gif, jpeg и png, а также посмотрим новые возможности HTML5, которые упрощают вставку видео и аудио на сайт.
Из-за того что графические данные и текст html невозможно объединить в одном файле, для их отображения на сайте применяется другой подход, нежели с другими элементами html-страниц. Прежде всего, графические изображения, да и другие мультимедийные данные хранятся в отдельных файлах. А для их внедрения в web-страницу используют специальные теги, которые содержат ссылки на эти отдельные файлы. В частности таким тегом является тег img . Встретив такой тег с адресом, браузер сначала запрашивает у Web-сервера соответствующий файл с изображением, аудио- или видеороликом, а только затем отображает его на Web-странице.
Все графические изображения и вообще любые данные, которые хранятся в отдельных от web-страницы файлах называются внедренными элементами страницы.
Прежде чем вставлять картинки и подробно рассматривать тег «img», стоит немного узнать о графических форматах.
Форматы графических изображений.
Существует множество различных графических форматов, но браузеры поддерживают лишь несколько. Рассмотрим три из них.
1. Формат JPEG (Joint Photographic Experts Group ). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными. Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.
2. Формат GIF (Graphics Interchange Format ). Главное достоинство этого формата возможность хранить сразу несколько изображений в одном файле. Это позволяет создавать целый анимированные ролики. Во-вторых он поддерживает прозрачность. Главный недостаток это поддержка всего лишь 256-цветов, что никуда не годится для хранения фотографий. GIF в основном используется для хранения логотипов, баннеров, изображения с прозрачными участками и содержащих текст. Файлы этого формата имеют расширение gif.
3. Формат PNG (Portable Network Graphics ). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.
При создании сайтов обычно используют изображения в формате JPEG или GIF, но иногда используют PNG. Главное разобраться в каких случаях какой формат лучше использовать. Если кратко, то:
- GIF используется в основном для анимации;
- PNG — формат для всего остального (иконки, кнопки и др.).
JPEG лучше всего использовать для хранения фотографий или полутоновых картинок не содержащих текста;
Вставка картинок в html страницы
Итак, как все таки вставить изображение на веб-страницу? Вставить изображение позволяет одинарный тег img . Браузер помещает изображение в том месте веб-страницы, где встретит тег img.
Код вставки картинки в html страницу имеет такой вид:
Данный html-код поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Как вы могли заметить адрес картинки указывается в атрибуте src . Что такое я уже рассказывал. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Без атрибута src тег img не имеет смысла .
Приведу еще несколько примеров указания адреса файла с изображением:
этот html-код вставит на страницу картинку с названием image.jpg, которая хранится в папке images, расположенной в корне веб-сайта.
В атрибуте src можно указывать не только относительные ссылки на изображения. Так как изображения хранятся в сети вместе с html-страницами, поэтому у каждого файла с изображением есть свой собственный url-адрес. Поэтому в атрибут src можно вставлять url-адрес изображения. Например:
Данный код вставит на страницу изображение с сайта mysite.ru. URL-aдpec обычно применяется, если вы указываете на изображение, находящееся на другом сайте. Для изображений хранящихся на вашем сайте лучше использовать относительные ссылки.
Тег img является строчным элементом, поэтому его лучше помещать внутрь блочного элемента, например внутрь тега «Р» — абзац:
Давайте попрактикуемся и вставим на нашу страницу из предыдущих статей об html изображение. Я создам рядом с html-файлом своей страницы папку «images» и помещу туда файл с картинкой «bmw.jpg», который выглядит так:
Тогда html-код страницы со вставленной картинкой будет таким:
И смотрим результат отображения в браузере:
Как мы видим ничего сложного в размещении изображений на веб-страницах нет. Далее рассмотрим несколько других важных атрибутов тега «img».
Атрибут alt — как запасной вариант
Поскольку файлы с изображениями хранятся отдельно от веб-страниц, то для их получения браузеру приходится делать отдельные запросы. А что если изображений на странице будет очень много и скорость подключения к сети маленькая, тогда на загрузку дополнительных файлов потребуется значительное время. А еще хуже если изображение было удалено с сервера без вашего ведома.
В этих случаях сама веб-страница будет успешно загружена, только вместо изображений будут отображаться белые прямоугольники. Поэтому, чтобы сообщить пользователю информацию, что представляет из себя изображение применяется . С помощью этого атрибута указывается так называемый текст замены, который будет отображаться в пустом прямоугольнике пока изображение не загрузится:
И примерно так это выглядит:
Задаем размеры изображению
Осталось еще пару атрибутов тега img, о которых вам следует знать. Это пара атрибутов width и height . Вы можете использовать их, чтобы указать размеры изображения:
В обоих атрибутах указывается размер в пикселях . Атрибут width указывает браузеру какой ширины должно быть изображение, а атрибут height какой высоты. Эти два атрибута можно применять вместе и по отдельности. Например, если вы укажите только атрибут width, то браузер подберет высоту автоматически пропорционально указанной ширине и также в случае использования только атрибута height. В случае если вы не укажите эти атрибуты вовсе, то браузер автоматически определить размер изображения перед выводом его на экран. Стоит только заметить, что указывание размеров изображений немного ускорит работу браузера при отображении страницы.
На этом о вставке изображений на страницы пока все, далее рассмотрим как вставить аудио или видео на сайт...
Вставляем видео и аудио с помощью HTML 5
В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.
Для вставки аудио HTML5 предоставляет парный тег AUDIO . Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:
Тег «audio» создает на странице блочный элемент. По умолчанию браузер не будет воспроизводит аудиоролик. Что бы он это сделал, в теге audio необходимо указать особый атрибут autoplay . Особый, потому что он не имеет значения. Достаточно одного присутствия этого атрибута в теге, чтобы он начал действовать.
По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге «audio» поставить атрибут без значения controls , браузер выведет в том месте веб-страницы, где проставлен тег audio, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:
Для вставки видеоролика на веб-страницу предназначен парный тег video . С этим тегом все тоже самое, что и с тегом audio — адрес видеофайла указывается с помощью атрибута src, а с помощью атрибутов autoplay и controls можно запустить автовоспроизведение ролика и вывести элементы управления воспроизведения видеоролика.
Больше рассказывать о вставке картинок и мультимедиа на html страницы особо нечего. Надеюсь на вопрос «Как вставить изображение в html страницу?» я вам ответил. поэтому просто подведу итоги:
- с помощью атрибута alt тега img можно задавать текст замены на случай если изображение не загрузится;
- с помощью атрибутов width и height можно задавать размеры изображения на веб-странице;
- для вставки аудио и видео в html5 есть парные теги audio и video соответственно.
для вставки изображений на html страницу пользуемся одиночным тегом img и указываем адрес файла с картинкой в атрибуте src ;
Если что не понятно, спрашивайте в комментариях и не забудьте подписаться на обновления моего блога . До встречи в следующих постах!
Использование сопутствующих изображений в тексте значительно улучшает восприятие предоставляемой вами информации читателями. В HTML для вставки изображений на страницу существует соответствующий тег . И сегодня мы подробно рассмотрим то, как использовать этот тег, какие атрибуты он поддерживает, и ответим на несколько частых вопросов, которыми задаются начинающие вебмастера.
Вставка изображения (картинки) на страницу в HTML
Как уже говорилось ранее, для вставки изображений на страницу используют тег . Краткая его форма выглядит следующим образом:
в HTML, и так:
в XHTML. Из примера видно, что для последнего добавляется слеш (косая черта) в конце.
Все это, так сказать, быстрая вставка изображения, не содержащая в себе никаких атрибутов, за исключением ссылки на файл.
Этот тег (), в отличие, например, от ссылки, не закрывается и пишется в той форме, что я привел выше. Рекомендуемым атрибутом является «alt »:
который показывается в момент, пока изображение не загрузилось полностью или имеет битую (несуществующую) ссылку.
А теперь есть смысл рассказать обо всех атрибутах, которые поддерживает тег .
Список существующих атрибутов тега в HTML
Все атрибуты у изображений прописываются через пробел. А вот собственно и сам их перечень.
src – содержит ссылку до изображения, может быть как абсолютной (ссылка до файла, который находится на другом сайте), так и относительной (ссылка до файла, который находится на вашем сайте). Допустимые форматы: JPEG (JPG) , PNG , GIF , BMP , ICO , APNG , SVG и . Пример использования с абсолютным адресом изображения:
Пример использования с относительным адресом изображения:
alt – содержит текст – подсказку у не появившегося/отсутствующего изображения. Пример использования:
align – задает выравнивание изображения относительно рядом находящегося текста (создание обтекания изображения текстом). Допустимые значения: top , bottom , middle , left и right . Пример использования:
border – задает ширину границы (рамки) вокруг изображения. Допустимые значения: px , %
Атрибут не поддерживается в HTML5.
height – задает высоту изображения. Допустимые значения: px , % и другие величины. Пример использования:
width – задает ширину изображения. Допустимые значения: px , % и другие величины. Пример использования:
hspace – задает горизонтальный (слева и справа) отступ у изображения. Допустимые значения: px , % и другие величины. Пример использования:
Атрибут не поддерживается в HTML5.
vspace – задает вертикальный (сверху и снизу) отступ у изображения. Допустимые значения: px , % и другие величины. Пример использования:
Атрибут не поддерживается в HTML5.
longdesc – содержит адрес до расширенного описания изображения. Допустимые значения: TXT-файл . Адрес, как и у атрибута src, может быть абсолютным или относительным. Пример использования:
crossorigin – атрибут, позволяющий осуществить вставку изображения с другого сайта через кросс-доменный запроса (CORS). Допустимые значения: anonymous (анонимный запрос без передачи учетных данных) и use-credentials (запрос с передачей учетных данных). Пример использования:
Атрибут поддерживается только в HTML5.
srcset – задает список файлов, которые будут отображаться в зависимости от ширины или плотности экрана. Допустимые значения: Nw (где N – любое целое положительное число) и Kx (где K – положительное десятичное число). Пример использования:
Атрибут не поддерживается в браузерах Android и Internet Explorer.
sizes – задает размер для изображений, указанных в атрибуте srcset. Допустимые значения: Nex , Nrem , Nem , Nvmin , Nch , Nvh , Nvw , Nvmax , Nin , Nq , Nmm , Npc , Ncm , Npt и Npx , где N – положительное число. Пример использования:
Принцип действия примера такой: если разрешение экрана меньше 600 px, то задаем ширину изображений, равную 300 px, и наоборот, если больше 600 px – фиксируем ширину изображений на 600 px.
Атрибут, как и srcset, не поддерживается в браузерах Android и Internet Explorer.
usemap – связывает изображение с картой, которая задается с помощью тега . Допустимые значения: #name (где name – значение атрибута name карты) и #id (где id – значение атрибута id карты). Пример использования:
Нельзя создавать связь, если карта (
ismap – связывает изображение с некоторой областью серверной карты. При нажатии на такую картинку, считываются координаты нажатия от левого верхнего угла и посылаются запросом на указанный в ссылке адрес. Для работы атрибута, изображение должно быть обернуто в ссылку (). Пример использования:
в HTML, и так:
Помимо этого,
По желанию, большая часть персональных атрибутов
Как вставить изображение (картинку) в таблицу?
Неважно, куда именно вы хотите вставить изображение на сайте, будь это таблица или, например, блок div, во всех случаях вставка осуществляется все по тому же принципу:
Наш логотип: |
Все просто.
Как сделать изображение (картинку) ссылкой в HTML?
Для того чтобы сделать вашу картинку кликабельной, добавив ей функцию перехода к другой странице вашего (и не только) сайта, оберните ее в тег :
Остались вопросы? Не стесняйтесь и задавайте их в комментариях под данной статьей.
Многие уже услышали или уже знают, что поисковик Google убрал кнопку “Открыть в полном размере” в поиске картинок. Теперь добраться до нужной картинки стало немного сложнее, необходимо зайти на сайт где она расположена и скачать.
Но что делать если вы хотите сохранить картинку себе на компьютер, но нажав правую мышку в браузере на картинке нету опции “Сохранить картинку как”? Почему для одних изображений есть такая возможность, а для других - нет? Сейчас мы во всем разберемся...
Пример сайта Cassina
Часто бывают такие случаи даже у коллег по цеху, найдя текстуру или референс на каком нибудь сайте, к примеру Cassina, если нет опции сохранить картинку - они просто делают скриншот в браузере а после сохраняют через Photoshop или другой редактор. Как бы это не плохо, быстрый вариант, но не идеальный, поскольку на сайте могут быть изображения большего размера чем вы получите на скриншоте.
Давайте разберемся почему иногда нету кнопки “Сохранить картинку как”?
В Web есть несколько способов как можно вставить картинку и в зависимости от поставленных задач программист/веб-дизайнер решает каким способом пользоваться.
Самый обычный способ использование тега - в таком случае обычно кнопка “Сохранить картинку как” активна в контекстном меню браузера.
Другой способ использование блока
Этот способ удобный тем, что картинка может быть больше размера и выходя за границы блока div она не видна (обрезается), а при использовании некоторых параметров стилей картинка может всегда вписываться в блок независимо от размеров самого блока.
Использование Иногда изображение делают фоном блока Сохранение любой картинки в Chrome, Opera, FireFox
Если вы внимательный читатель, то наверное заметили что на сайте Cassina есть красная кнопка с иконкой развернуть на весь экран и там все же доступна опция скачивания. Но способом, который я приведу ниже вы всегда можете скачать нужный вам контент и не важно есть ли там какая то “красная кнопочка”. Последние версии Opera и Chrome работают идентично, и принцип будет тот же, думаю дополнительные скриншоты тут не понадобится делать. Принцип прост, нужно зайти в режим разработчика, перейти во вкладку “Сеть”/”Network”, найти нужную картинку и скачать.
Теперь более подробно на примере сайта 3dground.net. Шаг 1.
Откройте сайт в браузере, затем запускаем режим разработчика. Нажмите на клавиатуре сочетание горячих клавиш Ctrl + Shift + I
(Работает для всех 3-ех браузеров)
. Вы увидите следующее окно: Режим разработчика в Chrome
Режим разработчика в FireFox
Режим разработчика в Opera
Шаг 2.
Перейдите во вкладку “Network”/”Сеть” и обновите страницу (F5) Шаг 3.
Включите фильтр по изображениям и отсортируйте контент по размеру : Chrome
FireFox
Шаг 4.
Если вы ищите большие изображения, обычно они находятся в начале списка.Переключайтесь между элементами списка чтобы найти нужное изображение. Вы можете включить увеличенный предварительный просмотр нажав на вкладку “Preview” в Chrome/Opera или “Ответ” в FireFox (Этот набор вкладок доступен после выделения пункта из списка файлов). Быстро переключаться между элементами списка файлов можно при помощи клавиш “Вверх“ или “Вниз” на клавиатуре. Обращайте также внимание на размер и разрешение файла, иногда может попадаться уменьшенная копия основной картинки (thumbnail).
Шаг 5.
Для Chrome/Opera вызовите контекстное меню на превью изображения и нажмите “Save”. Для FireFox вызовите контекстное меню на выбранном файле из списка и нажмите “Сохранить изображение как”. Итак, еще раз повторим:
1. Открываем нужную страницу в браузере 2. Нажимаешь Ctrl + Shift + I 3. Переходим в Network (Сеть)
4. Обновляем страницу 5. Достаем любую картинку Надеюсь урок был полезен, вы почерпнули для себя что-то новое и стали немного более продвинутым не только в 3D ;). Не забываем ставить лайки, если вам понравился урок:) web
, image
, chrome
, firefox
, opera
, download
, access
Этот урок для тех кто на каком-либо сайте увидел красивую картинку и решил её сохранить, но увы... Админ заблокировал правую кнопку мышки, да ещё и выскакивает обидное сообщение, типа не воруйте или ещё чего! Способ первый: самый простой и безобидный Способ второй: кликни и скопируй Способ третий: наведи и сохрани Способ четвёртый: да поможет нам скиншот =) Способ пятый: HTML - это сила! Способ шестой: окно во весь экран и правая кнопка заблокирована Способ седьмой: злобное сообщение при клике правой кнопкой Этот урок был написан не для того что бы "одалживать" картинки (но и для этого тоже...), а для того что бы наивные админы у которых всё ещё стоит такая "защита" одумались. Ведь зачем выкладывать картинки и тут же из защищать, что бы никто не спёр!? А совсем плохо когда выскакивает нехорошее сообщение: посетитель обидится и уйдёт....
FireFox
На нужную картинку нужно просто навести мышку и кликнув правой кнопкой, выбрать "Сохранить объект как...". И всё! Лёгкий и простой способ который действует почти всегда.
У каждой картинки есть адрес, поэтому, если правая кнопка не заблокирована, кликните ею по картинке и в Свойствах посмотрите адрес. Введите этот адресок в адрес и картинка перед вами. Всё просто и легко!!! Про защищённыe картинки читайте ниже...
При наведение мышкой на левый верхний угол появляются четыре иконки. Нам нужна первая, а именно, сохранить картинку. У этого способа есть недостатки, ведь эти четыре волшебных иконки появляются только при наведение на большие картинки и не срабатывают на анимации.
Делаем скиншот страницы (Print Screen SysRq) и в открываем нужную картинку в Paint"e. Удаляем всё лишнее, подрезаем и картинка ваша. Этот способ довольно лёгкий, но сохранить таким методом анимашки невозможно...
Что бы использовать этот способ, нужно хоть капельку знать HTML. Блокнот с кодом можно открыть кликнув в строке браузера на "Вид", а затем "Просмотр HTML-кода". После того как откроется блокнот, там вы ищете примерное местоположения адреса картинки. Часто появляется что-то типа "teddy/teddy2.gif". Такое в адресную строку не вставишь, но это разрешимо. Пишите адрес сайта на пример, http://tritroichki.narod.ru и добавляете адресок который вы надыбали в коде. Должно получиться вот что: http://tritroichki.narod.ru/teddy/teddy2.gif . Копируем эту ссылку, вставляем в адресную строку страницы и нажимаем "Переход". Если вам повезёт, то адрес может быть даже полным. Тогда просто копируйте его в адресную строку и жмите Enter. Всё, картинка перед вами!
Наверняка вы встречали сайту у которых нет верхней менюшки, да ещё и правая кнопка заблокирована? Сайт на котором лежит "недоступная" картинка оказался таким? Нет проблем. Делаем вот что: нужно вернуться на предыдущую страницу, пусть она будет называться "Страничка 1". Наводите на ссылку "Странички 2" (а именно там лежит "недоступная" картинка) где вы только что были и записываете где-нибудь или запоминаете адрес. Адрес должен появиться в строке статуса браузера, то есть, внизу. Вписываете этот адресок в адресную строку жмёте Enter. Появилась страница с картинкой, только вот с верхней менюшкой. Далее действуйте одним из предыдущих способов.
Этот способ для тех ко не хочет копаться в HTML сайта и если при клики правой кнопкой мышки, выскакивает сообщение предупреждающее что воровать нехорошо, вас за это накажут и т.д. и т.п. Значит так, кликаете правой кнопкой мышки, выскакивает сообщение, а вы вместо того что бы нажать на красный крестик, жмите Esc на клавиатуре. Окошко исчезает. После чередующихся кликах правой кнопкой и нажатием Esc (кликаете правой кнопкой мышки, жмёте Esc, кликаете правой кнопкой мышки, жмёте Esc...), скрипт защиты не выдержит и взломается. То есть, появится привычное окно, где и можно выбрать "Сохранить как...". Этот способ работает только когда выскакивает злобное предупреждающее сообщение.