본문 바로가기
  • 디자이너의 시선으로 소소한 이야기를 기록합니다.
팁/Web

웹사이트에서 이미지 다운로드 받는 방법(Feat. 크롬 브라우저)

by W디자이너 2021. 4. 2.

웹사이트에서 필요한 이미지를 다운로드하여야 할 경우가 생기는데요. 일반적인 이미지 같은 경우는 마우스 우클릭으로 이미지를 저장받을 수 있지만 특정 이미지 같은 경우는 우클릭해도 이미지 저장 버튼이 없거나 다운로드하여도 웹페이지 전부 다운로드할 때가 있어요.

이미지 다운로드 불가
대략 난감ㅠ

그래서 이제부터 해당 웹사이트에서 이미지 다운로드하는 방법을 알려 드릴게요.

(디자이너인 저는 클라이언트의 브랜드 웹사이트에서 이미지를 받아서 이벤트 배너를 만들 때 많이 사용했던 방법입니다)

 

 

 

목차

     

     

    웹사이트 마우스 우클릭 금지 해제하는 방법은 아래 링크에서 확인해보세요.

    2021.03.27 - [팁/Web] - 마우스 우클릭 사용금지 해제하기(크롬 브라우저)

     

    마우스 우클릭 사용금지 해제하기(크롬 브라우저)

    웹사이트에 설정된 마우스 우클릭 사용금지를 해제하는 방법을 알려드릴게요. 해당 방법은 크롬 웹브라우저에서 쉽게 가능합니다. 크롬에서 마우스 우클릭 사용금지 해제하기 01. 키보드 F12를

    wdesigner.tistory.com

     

     

     

     

    구분선

    01. 웹사이트에서 원하는 이미지 선택해서 다운로드하는 방법

     선행 조건 : 크롬 브라우저가 필요 

     

    ① 이미지를 다운로드할 웹사이트를 브라우저로 실행해서 들어갑니다. (블라자드 웹사이트로 예시로 들겠습니다)

     

     

    ② 키보드 F12 눌러 주거나 마우스 우클릭 후 검사 버튼을 눌러도 됩니다. (개발자 도구를 실행하는 방법입니다)

     

    ③ 실행된 개발자 도구의 상단에 마우스 아이콘을 클릭 -> 다운로드하고 싶은 이미지 선택

    개발자 도구 열고 다운로드 받고 싶은 이미지 선택

     

    ④ 이미지를 선택하시면 개발자 도구에서 image가 들어간 링크를 확인 -> 해당 링크를 우클릭 후 Open in new tab를 클릭

    (웬만해서는 태그나 링크에 image라는 텍스트가 들어가 있어서 찾으시면 돼요)

    링크 우클릭 후 Open in new tab 클릭

     

    ⑤ 해당 이미지만 있는 새로운 탭이 열림 -> 마우스 우클릭 후 이미지 저장

    이미지를 다른 이름으로 저장 클릭

     

     

     

     

    구분선

    02. 웹사이트에서 모든 이미지 소스 확인하고 다운로드하는 방법

     선행 조건 : 크롬 브라우저가 필요 

     

    ① 이미지를 다운로드할 웹사이트를 크롬 브라우저로 실행해서 들어갑니다. (블라자드 웹사이트로 예시로 들겠습니다)

     

     

    키보드 F12 눌러 주거나 마우스 우클릭 후 검사 버튼을 눌러도 됩니다. (개발자 도구를 실행하는 방법입니다)

     

    ③ 실행된 개발자 도구의 상단에 Sources 버튼을 클릭 -> 여러 폴더 중 img 폴더 찾아서 오픈(선택 이미지에 image 텍스트가 있는 것처럼 웬만한 웹사이트의 이미지는 img의 폴더에 들어 있습니다. 그리고 img는 image의 약자입니다)

    개발자 도구에서 Sources 클릭 후 img 폴더 클릭

     

    ④ img 폴더 하단에 있는 파일들이 모두 이미지 파일이고 웹사이트에 들어간 버튼부터 로고, 배경 이미지까지 확인할 수 있어요.

    원하는 이미지 파일에 마우스 우클릭  Open in new tab를 클릭

    이미지 파일 클릭 후 Open in new tab 클릭

     

    ⑤ 해당 이미지만 있는 새로운 탭이 열림 -> 마우스 우클릭 후 이미지 저장

    이미지를 다른 이름으로 저장

     

     

     

     

    구분선

    03. 크롬 확장 프로그램으로 모든 이미지 한 번에 다운로드하는 방법

     선행 조건 : 크롬 브라우저가 필요 

     

    ① 크롬 확장 프로그램 Image Downloader 설치합니다.

    설치 링크 : https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj/related

     

    Image Downloader

    Browse and download images on the web

    chrome.google.com

    Image Downloader를 Chrome에 추가

     

    Image Downloader 설치하면 나오는 설정 옵션은 Save 클릭합니다.(추후 사용 중에도 언제든지 옵션은 변경 가능)

    Image Downloader 설정 저장

     

    ③ 이미지를 다운로드할 웹사이트에서 Image Downloader 확장 프로그램을 클릭하면 됩니다.

    Image Downloader 확장 프로그램 클릭

     

    ④-1. 원하시는 이미지만 다운로드하여도 되고 여래 개의 이미지를 체크한 뒤 다운로드하여도 됩니다.

    a : 옵션을 설정할 수 있음

    b : 원하는 이미지 사이즈를 필터링할 수 있음

    c : 해당 이미지를 1개를 다운로드할 수 있음

    d : 여러 개의 이미지를 체크한 뒤 다운로드할 수 있음

    Image Downloader로 이미지 다운로드

     

    ④-2. Select all를 체크하시면 전체 이미지를 다운로드할 수 있습니다.

    Image Downloader의 Select all 클릭

     

    Tip. 전체 이미지를 편리하게 다운로드하는 방법

    Image Downloader 메세지

    전체 이미지를 다운 받을 경우 해당 메시지가 보입니다.

     

    take a quick look at your brower settings.
    If the Ask where to save each file before downloading option is checked, proceeding might open a lot of popup windows. Continue with the download?

     

     

    이미지를 다운 받을 때마다 저장 위치를 물어본다는 의미입니다. 즉, 20개의 이미지를 다운로드할 경우 20번을 물어본다는 뜻입니다.

    이럴 때는 '크롬 설정 > 고급_다운로드 > 다운로드 전에 각 파일의 저장 위치 확인'을 해제하면 됩니다. 당연히 이미지 다운로드 위치는 미리 설정해야 원하는 폴더에 이미지를 다운로드할 수 있습니다.

    이미지 저장 위치 설정하기
    다운로드 위치 설정
    썸네일 이미지

     

     

     

     

    2023.02.08 - [팁/Web] - 유튜브 영상 PC, 모바일에서 다운로드 방법(프로그램 필요 없음)

     

    유튜브 영상 PC, 모바일에서 다운로드 방법(프로그램 필요 없음)

    유튜브에는 정말 많은 영상들이 있는데, 그중 광고 없이 보거나 개인적으로 소장하고 싶은 영상들이 있습니다. 그런데 유튜브 자체적으로 영상을 저장할 수 있는 기능을 지원하고 있지 않습니

    wdesigner.tistory.com

     

    2021.06.28 - [팁/Web] - UI 디자이너에게 추천하는 크롬 확장 프로그램

     

    UI 디자이너에게 추천하는 크롬 확장 프로그램

    디자이너들에게 도움이 되는 크롬 확장 프로그램을 소개합니다. 01. 서핏(디자인 정보) 다양한 플랫폼에서 생성된 디자인 정보를 한 곳에서 확인할 수 있습니다. 그리고 기획, 개발, 마케팅 등 IT

    wdesigner.tistory.com

     

    2021.07.28 - [팁/Web] - 크롬 확장 프로그램 단축키로 실행하기

     

    크롬 확장 프로그램 단축키로 실행하기

    크롬 확장 프로그램에 단축키를 설정해서 쉽고 빠르게 실행할 수 있습니다. 지금부터 사용 방법을 설명해 드릴게요. 크롬 확장 프로그램 단축키 설정 페이지 링크 : chrome://extensions/shortcuts 이동

    wdesigner.tistory.com

     

    반응형