Как да конвертираме изображения от JPEG, WebP и PNG в .avif формат?

В света на уеб дизайна и разработката, ефективността и качеството на изображенията играят решаваща роля. Конвертирането на изображения от стандартните формати като JPEG, WebP и PNG в новия формат .avif може да подобри скоростта на зареждане на уебсайта и да намали размерите на файловете без загуба на качество.

В тази статия ще разгледаме как да създадем HTML страница и използваме JavaScript, за да извършим това конвертиране.

Съдържание

Защо да използваме .avif формат?

.avif е сравнително нов формат за изображения, който предлага отлично качество и компресия на изображенията. Този формат използва по-малко място в сравнение с JPEG и дори WebP, което го прави идеален за оптимизация на уебсайтове. Той е поддържан от съвременните браузъри, като Chrome, Firefox и др., което означава, че потребителите ви ще могат да виждат изображенията в този формат.

HTML и JavaScript за конвертиране на изображения в .avif

За да започнем конверсията, създайте следната HTML страница:

<!DOCTYPE html>
<html>
<head>
    <title>Image Converter</title>
	<meta charset="UTF-8">
        <meta name="author" content="Fedya Serafiev">
	<meta name="description" content="Kонвертиране на изображения от JPEG, WebP и PNG в .avif Формат">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<style>
body {

              font-family: Arial, sans-serif;
            text-align: center;
            margin: 0 auto;
            max-width: 800px; /* Максимална ширина на контейнера */
            padding: 20px;
}

h1 {
  text-align: center;
  font-size: 2em;
  color: #007bff;
}

#imageInput {
  display: block;
  margin: 10px auto;
  width: 240px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

#convertButton {
  display: block;
  margin: 0 auto;
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

#convertButton:hover {
  background-color: #0056b3;
}

#output {
  text-align: center;
  margin: 20px auto;
  font-size: 1.5em;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

#output a {
  color: #007bff;
  text-decoration: none;
}

#output a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Цветова схема */

.primary-color {
  color: #007bff;
}

.secondary-color {
  color: #ccc;
}

/* Други подобрения */

.image-container {
  margin: 0 auto;
  width: 300px;
}

img {
  width: 100%;
}

.output-container {
  margin: 20px auto;
}


    </style>
	
</head>
<body>
    <h1>Конвертирайте изображения в AVIF формат</h1>
    <input type="file" id="imageInput" accept="image/*" />
    <button id="convertButton">Конвертирй в AVIF</button>
    <div id="output"></div>

    <script>
        document.getElementById("convertButton").addEventListener("click", convertToAvif);

        function convertToAvif() {
            const inputElement = document.getElementById("imageInput");
            const outputElement = document.getElementById("output");

            if (inputElement.files.length === 0) {
                outputElement.innerText = "Please select an image first.";
                return;
            }

            const file = inputElement.files[0];
            const reader = new FileReader();

            reader.onload = function(event) {
                const inputBuffer = event.target.result;

                createImageBitmap(new Blob([new Uint8Array(inputBuffer)])).then((imageBitmap) => {
                    const canvas = document.createElement("canvas");
                    canvas.width = imageBitmap.width;
                    canvas.height = imageBitmap.height;
                    const ctx = canvas.getContext("2d");
                    ctx.drawImage(imageBitmap, 0, 0);

                    canvas.toBlob((avifBlob) => {
                        const downloadLink = document.createElement("a");
                        downloadLink.href = URL.createObjectURL(avifBlob);
                        downloadLink.download = "converted.avif";
                        downloadLink.innerText = "Изтеглете AVIF";

                        outputElement.innerHTML = "";
                        outputElement.appendChild(downloadLink);
                    }, "image/avif");
                });
            };

            reader.readAsArrayBuffer(file);
        }
    </script>
</body>
</html>

Този код включва HTML структура със стилове и JavaScript функции, които позволяват на потребителя да качи изображение и да го конвертира в .avif формат.

Как да използваме кода?

Запишете този код в текстов редактор .
Запазете файла с разширение .html.
Отворете файла в браузъра си.
Качете изображение, въведете име и кликнете "Конвертирй в AVIF".
Изчакайте момент, докато изображението се конвертира.
След завършване на конверсията, ще имате възможност да изтеглите конвертираното .avif изображение.

Този код ви позволява бързо и лесно да конвертирате изображения от JPEG, WebP и PNG в .avif формат, което подобрява ефективността и скоростта на уебсайта ви. Сега имате инструмент, който може да оптимизира изображенията и да ги направи по-подходящи за уеб.

Федя Серафиев

Федя Серафиев e собственик на уебсайта urocibg.eu. Той намира удовлетворение в това да помага на хората да решават и най-сложните технически проблеми. Сегашната му цел е да пише лесни за следване статии, така че подобни проблеми изобщо да не възникват.

Благодарим ви за прочитането на статията! Ако намерихте информацията за полезна, можете да дарите посредством бутоните по-долу:

Donate ☕️ Дарете с PayPal Donate 💳 Дарете с Revolut