픽사베이 이미지를 WEBP로 변환하여 다운 받는 방법
WEBP 사진 변환은 블로그를 쓰는 입장이나 블로그 내용을 보는 입장이나 해당 블로그 글이 빠르게 검색이 되길 원한다. 특히 한국과 같이 빠른 인터넷은 상관없지만 해외는 대체적으로 인터넷 속도가 느려 검색이 어렵다. 이를 개선하기 위해서는 블로거 스스로 사진의 용량을 임의로 줄이는 등의 노력을 해야 한다. 그러나 사진의 용량을 줄이면 해상도가 함께 떨어진다.
블로그를 돋보이기 위해 이미지를 사용하는 것인데 이렇게 되면 이미지가 무슨 필요인가. 지금까지 많은 블로거들이 이 이미지를 지키기 위해서 다양한 방식으로 최대 해상도를 400pxl 까지 지키고 그것을 tinyPNG 등의 툴(tool)로 용량을 줄여왔지만 사실 그보다 더 괜찮은 방법이 있다. 그것은 JPG, PNG등의 그림 파일을 WEBP파일로 변환하는 것이다.
픽사베이 이미지 찾기 및 다운로드
픽사베이는 무료로 고해상도 이미지를 제공하는 사이트로, 다양한 카테고리와 검색 기능을 통해 원하는 이미지를 쉽게 찾을 수 있습니다. 원하는 이미지를 찾았다면, 해당 이미지를 클릭하여 다운로드 페이지로 이동합니다. 여기서 다운로드 옵션을 선택하면 다양한 해상도와 포맷으로 이미지를 다운로드할 수 있습니다. 다운로드된 이미지는 일반적으로 JPG 또는 PNG 포맷으로 제공됩니다.
이 이미지를 WEBP이미로 변환하는 것은 어떨까요?
WEBP 이미지란?
WEBP파일은 구글에서 2010년에 만든 이미지 파일이다. 실제로는 On2 Technologies라는 회사가 최초 개념을 구상하였고, 구글이 인수하였다고 한다. 놀랍게도 WEBP 이미지는 jpg, png, gif 특징을 유지하면서 파일의 용량을 줄이기 때문에 웹 블로거들에게는 효율적인 포맷이다. 그런 의미로 픽사베이 이미지를 WEBP로 바로 변환하는 것이 필수이다.
어떻게 변환해야 할까?
불과몇 년 전만해도 https://pix-zip.herokuapp.com/라는 프로그램이 있어서 매우 쉽게 WEBP이미지를 얻을 수 있었는데 지금 이 프로그램을 제공하지 않는 것 같다.
다운로드한 이미지를 WEBP 포맷으로 변환하려면, 온라인 이미지 변환 서비스를 이용할 수 있기도 하지만 필자는 내 블로그에 이 포맷을 구현해 놨다.
하지만 이마저도 번거롭다고 생각이 되어 생성형AI 뤼튼에게 물어보았고 꽤 괜찮은 결과물을 얻었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 검색 및 다운로드</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 hasSelectedImages = selectedImages.length > 0;
document.getElementById('download-zip').style.display = hasSelectedImages ? 'block' : 'none';
document.getElementById('download-webp').style.display = hasSelectedImages ? 'block' : 'none';
}
document.getElementById('download-zip').onclick = async () => {
const zip = new JSZip();
for (const url of selectedImages) {
const response = await fetch(url);
const blob = await response.blob();
zip.file(url.split('/').pop(), blob);
}
const content = await zip.generateAsync({ type: 'blob' });
const a = document.createElement('a');
a.href = URL.createObjectURL(content);
a.download = 'images.zip';
a.click();
};
document.getElementById('download-webp').onclick = async () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const promises = selectedImages.map(async (url) => {
const img = new Image();
img.crossOrigin = 'Anonymous'; // CORS 문제 방지
img.src = url;
await img.decode();
return img;
});
const images = await Promise.all(promises);
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((blob) => {
resolve(blob);
}, 'image/webp');
});
}));
const zip = new JSZip();
webpBlobs.forEach((blob, index) => {
zip.file(`image${index + 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>
- 이것의 활용방법은 [YOUR_API_KEY]에 “픽사베이 API키”를 입력하는 것이다.
- 픽사베이 API 주소 > GET START > 아래 그린 박스에 있다.
HTML 테스트 하는 방법
- 이걸 테스트 하는 방법은 JSBIN.COM에 들어간다.
- 위쪽에 HTML 클릭 > 왼쪽 창에 붙여넣고
- 중간에 YOUR_API_KEY 이 부분에 여러분의 픽사베이 API를 덮어 넣으면
- 아래 처럼 우측에 실행된다.
WEBP 변환기 실행
아래는 필자가 만든 간단한 변환기이다. 순서는 아래와 같다.
- 검색할 내용
- 이미지 선택
- 이미지 다운로드
이미지 검색 및 다운로드
선택한 이미지
