-->

طريقة إنشاء أداة تحويل الصور الى تنسيق WebP Image على صفحة بلوجر

طريقة إنشاء أداة تحويل الصور الى تنسيق WebP Image على صفحة بلوجر

     مرحبًا اليوم في هذا المقال ، أشارك إضافة آخرى ، حيث يمكنك تحويل الصور إلى صيغة WebP  ، ويمكنك أيضًا إنشاؤها على مدونتك أيضًا.

    طريقة إنشاء أداة تحويل الصور الى تنسيق WebP Image على صفحة بلوجر
    ما هي صيغة WebP؟
    WebP هو تنسيق صورة مفتوح المصدر تم تطويره من طرف جوجل, ، الذي يعد بإنشاء صور أصغر حجمًا مقارنة بتنسيقات JPG و PNG ، مع إنشاء صور ذات مظهر أفضل. يدعم WebP الشفافية ، مثل صور PNG و GIF.
    WebP هو تنسيق صور حديث يوفر ضغطًا فائقًا للصور على الويب. باستخدام WebP ، يمكن لمشرفي المواقع ومطوري الويب إنشاء صور أصغر وأكثر ثراءً تجعل الويب أسرع. حجم صور WebP أصغر بنسبة 26٪ مقارنة بالنقاط PNGs.
    هل يجب علي استخدام صور WebP على موقع الويب الخاص بي؟
    WebP هو تنسيق مفيد بشكل لا يصدق لأنه يوفر الأداء والميزات. على عكس التنسيقات الأخرى ، يدعم WebP كلاً من الضغط الضائع والخالي من الخسارة ، بالإضافة إلى الشفافية والرسوم المتحركة. حتى مع هذه الميزات ، يوفر WebP أحجام ملفات أصغر باستمرار من بدائله.

    فيما يلي مثال واحد لما تقترحه جوجل حول WebP :
    من خلال رؤية المثال أدناه ، قد تفهم الفرق بين WebP و Non-WebP
    ثبت أن سرعة صفحة الموقع ستزداد ، لذلك أفضل استخدام صور WebP في موقعك.
    طريقة إنشاء أداة تحويل الصور الى تنسيق WebP Image على صفحة بلوجر

    كيفية إنشاء صفحة أداة محول WebP؟
    من السهل جدًا إنشاءها ما عليك سوى اتباع الخطوات التالية...
    1. إنشاء صفحة واحدة:
    2. اذهب إلى لوحة تحكم Blogger
    3. اذهب إلى قسم الصفحات
    4. إنشاء صفحة جديدة واحدة
    لصق الرمز أدناه:
    <div class="layout">
        <h1>تحويل الصورة إلى تنسيق webp</h1>
        <div>
          <input type="file" multiple accept="image/*">
        </div>
        <div id="previews"></div>
        <div class="dropTarget"></div>
      </div>
    <style>
      input[type=file] { margin: 20px 0; } img { max-height: 100%; max-width: 100%; box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75); } .dropTarget { position: relative; border: 3px dashed silver; flex-basis: auto; flex-grow: 20; } .dropTarget::before { content: 'إسحب الملفات هنا'; color: silver; font-size: 5vh; height: 5vh; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; pointer-events: none; user-select: none; } #previews > div { box-sizing: border-box; height: 240px; width: 240px; padding: 20px; display: inline-flex; justify-content: center; align-items: center; vertical-align: top; } #previews > div:after{ Content:'اضغط للتحميل'; display:block; font-weight:bold; font-size:10px; position: absolute;border:1px solid silver; padding: 2px 9px; background: #fff; } #previews > div > progress { width: 80%; } .layout { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; align-content: stretch; height: calc(100vh - 40px); }
    </style>
    <script>
    //<![CDATA[
      let refs = {}; refs.imagePreviews = document.querySelector('#previews'); refs.fileSelector = document.querySelector('input[type=file]'); function addImageBox(container) { let imageBox = document.createElement("div"); let progressBox = document.createElement("progress"); imageBox.appendChild(progressBox); container.appendChild(imageBox); return imageBox; } function processFile(file) { if (!file) { return; } console.log(file); let imageBox = addImageBox(refs.imagePreviews); new Promise(function (resolve, reject) { let rawImage = new Image(); rawImage.addEventListener("load", function () { resolve(rawImage); }); rawImage.src = URL.createObjectURL(file); }) .then(function (rawImage) { return new Promise(function (resolve, reject) { let canvas = document.createElement('canvas'); let ctx = canvas.getContext("2d"); canvas.width = rawImage.width; canvas.height = rawImage.height; ctx.drawImage(rawImage, 0, 0); canvas.toBlob(function (blob) { resolve(URL.createObjectURL(blob)); }, "image/webp"); }); }) .then(function (imageURL) { return new Promise(function (resolve, reject) { let scaledImg = new Image(); scaledImg.addEventListener("load", function () { resolve({imageURL, scaledImg}); }); scaledImg.setAttribute("src", imageURL); }); }) .then(function (data) { let imageLink = document.createElement("a"); imageLink.setAttribute("href", data.imageURL); imageLink.setAttribute('download', `${file.name}.webp`); imageLink.appendChild(data.scaledImg); imageBox.innerHTML = ""; imageBox.appendChild(imageLink); }); } function processFiles(files) { for (let file of files) { processFile(file); } } function fileSelectorChanged() { processFiles(refs.fileSelector.files); refs.fileSelector.value = ""; } refs.fileSelector.addEventListener("change", fileSelectorChanged); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(callback, e) { e.stopPropagation(); e.preventDefault(); callback(e.dataTransfer.files); } function setDragDrop(area, callback) { area.addEventListener("dragenter", dragenter, false); area.addEventListener("dragover", dragover, false); area.addEventListener("drop", function (e) { drop(callback, e); }, false); } setDragDrop(document.documentElement, processFiles);//]]>
    </script>
    5. هذا كل شيء ، أداتك جاهزة للاستخدام.
    عند فتح صفحة الأداة ، قد تبدو أدوات صفحتك ذات مظهر رائع ولكنها لا تمثل مشكلة كبيرة. لن يؤثر على صفحات أخرى.
    يمكنك تعليق مشكلتك ، سنرد قريبا.

    إرسال تعليق