Hướng dẫn tạo trang chuyển đổi ảnh WebP cho website/blog chuẩn nhất

<style>
/*<![CDATA[*/
#convert{max-width:600px;background-color:#f4f4f4;margin:auto;padding:20px;text-align:center}
#convert button{display:none;padding:10px 20px;font-size:16px;background-color:#3498db;color:#fff;border:none;cursor:pointer;transition:background-color 0.3s ease;margin:auto;margin-top:20px}
#convert button:hover{background-color:#2980b9}
#convert a{display:none;margin-top:20px;padding:10px 20px;font-size:16px;background-color:#27ae60;color:#fff;text-decoration:none;border-radius:5px;transition:background-color 0.3s ease}
#convert a:hover{background-color:#219d54}
#comparisonInfo{display:none;margin-top:20px;padding:10px;border:1px solid #ccc;background-color:#f8f8f8}
#comparisonInfo p{margin:5px 0}
#comparisonInfo span{font-weight:bold;color:#007bff}
.custom-container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:20px}
.column{flex:1;margin:10px;background-color:#f0f0f0;padding:15px;box-sizing:border-box}
#imgviewer img{max-width:100%;margin:auto}
/*]]>*/
</style>
<div id="convert">
  <input accept="image/*" id="imageInput" type="file" />
  <button id="convertButton" onclick="convertImage()">Convert to WebP</button>
  <a download="converted_image.webp" id="downloadLink" style="display: none;">Download WebP</a>
  <div id="comparisonInfo" style="display: none;">
    <div class="custom-container">
      <div class="column" id='imgviewer'>
      </div>
      <div class="column">
        <p><strong>So sánh 2 file:</strong></p>
        <p>Kích thước trước: <span id="sizeBefore"></span></p>
        <p>Kích thước sau: <span id="sizeAfter"></span></p>
        <p>Định dạng trước: <span id="formatBefore"></span></p>
        <p>Định dạng sau: <span id="formatAfter"></span></p>
      </div>
    </div>
  </div>
</div>
<script>
  //<![CDATA[
  document.addEventListener('DOMContentLoaded', function() {
    const inputElement = document.getElementById('imageInput');
    const convertButton = document.getElementById('convertButton');
    inputElement.addEventListener('change', function() {
      convertButton.style.display = 'block';
    });
    convertButton.addEventListener('click', function() {
      convertImage();
    });
  });

  function convertImage() {
    const inputElement = document.getElementById('imageInput');
    const downloadLink = document.getElementById('downloadLink');
    const convertButton = document.getElementById('convertButton');
    const comparisonInfo = document.getElementById('comparisonInfo');
    const sizeBefore = document.getElementById('sizeBefore');
    const sizeAfter = document.getElementById('sizeAfter');
    const formatBefore = document.getElementById('formatBefore');
    const formatAfter = document.getElementById('formatAfter');
    const imgViewer = document.getElementById('imgviewer'); // Get the imgviewer column
    const file = inputElement.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          const context = canvas.getContext('2d');
          context.drawImage(img, 0, 0, img.width, img.height);
          canvas.toBlob((blob) => {
            const url = URL.createObjectURL(blob);
            // Lấy thông tin ảnh gốc
            const originalFileSize = (file.size / 1024).toFixed(2) + ' KB';
            const originalFileFormat = file.type;
            // Lấy tên file ảnh gốc
            const originalFileName = file.name;
            // Lấy thông tin ảnh WebP
            const webpFileSize = (blob.size / 1024).toFixed(2) + ' KB';
            const webpFileFormat = 'image/webp';
            // Hiển thị thông tin so sánh
            sizeBefore.textContent = originalFileSize;
            sizeAfter.textContent = webpFileSize;
            formatBefore.textContent = originalFileFormat;
            formatAfter.textContent = webpFileFormat;
            comparisonInfo.style.display = 'block';
            // Đặt tên liên kết tải về và tải về
            downloadLink.href = url;
            // Sử dụng tên file ảnh gốc để đặt tên cho ảnh WebP đã chuyển đổi
            downloadLink.download = originalFileName.replace(/\.[^/.]+$/, "") + '.webp';
            downloadLink.style.display = 'block';
            convertButton.style.display = 'none'; // Ẩn nút Convert sau khi chuyển đổi
            // Hiển thị ảnh trong cột imgviewer
            const convertedImgElement = document.createElement('img');
            convertedImgElement.src = url;
            convertedImgElement.alt = 'Converted Image';
            imgViewer.innerHTML = ''; // Clear previous content
            imgViewer.appendChild(convertedImgElement);
          }, 'image/webp');
        };
        img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
  //]]>
</script>