تركيب اداة محول صيغ الصور الي WEBP علي بلوجر

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

ما هو WebP؟

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

هل يجب استخدام صور بصيغة WebP على مدونة بلوجر ؟

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

شاهد أيضاً :-

كيفية إنشاء صفحة WebP Converter Tool؟

من السهل جدًا إنشاء صفحة لأداء محول صيغ الصور. اولا قبل التثبيت يمكنك مشاهدة الاداة
خطوات إنشاء صفحة للأداء :ما عليك سوى اتباع الخطوات التالية ...

1. انتقل إلى لوحة تحكم بلوجر Blogger Dashboard
2. انتقل إلى قسم الصفحات الثابتة وإنشاء صفحة جديدة
3. بعد انشاء الصفحة وتحديد اسمها WEBP Converter
4. الآن انسخ الكود الموجود ادناه ولصق في الصفحة التي تم إنشاؤها

<div class="layout">
    <h2>اداة تحويل الصور أونلاين الى صيغة Webp</h2>
    <div>
      <input accept="image/*" multiple="" type="file" />
    </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>

بعد الانتهاء وعند فتح صفحة الأداة ، قد تبدو مظهر الصفحة غريبة ولكنها ليست مشكلة كبيرة. لن يؤثر على الصفحات الأخرى في مدونتك.

ينتهي هنا موضوعنا عن "تركيب اداة محول صيغ الصور الي WEBP علي بلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

تقييم المقالة

فتح رابط التوجية