HTML 이미지 추출 / 워터마크 도구 | 구글 블로그 이미지 ZIP 다운로드

HTML IMAGE TOOL

이미지 또는 HTML을 붙여 넣으세요.
이미지 추출과 워터마크를 한 번에.

구글 블로그와 일반 HTML 속 이미지를 자동으로 찾아 원본 ZIP으로 꺼내거나, 문구 / 로고 워터마크를 일괄 적용해 다운로드합니다.

HTML 붙여넣고 시작 원본 이미지 ZIP 추출 보기

HTML IMAGE PROCESSOR AUTO

HTML INPUT

<img src="cover.jpg"> <img srcset="photo@2x.jpg 2x"> background-image:url(hero.jpg)

자동 검출 7개다운로드 준비

원본 이미지 ZIP 워터마크 ZIP HTML 내보내기

자동 검출img / srcset / CSS 배경

일괄 워터마크문구 또는 로고 한 번에 적용

다양한 출력원본 ZIP / 워터마크 ZIP / HTML

입력한 HTML과 이미지 파일은 서버에 업로드하거나 저장하지 않습니다. 워터마크 합성과 다운로드 파일 생성은 현재 브라우저 안에서 처리됩니다.

처음 사용하셔도 쉽게 따라할 수 있습니다.구글 블로그 HTML 붙여넣기부터 워터마크 ZIP / HTML 저장까지 순서대로 안내합니다. 자세한 사용 순서 보기

1블로그 HTML 복사구글 블로그 글 편집 화면에서 HTML 보기로 바꾼 뒤 전체 코드를 복사해서 1단계 입력창에 붙여넣습니다.

2미리보기 / 자동검출미리보기 / 이미지 자동검출 버튼을 누르면 본문 이미지, srcset, CSS 배경 이미지까지 한꺼번에 찾습니다.

3검출 이미지 확인왼쪽 목록에서 필요한 이미지에만 체크하세요. 체크된 이미지만 ZIP 다운로드와 HTML 치환에 사용됩니다.

4워터마크 디자인 맞추기메인 문구, 서브 문구, 글꼴, 로고, 위치, 크기, 투명도를 조절하면서 중앙 미리보기에서 결과를 바로 확인합니다.

5원본 ZIP 또는 워터마크 ZIP 저장워터마크 없이 원본만 필요하면 원본 이미지 ZIP 추출, 워터마크 적용 결과가 필요하면 워터마크 이미지 ZIP 다운로드를 누르세요.

6수정 HTML까지 내보내기이미지 주소가 바뀐 HTML이 필요하면 HTML로 내보내기 또는 HTML+이미지 ZIP을 사용하면 됩니다.

가장 쉬운 사용법: 처음에는 투명도 0.20 · 크기 1.0 · 가운데 또는 오른쪽 아래부터 시작해 보세요. 대부분의 블로그 이미지에서 가장 무난하게 보입니다.
중요: 외부 이미지가 막혀 보이지 않으면 관련 이미지 추가 / 대체 버튼으로 해당 이미지를 직접 연결하면 안정적으로 작업할 수 있습니다.

1. HTML 입력

HTML을 붙여 넣으면 본문 이미지, srcset, CSS 배경 이미지를 자동으로 찾아 추출합니다.

0자

상대경로 기준 URL

CSS 배경 이미지도 검출 파일명으로 자동 대체

HTML을 입력한 뒤 자동검출 버튼을 누르세요.

2. HTML 전체 미리보기

페이지는 안전을 위해 JavaScript를 실행하지 않습니다.

미리보기 폭

표시 배율

HTML 미리보기가 없습니다자동검출 버튼을 누르세요.

2. 검출된 이미지

HTML에서 찾은 이미지입니다. 체크된 이미지만 원본 ZIP 또는 워터마크 ZIP에 포함됩니다.

0개

검출된 이미지가 없습니다.

3. 출력 미리보기

원본 이미지 크기를 유지하며 워터마크만 합성합니다. 단일 배치에서는 캔버스를 드래그해 위치를 옮길 수 있습니다.

선택 없음

편집할 이미지가 없습니다왼쪽에서 불러온 이미지를 선택하세요.

-원본 크기

-원본 형식

-출력 가능 상태

워터마크 세부 설정

설정 변경은 즉시 현재 이미지에 반영됩니다.

사용

배치 방식

메인 문구

서브 문구

글꼴

힐링편의점 / 생활 유틸 플랫폼

추천: 일반 워터마크는 Pretendard 또는 Noto Sans KR이 가장 선명합니다. 학교안심체처럼 보유한 TTF / OTF / WOFF 파일은 '내 글꼴 추가'에서 불러올 수 있습니다.

기본 글꼴은 프리텐다드입니다.

기본 위치

투명도

크기

회전

문구 색상

그림자 외곽선 반투명 판 모든 이미지에 같은 위치

PNG / JPG / WebP / GIF / SVG를 지원합니다. 투명 배경 로고는 PNG 또는 SVG가 가장 안정적입니다.

로고 배경제거가 필요한가요?배경을 제거한 PNG로 저장한 뒤 여기에서 로고로 불러오세요.

배경제거 도구 열기

추가한 로고가 없습니다.

4. 이미지 추출 / 다운로드

원본 이미지만 꺼내거나, 워터마크를 적용한 이미지로 다운로드할 수 있습니다.

HTML 이미지 원본 그대로 꺼내기워터마크를 넣지 않고 체크한 이미지만 한꺼번에 ZIP으로 추출합니다.

워터마크 적용 이미지 다운로드

다운로드 형식

품질

파일명 앞부분

자동검출 후 다운로드 상태가 여기에 표시됩니다.

HTML EXPORT

HTML 내보내기

워터마크가 적용된 이미지 주소로 원본 HTML을 자동 교체해 바로 다운로드합니다.

단일 HTML 이미지를 HTML 안에 포함해 파일 하나로 내려받습니다.

HTML 패키지 ZIP index.html과 images 폴더를 ZIP으로 내려받습니다.

먼저 HTML을 자동검출한 뒤, 내보낼 이미지가 체크되어 있어야 버튼이 활성화됩니다.

구글 블로그 활용법과 작업 팁처음 사용하는 분도 헷갈리지 않게 단계별로 정리했습니다.

1. 구글 블로그 글에서 이미지 꺼내는 방법

구글 블로그 글 편집 화면에서 HTML 보기로 전환하고 전체 코드를 복사해 이 도구의 HTML 입력창에 붙여넣습니다.
미리보기 / 이미지 자동검출 버튼을 누르면 본문 이미지뿐 아니라 srcset, CSS 배경 이미지까지 자동으로 찾습니다.
이미지 목록이 나오면 필요한 것만 체크한 뒤 원본 이미지 ZIP 추출을 눌러 한 번에 저장하면 됩니다.

2. 워터마크를 자연스럽게 넣는 기본값

일반적인 블로그 썸네일이나 본문 이미지는 검정색 / 투명도 0.20 / 크기 1.0 / 가운데 또는 오른쪽 아래부터 시작하면 가장 무난합니다.
글씨가 너무 튀면 투명도를 낮추고, 이미지가 작으면 크기를 약간 줄이는 식으로 먼저 맞춰보세요.
반복형 워터마크는 도용 방지에는 좋지만 이미지가 복잡해 보일 수 있으니, 블로그용은 보통 한 곳에 배치가 더 깔끔합니다.

3. 로고를 쓸 때 가장 쉬운 방법

로고는 가능하면 투명 PNG 또는 SVG를 사용하는 것이 가장 깔끔합니다.
배경이 있는 로고라면 먼저 배경제거 도구에서 정리한 뒤 이 도구에서 로고로 추가하면 결과가 훨씬 좋아집니다.
로고와 문구를 같이 쓰는 경우에는 로고를 너무 크게 올리지 말고, 글자보다 약간 작거나 비슷한 크기로 맞추면 안정적입니다.

4. 자주 막히는 문제 해결

외부 이미지가 안 보이거나 로드가 실패하면 관련 이미지 추가 / 대체 기능으로 해당 파일을 직접 연결하세요.
HTML까지 같이 내려받고 싶다면 HTML로 내보내기를, HTML 파일과 images 폴더를 같이 보관하려면 HTML+이미지 ZIP을 사용하면 됩니다.
작업이 끝난 뒤에는 현재 이미지 1장만 저장할지, 체크한 이미지 전체 ZIP으로 저장할지 먼저 확인하면 실수를 줄일 수 있습니다.