픽사베이 이미지 WEBP 변환 방법

픽사베이 이미지 WEBP 변환

블로그 이미지 최적화에서 가장 효과적인 방법 중 하나가 바로 WEBP 포맷으로 변환하는 것입니다. 이 글에서는 WEBP가 무엇인지, 왜 블로거에게 필수인지, 그리고 픽사베이 이미지를 WEBP로 변환하는 방법을 단계별로 안내합니다. 직접 만든 변환 도구도 함께 소개합니다.

WEBP 이미지란 무엇인가?

WEBP는 구글이 2010년에 공개한 차세대 이미지 포맷입니다. 원래 On2 Technologies가 개념을 만들고 구글이 인수해 발전시켰습니다.

WEBP의 핵심 장점은 화질을 유지하면서 파일 크기를 줄인다는 것입니다.

포맷특징WEBP 대비 용량
JPG사진에 적합, 손실 압축약 25~35% 더 큼
PNG투명 배경 지원, 무손실약 26% 더 큼
GIF애니메이션 지원훨씬 더 큼
WEBP위 세 가지 특징 모두 지원가장 작음

블로그 페이지 로딩 속도는 구글 SEO 순위에 직접적인 영향을 줍니다. 이미지 용량을 줄이면서도 화질을 유지할 수 있는 WEBP는 블로거에게 사실상 필수 포맷입니다.

픽사베이 이미지란?

픽사베이(Pixabay)는 저작권 걱정 없이 무료로 사용할 수 있는 고해상도 이미지를 제공하는 사이트입니다. 상업적 이용도 가능하며 블로그 썸네일이나 본문 이미지로 많이 활용됩니다.

픽사베이에서 다운로드한 이미지는 기본적으로 JPG 또는 PNG 포맷으로 제공됩니다. 이를 바로 WEBP로 변환해서 업로드하면 블로그 속도 최적화에 효과적입니다.

WEBP 변환 방법 3가지

방법 1: iamshoppist 내장 변환기 사용 (가장 간단)

별도 프로그램 설치 없이 바로 변환 가능합니다.

👉 Convert JPG to WEBP – 바로 변환하기

  1. 위 링크 접속
  2. JPG 또는 PNG 이미지 업로드
  3. WEBP 파일로 다운로드

방법 2: 픽사베이 API를 활용한 검색+변환 통합 도구

픽사베이 API를 연동하면 이미지 검색부터 WEBP 다운로드까지 한 번에 처리할 수 있습니다. 아래는 생성형 AI의 도움을 받아 직접 구현한 코드입니다.

픽사베이 API 키 발급 방법:

  1. 픽사베이 API 페이지 접속
  2. 로그인 후 GET STARTED 클릭
  3. 페이지 하단 초록색 박스에서 API 키 확인 및 복사

아래 코드에서 YOUR_API_KEY 부분을 발급받은 API 키로 교체하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>픽사베이 이미지 검색 및 WEBP 다운로드</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        #image-results img { width: 100px; margin: 5px; cursor: pointer; }
        #selected-images { margin-top: 20px; border: 1px solid #ccc; padding: 10px; display: flex; flex-wrap: wrap; }
        #selected-images img { width: 100px; margin: 5px; cursor: default; }
    </style>
</head>
<body>
    <h1>이미지 검색 및 다운로드</h1>
    <input type="text" id="search" placeholder="이미지 검색">
    <button onclick="searchImages()">검색</button>
    <div id="image-results"></div>
    <h2>선택한 이미지</h2>
    <div id="selected-images"></div>
    <button id="download-zip" style="display:none;">ZIP 다운로드</button>
    <button id="download-webp" style="display:none;">WEBP 다운로드</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script>
        let selectedImages = [];
        async function searchImages() {
            const query = document.getElementById('search').value;
            const response = await fetch(`https://pixabay.com/api/?key=YOUR_API_KEY&q=${encodeURIComponent(query)}&image_type=photo`);
            const data = await response.json();
            displayImages(data.hits);
        }
        function displayImages(images) {
            const resultsDiv = document.getElementById('image-results');
            resultsDiv.innerHTML = '';
            selectedImages = [];
            images.forEach(image => {
                const imgElement = document.createElement('img');
                imgElement.src = image.webformatURL;
                imgElement.alt = image.tags;
                imgElement.onclick = () => selectImage(image.largeImageURL, imgElement);
                resultsDiv.appendChild(imgElement);
            });
        }
        function selectImage(url, imgElement) {
            if (!selectedImages.includes(url)) {
                selectedImages.push(url);
                const selectedImg = document.createElement('img');
                selectedImg.src = imgElement.src;
                selectedImg.alt = imgElement.alt;
                selectedImg.onclick = () => removeImage(url, selectedImg);
                document.getElementById('selected-images').appendChild(selectedImg);
            }
            updateDownloadButtons();
        }
        function removeImage(url, imgElement) {
            selectedImages = selectedImages.filter(image => image !== url);
            imgElement.remove();
            updateDownloadButtons();
        }
        function updateDownloadButtons() {
            const has = selectedImages.length > 0;
            document.getElementById('download-zip').style.display = has ? 'block' : 'none';
            document.getElementById('download-webp').style.display = has ? 'block' : 'none';
        }
        document.getElementById('download-webp').onclick = async () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const images = await Promise.all(selectedImages.map(async url => {
                const img = new Image();
                img.crossOrigin = 'Anonymous';
                img.src = url;
                await img.decode();
                return img;
            }));
            canvas.width = images[0].width;
            canvas.height = images[0].height;
            const webpBlobs = await Promise.all(images.map(img => {
                ctx.drawImage(img, 0, 0);
                return new Promise(resolve => canvas.toBlob(resolve, 'image/webp'));
            }));
            const zip = new JSZip();
            webpBlobs.forEach((blob, i) => zip.file(`image${i+1}.webp`, blob));
            const content = await zip.generateAsync({ type: 'blob' });
            const a = document.createElement('a');
            a.href = URL.createObjectURL(content);
            a.download = 'images.webp.zip';
            a.click();
        };
    </script>
</body>
</html>

방법 3: JSBIN으로 테스트하기

위 코드를 바로 테스트해보고 싶다면 JSBIN.COM을 활용하세요.

  1. JSBIN 접속 후 상단 HTML 탭 클릭
  2. 왼쪽 창에 위 코드 전체 붙여넣기
  3. YOUR_API_KEY 부분을 발급받은 픽사베이 API 키로 교체
  4. 우측 화면에서 실시간으로 실행 결과 확인

JSBIN에서 픽사베이 WEBP 변환 테스트 화면

WEBP 변환 시 알아두면 좋은 팁

  • WordPress 업로드 시: WEBP 파일을 직접 미디어 라이브러리에 업로드하면 바로 사용 가능합니다 (WordPress 5.8 이상)
  • 파일명 설정: 업로드 전 파일명을 키워드로 변경하면 이미지 SEO에 유리합니다 (예: webp-image-convert.webp)
  • alt 텍스트: 이미지 업로드 후 반드시 alt 텍스트를 키워드 중심으로 작성하세요
  • 용량 기준: 블로그 본문 이미지는 100KB 이하, 썸네일은 50KB 이하를 목표로 하면 좋습니다
  • 브라우저 호환성: Chrome, Firefox, Edge, Safari 모두 WEBP를 지원합니다 (2020년 이후)

정리: 어떤 방법을 선택할까?

방법난이도추천 대상
내장 변환기 사용⭐ 쉬움이미 가진 이미지를 빠르게 변환할 때
API 통합 도구⭐⭐ 보통픽사베이 검색+변환을 한 번에 처리할 때
JSBIN 테스트⭐⭐ 보통코드 수정 및 커스터마이징할 때

블로그 이미지를 WEBP로 관리하면 페이지 속도가 개선되고 구글 Core Web Vitals 점수에도 긍정적인 영향을 줍니다. 처음에는 번거롭게 느껴질 수 있지만 습관이 되면 SEO 최적화의 가장 쉬운 방법 중 하나입니다.6

관련 게시물

error: Content is protected !!

Contents

→ 바로가기
위로 스크롤