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

مرحبًا بالجميع، خطوات تركيب اداة محول صيغ الصور الي WEBP علي بلوجر ويعد WebP تنسيقًا مفيدًا بشكل لا يصدق لأنه يوفر أداءً وميزات وبدون فقد الجودة.
الرجاء الانتظار 0 ثانية...
قم بالتمرير لأسفل وانقر فوق فتح الرابط للتوجيه
تم فحص وتجهيز الرابط

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

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

ما هو 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. الآن انسخ الكود الموجود ادناه ولصق في الصفحة التي تم إنشاؤها
تركيب اداة محول صيغ الصور الي WEBP علي بلوجر
<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 علي بلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

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

عن الكاتب

عبدالحميد ميدو منشئ محتوى رقمي ومهتم بجديد التقنية بشكل عام والبرمجة JS ,CSS بشكل خاص
معلومات أكثر

إرسال تعليق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - لإضافة كود برمجي حوله أولاً بمحول الأكواد
4 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام
ملفات تعريف الارتباط
نحن نستخدم ملفات تعريف الارتباط ( كوكيز ) لفهم كيفية استخدامك لموقعنا ولتحسين تجربتك في المحتوى والإعلانات..
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت.
يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
يرجى السماح بعرض الإعلانات
يبدو أنك تستخدم أداة لحظر الإعلانات Adblock.
نحن نعتمد على الارباح التي نحققها من الإعلانات كمصدر تمويل لموقعنا الإلكتروني.
Site is Blocked
Sorry! This site is not available in your country.