PDF 페이지를 웹 사이트용 이미지로 변환하려면 일반 DPI 설정이 아닌 특정 픽셀 크기가 필요합니다. 300DPI로 변환된 PDF 페이지는 웹사이트 레이아웃이 표시할 수 있는 것보다 훨씬 더 큰 수천 픽셀 너비의 이미지를 생성합니다. 해당 이미지를 웹사이트에 업로드하면 대역폭이 낭비되고 페이지 로딩 속도가 느려집니다. 웹 사이트 레이아웃에 필요한 정확한 픽셀 크기로 변환하면 빠르게 로드되고 선명하게 표시되는 이미지가 생성됩니다. PDF에서 이미지로 웹 사용을 위한 변환은 페이지에서 이미지가 차지할 특정 위치에 출력 크기를 일치시키는 것입니다.
주요 내용
웹사이트 이미지 크기는 인치가 아닌 픽셀 단위로 측정됩니다. PDF 페이지를 올바른 픽셀 크기로 변환하려면 웹 사이트에서 이미지의 최대 표시 너비를 결정한 다음 페이지의 가로 세로 비율을 유지하면서 변환 출력을 해당 너비로 설정하십시오. 표준 웹 사이트 콘텐츠 너비의 범위는 모바일에 최적화된 레이아웃의 경우 720픽셀부터 전체 너비 데스크톱 레이아웃의 경우 1920픽셀입니다. 이러한 특정 치수로 변환하면 불필요하게 크거나 실망스러울 정도로 흐릿하지 않은 이미지가 생성됩니다.
웹사이트에 필요한 정확한 픽셀 크기 결정
자동 이미지 크기 조정 기능이 있는 콘텐츠 관리 시스템을 사용하는 웹사이트의 경우 디스플레이 크기보다 높은 해상도로 변환하고 CMS에서 크기 조정을 처리하도록 하세요. 단일 업로드로 여러 크기를 생성하는 CMS에는 생성된 가장 큰 크기를 지원할 수 있을 만큼 큰 소스 이미지가 필요합니다. CMS에서 생성된 가장 큰 크기의 두 배로 변환하면 생성된 모든 변형이 선명해집니다.
반응형 웹사이트의 경우 이미지 표시 너비는 다양한 화면 크기에 따라 변경됩니다. 이미지가 표시될 최대 너비로 변환합니다. 이는 일반적으로 콘텐츠 이미지의 경우 1200~1400픽셀의 데스크톱 중단점입니다. 브라우저는 더 작은 화면에 맞게 이미지 크기를 효율적으로 축소합니다. 더 큰 변환으로 인한 추가 파일 크기는 축소된 버전을 보게 될 모바일 사용자를 포함하여 모든 사용자에게 제공됩니다. 대역폭에 민감한 구현의 경우 반응형 이미지 마크업을 사용하여 다양한 중단점에서 다양한 이미지 크기를 제공합니다.
웹사이트의 콘텐츠 영역 너비를 픽셀 단위로 측정합니다. 브라우저에서 웹사이트를 열고 콘텐츠 영역을 마우스 오른쪽 버튼으로 클릭한 다음 검사를 선택하여 개발자 도구를 엽니다. 콘텐츠 컨테이너의 계산된 너비가 상자 모델 다이어그램에 표시됩니다. 이는 이미지의 최대 너비입니다. 웹 사이트가 반응형이고 다양한 화면 크기에 적응하는 경우 가장 넓은 중단점(일반적으로 1200~1400픽셀 너비의 데스크톱 레이아웃)을 선택합니다. 이 너비의 이미지는 데스크탑에서 선명하게 보이고 태블릿과 휴대폰에서는 비례적으로 축소됩니다.
이미지 갤러리 및 라이트박스의 경우 전체 화면 보기를 지원하려면 더 높은 해상도로 변환하세요. 그리드 레이아웃에서 너비 400픽셀로 표시되는 갤러리 이미지를 전체 화면으로 보려면 클릭하면 너비 1600픽셀로 확장되어야 할 수도 있습니다. 전체 화면 표시 크기로 변환하면 확대된 이미지가 선명해집니다. 그리드 보기는 브라우저가 잘 처리하는 축소된 버전을 로드합니다. 갤러리 표시 크기로 변환하고 동일한 이미지를 전체 화면 보기로 제공하면 확대가 흐릿해집니다. 기본 보기뿐만 아니라 웹 사이트의 최대 디스플레이 시나리오를 고려하십시오.
정확한 픽셀 크기로 PDF 페이지 변환
텍스트와 이미지가 모두 포함된 PDF 페이지의 경우 표시 너비를 2배로 변환하면 높은 DPI 화면에서 텍스트 선명도가 유지됩니다. 1x 디스플레이 너비로 렌더링된 텍스트는 문자 형태의 미세한 획이 추가 픽셀 밀도의 이점을 누리기 때문에 Retina 디스플레이에서 약간 부드러워 보일 수 있습니다. 2x 변환은 파일 크기를 대략 두 배로 늘리므로 텍스트 가독성이 우선시되는 문서 페이지에서는 가치 있는 절충안입니다. 주로 사진으로 구성된 페이지의 경우 눈이 사진 콘텐츠의 해상도 차이에 덜 민감하므로 1x 변환이면 충분합니다.
PDF-이미지 변환 도구를 열고 출력 크기 설정을 찾으십시오. 일부 도구는 너비 1200픽셀과 같은 픽셀 크기를 사용합니다. 다른 사람들은 실제 페이지 크기와 결합된 DPI를 사용합니다. 도구가 DPI를 사용하는 경우 대상 픽셀 너비를 페이지 너비(인치)로 나누어 필요한 DPI를 계산합니다. Letter 크기 페이지의 너비는 8.5인치입니다. 너비가 1200픽셀인 이미지를 생성하려면 DPI를 1200을 8.5로 나눈 값(약 141DPI)으로 설정합니다. 141 DPI를 입력하면 웹 사이트에 필요한 정확한 1200픽셀 너비가 생성됩니다.
기사나 블로그 게시물에 이미지가 포함된 디지털 출판의 경우 디스플레이 너비를 2배로 변환하여 높은 DPI Retina 및 유사한 디스플레이를 지원합니다. 800픽셀 너비의 이미지를 표시하는 콘텐츠 영역에는 1600픽셀 너비의 소스 이미지가 필요합니다. 브라우저는 2x 이미지를 높은 DPI 화면에 제공하고 이를 800픽셀 표시 영역으로 축소하여 800픽셀 소스 이미지보다 더 선명한 텍스트와 그래픽을 생성합니다. 2x 변환은 파일 크기를 두 배로 늘리지만 최신 화면에서는 눈에 띄게 더 나은 품질을 생성합니다. WukongPDF의 PDF-이미지 변환기는 픽셀 너비를 직접 입력으로 허용하므로 대상 너비를 입력하면 도구가 해당 DPI를 자동으로 계산합니다.
웹사이트 제공에 적합한 이미지 형식 선택
| 형식 | 에 가장 적합 | 압축 | 참고 |
|---|---|---|---|
| PNG | 텍스트, 차트, 라인 아트 | 무손실 | 더 큰 파일, 선명한 텍스트, 투명도 지원 |
| JPEG | 사진, 스캔한 페이지 | 손실이 있는 | 더 작은 파일, 사실적, 투명도 없음 |
| 웹P | 최신 웹사이트, 모든 콘텐츠 | 둘 다 | 아주 오래된 브라우저에서는 지원되지 않는 최고의 압축 |
| AVIF | 최첨단 웹 성능 | 둘 다 | 가장 작은 파일, PDF 변환을 위한 제한된 도구 지원 |
대부분의 PDF를 웹사이트로 변환하는 경우 WebP는 품질과 파일 크기 사이에서 최상의 균형을 제공합니다. 일반적인 문서 페이지의 1200픽셀 너비 WebP 이미지는 시각적으로 동일한 품질을 유지하면서 동등한 PNG보다 40~60% 더 작습니다. 웹 사이트가 WebP를 지원하지 않는 경우 텍스트가 포함된 문서 페이지에는 PNG가 차선책이고, 사진이 포함된 페이지에는 85~90% 품질의 JPEG가 차선책입니다.
웹사이트 갤러리용 다중 페이지 PDF 일괄 변환
수백 페이지로 구성된 매우 큰 PDF의 경우 일괄 변환을 50페이지 그룹으로 나눕니다. 일부 변환 도구에는 매우 큰 배치에서 오류를 일으키는 메모리 제한이 있습니다. 더 작은 그룹의 처리에는 동일한 총 시간이 걸리지만 전체 배치를 다시 시작해야 하는 400페이지 중 347페이지의 변환 실패로 인한 좌절감을 방지할 수 있습니다.
웹 사이트 이미지 갤러리가 될 여러 페이지로 구성된 PDF의 경우 모든 페이지를 동일한 픽셀 크기로 일괄 작업으로 변환합니다. 일괄 처리는 갤러리 레이아웃에 균일하게 표시되는 일관된 크기의 이미지를 생성합니다. document-page-01.webp, document-page-02.webp 등과 같이 페이지 번호를 포함하는 일관된 명명 규칙을 사용하여 출력 파일의 이름을 지정합니다. 이 명명 규칙은 순차적으로 번호가 매겨진 이미지 파일을 예상하는 갤러리 플러그인 및 사용자 정의 JavaScript와 쉽게 통합됩니다.
변환 후 이미지 최적화 도구를 통해 이미지를 실행하면 눈에 띄는 품질 손실 없이 파일 크기를 더욱 줄일 수 있습니다. ImageOptim, TinyPNG 및 Squoosh와 같은 도구는 PDF 변환기가 적용하지 않았을 수 있는 추가 압축을 적용합니다. 두 번째 압축 단계는 PNG 및 JPEG 파일의 파일 크기를 추가로 20~40% 줄일 수 있습니다. 50개 문서 페이지로 구성된 갤러리의 경우 누적 대역폭 절감은 웹 사이트 호스팅 비용과 방문자의 페이지 로드 시간 모두에 의미가 있습니다.
자주 묻는 질문
웹용으로 PDF 페이지를 sRGB 색상 공간의 이미지로 변환해야 합니까? 예. 대부분의 웹사이트 이미지는 웹 브라우저의 표준 색상 공간인 sRGB 색상 공간에 있어야 합니다. sRGB로 변환하면 다양한 브라우저와 운영 체제에서 일관된 색상 표현이 보장됩니다. PDF가 CMYK 또는 Adobe RGB 색상 공간을 사용하는 경우 sRGB로 변환하면 색상이 약간 바뀔 수 있습니다. 게시하기 전에 변환된 이미지를 브라우저에서 미리 보고 색상이 적합한지 확인하세요.
웹사이트가 반응형이고 이미지 표시 너비가 화면 크기에 따라 변경되면 어떻게 되나요?
이미지가 나타날 최대 디스플레이 너비(일반적으로 데스크톱 중단점)로 변환합니다. 브라우저는 더 작은 화면에 맞게 이미지 크기를 자동으로 줄입니다. 휴대폰에서 400픽셀로 표시되는 1200픽셀 너비의 이미지는 확대되는 것이 아니라 축소되기 때문에 선명하게 보입니다. 데스크톱에 최적화된 변환으로 인한 추가 파일 크기는 모든 사용자에게 제공되며 이는 전체 해상도 범위를 지원하는 데 따른 절충안입니다. 대역폭에 민감한 구현의 경우 다양한 중단점에서 다양한 이미지 크기를 제공하는 반응형 이미지 마크업을 사용하세요.
PDF 페이지를 배경이 투명한 이미지로 변환할 수 있나요?
PDF 페이지 자체에 배경이 없는 경우에만 해당됩니다. 대부분의 PDF 페이지에는 명시적인 흰색 배경이 있으며 이는 이미지에서 흰색 배경으로 변환됩니다. 투명한 배경의 이미지를 생성하려면 변환하기 전에 PDF에서 페이지 배경을 제거하십시오. 이를 위해서는 페이지 콘텐츠 스트림에서 배경 개체를 삭제할 수 있는 PDF 편집기가 필요합니다. 결과 PDF 페이지의 배경은 투명하며, PNG로 변환하면 투명도가 유지됩니다.
일반적으로 권장되는 대로 PDF 페이지를 웹용 72 DPI 이미지로 변환해야 합니까?
72 DPI 권장 사항은 오래되었습니다. 이는 대부분의 컴퓨터 모니터의 물리적 픽셀 밀도가 인치당 약 72픽셀이었을 때 발생했습니다. 최신 모니터의 픽셀 밀도는 인치당 100~200픽셀 이상입니다. PDF 페이지를 72 DPI로 변환하고 최신 모니터에서 100% 확대/축소하여 표시하면 눈에 띄게 부드러운 이미지가 생성됩니다. 고정 DPI 대신 위에서 설명한 픽셀 크기 방법을 사용합니다. 올바른 DPI는 특정 웹 사이트 레이아웃에 적합한 픽셀 크기를 생성하는 것입니다.