MastaMan
Сохранение любой картинки в Chrome, Opera, FireFox
MastaMan 21744

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

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

Пример сайта Cassina

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

Давайте разберемся почему иногда нету кнопки “Сохранить картинку как”?

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

Самый обычный способ использование тега <img> - в таком случае обычно кнопка “Сохранить картинку как” активна в контекстном меню браузера.

Другой способ использование блока <div> и назначение картинки в качестве его фона - в таком случае кнопка для сохранения картинки не будет активна. Это похоже что-то на опцию в Photoshop “Наложение узора” для фигуры или элемента.

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

Использование <div> с фоном

Блокировка кнопки “Сохранить картинку как” или контекстного меню также может зависеть из за javascript. Или же какой то невидимый блок <div> будет поверх самой картинки <img> и пункт меню с сохранением так же не будет доступен.

Иногда изображение делают фоном блока <div>, что бы она не попала в индекс поисковиков, но это уже другая история. Тем не менее, в любой непонятной ситуации делайте как описано в следующем разделе.

Сохранение любой картинки в Chrome, Opera, FireFox

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

Но способом, который я приведу ниже вы всегда можете скачать нужный вам контент и не важно есть ли там какая то “красная кнопочка”.

Последние версии Opera и Chrome работают идентично, и принцип будет тот же, думаю дополнительные скриншоты тут не понадобится делать.

Принцип прост, нужно зайти в режим разработчика, перейти во вкладку “Сеть”/”Network”, найти нужную картинку и скачать.

Теперь более подробно на примере сайта 3dground.net.

Шаг 1.

Откройте сайт в браузере, затем запускаем режим разработчика.

Нажмите на клавиатуре сочетание горячих клавиш Ctrl + Shift + I(Работает для всех 3-ех браузеров).

Вы увидите следующее окно:

Режим разработчика в Chrome

Режим разработчика в FireFox

Режим разработчика в Opera

Шаг 2.

Перейдите во вкладку “Network”/”Сеть” и обновите страницу (F5)

Chrome

FireFox

Шаг 3.

Включите фильтр по изображениям [1] и отсортируйте контент по размеру [2]:

Chrome

FireFox

Шаг 4.

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

Вы можете включить увеличенный предварительный просмотр нажав на вкладку “Preview” в Chrome/Opera или “Ответ” в FireFox (Этот набор вкладок доступен после выделения пункта из списка файлов).

Быстро переключаться между элементами списка файлов можно при помощи клавиш “Вверх“ или “Вниз” на клавиатуре.

Обращайте также внимание на размер и разрешение файла, иногда может попадаться уменьшенная копия основной картинки (thumbnail).

Chrome

FireFox

Шаг 5.

Теперь осталось сохранить файл.

Для Chrome/Opera вызовите контекстное меню на превью изображения и нажмите “Save”.

Для FireFox вызовите контекстное меню на выбранном файле из списка и нажмите “Сохранить изображение как”.

Chrome

FireFox

Итак, еще раз повторим:

1. Открываем нужную страницу в браузере

2. Нажимаешь Ctrl + Shift + I

3. Переходим в Network (Сеть)

4. Обновляем страницу

5. Достаем любую картинку

Надеюсь урок был полезен, вы почерпнули для себя что-то новое и стали немного более продвинутым не только в 3D ;). Не забываем ставить лайки, если вам понравился урок :)

web, image, chrome, firefox, opera, download, access

Комментарии (69)

+9
MastaMan
MastaMan
Если нужно могу сделать еще видео-урок!

Английская версия урока (статья моя): http://3dground.net/article/how-to-save-any-image-in-chrome-opera-firefox 
+4
BarakObama
BarakObama
Видео-урок, наверное, не нужен. И так всё ясно.
Проклятые буржуи совсем обнаглели – уже и картинку не дают скопировать!
Даёшь картинки в общенародную собственность!!!
За КПРФ! За Павла Николаевича Грудинина!
+12
sweep
sweep
Долой агитацию на 3ddd!
+3
AzatHai
AzatHai
За хорошоее чувство юмора! долой занудство!
+2
AzatHai
AzatHai
Спасибо большое, сам недавно мучился, рылся в папках(в режиме разработчика Хрома) искал, где же спрятана картинка)) И никого не слушайте, делайте уроки) Невозможно все знать, хотя я 20 лет вроде в теме графики)))
+1
Виктория Ягодкина
А к чему такая сложность? Если кликнуть правой кнопкой мыши на картинку, можно выбрать - "сохранить изображение как" и оно прекрасно сохраняется в оригинальном размере.
+12
MastaMan
MastaMan
Иногда на сайтах нету этого пункта в контекстном меню, собственно объясняется в уроке почему.
По поводу Google, да там можно сразу из поиска сохранить, но не всегда отображает оригинал.
К примеру напишите в Google Images запрос Stone, в инструментах поиска поставьте большие картинки. Вы не сохраните оригинал на 4000px никогда.
По последним слухам и эту опцию прикроют что бы можно было качать любые изображения из поиска, при помощи контекстного меню.

На самом деле сложностей никаких, просто расписано очень подробно. Если вы не можете скачать картинку - открываете режим разработчика, лезете в Network и сохраняете любую картинку. Всё!
+7
grdesigner
grdesigner
Хороший урок, собственно так и делаю, через Ф12 в Хроме. А то повадились производители мебели и других материалов блокировать скачивание картинки. Вместо этого вставляют маленькую картинку, но при наведении мышью появляется лупа, которая показывает части более крупного изображения.
+2
Zom6ie
Zom6ie
Это прааааально - нас не проведёшь )))
+2
breezeshaman
breezeshaman
Главное не рассказывай как на сайтах текст можно в коде менять. А то я столько уже компроматных скриншотов наделал, на год хватит.

А ещё. Я что то типа такого делаю через правый клик по картинки и отображения кода элемента и там ищу.
0
MastaMan
MastaMan
Тоже вариант, но мой способ надежней. Если картинка прописана через CSS к примеру background-image: url(img/test.jpg), в DOM ее не найдешь ;)
+1
Nesquik123
Nesquik123
Спасибо за урок)
+9
grdesigner
grdesigner
Гугл конечно сильно подосрали с этой темой, я им еще не простил тот случай, когда убрали папки для подписок на ютубе. Хотелось бы посмотреть на лицо того поца и узнать, чем он руководствовался.
+3
MastaMan
MastaMan
Та да, кому эта кнопка мешала) Все кто хочет вытянуть картинку, сделает это.
+2
Blakk77
Blakk77
на гугл в суд подали getty images, типа гугл выдавая не лицензированые картинки по запросам бьет по бизнесу
+1
Kosten
Kosten
Спасибо!!! Обычно вытаскивал картинки через Opera. Команда opera:cache. Теперь можно будет проще!
+5
steve_vai
steve_vai
Есть способ гораздо проще, для хрома советую imagus, моментально грузит исходник без всяких танцев, кроме Явы конечно
+3
pogreblegik
pogreblegik
Для чего эти сложности? ) Есть же разшерения разные для скачки картинок типа Image Downloader или Futkun, где можно отфильтровывать по размеру и прочим параметрам и качать хоть сразу все )
+3
MastaMan
MastaMan
Да нет сложностей, открыл панель Ctrl+Shif+I, нажал Network, качай любую картинку...
Удобно если нет под рукой никаких инструментов, а сделать надо быстро.
+2
MastaMan
MastaMan
Да, к стати как эти расширения работают с динамически-подгружаемым контентом?

Иногда картини подгружаются если сделать какое то определенное действие на странице - к примеру переключение на след. картинку, к примеру Network оно сразу отобразиться.
+1
LogvinovYaroslav
LogvinovYaroslav
Спасибо, выручил )
+8
Gysenka
Gysenka
Что-то не пойму масштабов трагедии. Ещё после прошлых "нововведений" гугла перешла на яндекс.
+1
agnum
agnum
Просто не все Яху любят
0
MastaMan
MastaMan
Это касается не только google. Таким способом можно вытащить любую картинку, с сайта - производителя, к примеру где большое превью появляется только при наведении мышки, выше уже писал об этом grdesigner
+4
Gysenka
Gysenka
Ну, это я через код страницы в 3 клика нахожу. А не подскажете, как быть со страницами, где правая кнопка вообще не работает (Ctrl + Shift + I тоже)? Т.е. не только на изображениях, а вообще на всей странице. Как выйти на код или хоть на что-нибудь?
+1
MastaMan
MastaMan
Такого не может быть что не работает Ctrl + Shift + I. Способ описанный в уроке работает везде и всегда, без доп. инструментов.

По поводу блокировки контекстного меню, можно отключить javascript на странице. Но это не нужно, в Dev Mode -> Network найдете все ;)
+2
epush
epush
Комментарий удален
+1
booka80
booka80
Знал, но не в таких подробностях. Теперь я видел всё. Спасибо!
+8
Dima110
Dima110
В Хроме так тоже вариант https://ibb.co/cifyrS 
0
MARSALA
MARSALA
Комментарий удален
+1
filatkin_m
filatkin_m
Ещё, как вариант, можно пользоваться яндексом. По моему он картинки сейчас лучше стал искать чем гугл.
+2
demkin
demkin
В хроме все проще. F12 - Application - Frames - Top - Images - Листаем пока не найдем то что надо обращая внимание на размер изображения.
0
MastaMan
MastaMan
Да тоже хороший вариант, раньше так делал. Но в Network можно отсортировать по типу и по размеру, что немного удобней ;)
+2
MoJIoKo
MoJIoKo
о госпади что это за танцы с бубном
0
fill_art
fill_art
спасибо, кэп
+2
Genkot
Genkot
Комментарий удален
+1
MastaMan
MastaMan
Баян или не баян, но тем не менее, на работе у меня постоянно спрашивают как это сделать, хоть показывал уже не один раз.
+1
dead_lyric
dead_lyric
вот да, такая же ситуевина в офисе)) хотя раз 100 показывал
+7
Профессор_Хачикян
Спасибо!
На самом деле гугл, правда, херню какую-то сделал, хоть на яндекс переходи))
+1
TRAFFIC_rus
TRAFFIC_rus
Да, отличный способ! Хорош тем, что не надо устанавливать никаких доп плагинов и расширений в браузер. Я, кстати, уже давно таким же методом выкачиваю музыку из ВК. %)
0
MastaMan
MastaMan
Красавчик ;)
+1
nekrobul
nekrobul
Что то сложно, почему бы просто не скопировать ссылку из инспект элемента и сохранить уже от туда привычным методом.
0
MastaMan
MastaMan
Потому что некоторые картинки могут быть вставлены через css , background-image. Способ указанный мной работает для всех браузеров и работает безотказно
+2
shpanenkov
shpanenkov
В хроме можно никуда не лезть. Правой кнопкой по картинке в результате поиска — Открыть изображение в новой вкладке https://yadi.sk/i/DIEnUxfi3SZWKh  Открывается в полном размере, дальше save image as. Всё. Что касается картинки с сайта, если нет «сохранить картинку как», то да, путь в режим разработчика.

Еще лайвхак на сайте икеи, чтобы посмотреть картинку в большом разрешении, сначала открываем превью в новой вкладке, затем в адресной строке меняем 4 на 5 на конце перед разрешением .JPG https://yadi.sk/i/EKyj8-fS3SZXTH 

превью http://www.ikea.com/ru/ru/images/products/foulum-kover-bezvorsovyj-seryj__0555088_PE660124_S4.JPG 
фулл сайз http://www.ikea.com/ru/ru/images/products/foulum-kover-bezvorsovyj-seryj__0555088_PE660124_S5.JPG 
0
MastaMan
MastaMan
По поводу сохранить из гугла через save as большие картинки не получится. Писал в комметах выше.
По пводу сайта IKEA , спасибо полезная инфа.
0
shpanenkov
shpanenkov
Ну как же не получится, если получается? Из поиска, например, "house" больше 8 мегапикс. открываем картинку в новой вкладке —http://www.palmatin.com/wp-content/uploads/2013/06/painted-square-log-house1.jpg  Далее через save as сохраняется 3872 × 2592 px. Что не так делаю, чтобы не получилось?
+1
MastaMan
MastaMan
https://yadi.sk/i/7PkImOx83SeRJm

Проверил, зашел на гугл картинки написал texture поставил больше 12 мегапискелей, превью картинки маленькое, при открытии в новой вкладке такое же маленькое.
+1
shpanenkov
shpanenkov
Поискал еще — ни мне, ни вам

Если превью маленькое, то в новой вкладке открывается тоже маленькая картинка, действительно https://goo.gl/7ocWyk 

Но если превью большое, то в новой вкладке открывается фулл сайз, но так далеко не со всеми :( https://goo.gl/BrhGoW 
+1
MastaMan
MastaMan
Собственно о чем и шла речь. Что раньше можно было открыть любую картинку при помощи кнопки "Открыть в полном размере". Сейчас этой кнопки нет и не все картинки можно открыть или сохранить напрямую из google.
Урок написан не только по тому, что нет этой чудо-кнопочки, но и для тех случаев когда нужно скачать любую картинку с любого сайта-производителя, сайта-текстур и т.д., где нет в контекстном меню опции с сохранением. И все без доп. инструментов.
+1
shpanenkov
shpanenkov
Спасибо, я понял суть поста :) Сам иногда с сайтов дергаю таким образом картинки. Думал, все-таки в отсутствии чудо-кнопки можно сохранить большую картинку, не залезая в Inspect, оказалось, не всегда.
+1
StunBreaker
StunBreaker
старо как мир )
+6
MastaMan
MastaMan
Та 3д максу тоже уже 20 лет, но не все умеют им пользоваться ;D
+2
soskan
soskan
для firefox есть дополнение cacheviewer, в нем сортируешь по jpg и листаешь список кеша до нужной картинки
+3
RD
RD
Легче перейти на Яндекс...
0
aerotroll
aerotroll
+5 за старания
0
artalexbro
artalexbro
ого дискуссия, наверно и мне можно будет написать мануал как сохранить картинку с сайта используя OSX или unix помощью команды Wget сохранить весь сайт и не ковыряться в коде в поиске картинок.))) Но автору +100500 за тему.
+1
GalymN
GalymN
хорошая инструкция. Спасибо!
+1
se7enskills
se7enskills
вы очень добрый человечише. Спасибо!
-2
000111
000111
тупо жму Prt Sc и с буфера гружу в фотошоп - заодно и текстуру можно бесшовной сделать тут же

PS еще есть инструмент ножницы в винде для таких случаев. Назначить горячую клавишу и вуаля
0
MastaMan
MastaMan
Можно, но не всегда это панацея
+1
nick_h-s
nick_h-s
Спаситель!
0
eugene132003
eugene132003
добавлю: в Опере можно сделать скриншот любой части вэбстраницы парой кликов. в боковой панели слева есть значок камеры для этого.
0
MastaMan
MastaMan
В FireFox есть тоже подобная опция нажать на три точки в адресной строке - Сделать скриншот. Но если вы читали внимательно, то есть описание почему такое метод не всегда подходит
0
rodinad
rodinad
Не получается ни в какую, может, кто подскажет
Такое пишет


viverto.pl/:1 Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.
VM929:1 test2
watch.js:32 [Deprecation] chrome.loadTimes() is deprecated, instead use standardized API: Navigation Timing 2.https://www.chromestatus.com/features/5637885046816768. 
watch.js:32 [Deprecation] chrome.loadTimes() is deprecated, instead use standardized API: Paint Timing.https://www.chromestatus.com/features/5637885046816768. 
VM1009:1 test2


0
MastaMan
MastaMan
А что вы хотите сделать, напишите поподробней. И для какого сайта хотите применить?
0
rodinad
rodinad
Гугл хром, хочу сохранить картинку, у которой как раз нет кнопки "сохранить как". Да вообще на разных сайтах пробовала, везде одно и тоже, вроде все по инструкции нажимаю
0
MastaMan
MastaMan
Напишите мне в личку, возможно вы что то не так делаете...
+1
dovran
dovran
Спасибо, очень полезно!
0
nnnkkk
nnnkkk
Спасибо огромное! Очень выручили.