سكربت تحويل الصور إلى تنسيق WebP

أداة تحويل الصور إلى تنسيق WebP 

 أداة تحويل صيغ الصور الى wibp

تعتبر الصور من العناصر الأساسية التي يستخدمها جميع مواقع الويب. وبالتالي، يعتبر تحسين الصور أمرًا ضروريًا لأصحاب المواقع من أجل تسريع الموقع الإلكتروني وتحسين تجربة المستخدم. فالصور المحسنة تكون بنفس جودة الصورة الأصلية تقريبًا، ولكن بحجم أصغر بكثير، مما يعني أنها لا تستغرق وقتًا طويلاً للتحميل كما يحدث مع الصور غير المحسنة. واحدة من الخطوات الأساسية لتحسين صور موقعك هي التعرف على التنسيقات التي تمكنك من ذلك ومعرفة كيفية استخدامها. وفي هذا السياق، سنشرح لك تنسيق الصور WebP الجديد نسبيًا، والذي تم تطويره خصيصًا لمساعدتك في تقليل حجم الصور مع الحفاظ على جودتها.
تم تطوير تنسيق الصور WebP وإصداره بواسطة جوجل في عام 2010 لتسريع صفحات المواقع عن طريق ضغط الصور مع الحفاظ على جودتها. حيث تشكل الصور حوالي 60%-65% من حجم صفحة الويب، وبالتالي يمكن تقليل وقت تحميل الصفحة وتوفير النطاق الترددي والحفاظ على عمر البطارية، خاصة على الهواتف الذكية. تم تحسين تنسيق WebP مع مرور الوقت،

ما فائدة الاداة

 وأصبح الآن قادرًا على توفير صور بحجم أصغر بنسبة تصل إلى 30% مقارنة بتنسيقات PNG و JPEG بنفس الجودة المرئية. على سبيل المثال، إذا كانت لديك صورة بتنسيق PNG بحجم 100 كيلوبايت، يمكنك تصغير حجمها إلى 70 كيلوبايت تقريبًا مع الحفاظ على جودتها العالية عن طريق تحويلها إلى تنسيق WebP. على الرغم من أن هذا التنسيق ليس مدعومًا في جميع متصفحات الويب، إلا أن معظم المتصفحات الشهيرة تدعمه الآن، بما في ذلك Google Chrome و Firefox و Opera و Microsoft Edge. وبالتالي، لا داعي للقلق بشأن عدم ظهور صور موقعك للزوار إذا استخدمت تنسيق WebP، حيث يأتي الغالبية العظمى من الزيارات من هذه المتصفحات. كما يتم دعم WebP أيضًا في نظام التشغيل أندرويد.

معاينة الأداة

معاينة الاداة

شرح التركيب

1. اذهب ال الصفحات
2. اختار صفحة جديدة
3. انتقل الى عرض ال HTML
4. الصق الكود التالي مع اختيار اسم مناسب
5. قم بالحفظ

الاكواد الخاصة بالاداة

<p>&nbsp;أختار الصورة اللتي ترغب بتحويلها ثم أضغط على زر التحويل ↓</p><p></p>

  <script>

    function convertToWebP() {

      var imageInput = document.getElementById('imageInput');

      var convertedImage = document.getElementById('convertedImage');

      var downloadButton = document.getElementById('downloadButton');

      var file = imageInput.files[0];

      var reader = new FileReader();

      reader.onloadend = function() {

        var imageUrl = reader.result;

        convertedImage.src = imageUrl;

        // تحويل الصورة إلى تنسيق WebP

        var canvas = document.createElement('canvas');

        var ctx = canvas.getContext('2d');

        var img = new Image();

        img.onload = function() {

          canvas.width = img.width;

          canvas.height = img.height;

          ctx.drawImage(img, 0, 0);

          canvas.toBlob(function(blob) {

            var convertedImageUrl = URL.createObjectURL(blob);

            downloadButton.href = convertedImageUrl;

            downloadButton.download = file.name.split('.').slice(0, -1).join('.') + '.webp';

            downloadButton.style.display = 'block';

            downloadButton.style.padding ='7px 7px';

            downloadButton.style.color ='#ffff';

            downloadButton.style.background ='#035dcd';

            downloadButton.style.width ='150px';

            

          }, 'image/webp');

          URL.revokeObjectURL(imageUrl);

        };

        img.src = imageUrl;

      };

      reader.readAsDataURL(file);

    }

  </script>

  <style>

input#imageInput {width: 100%;padding: 20px;margin: 10px;border-radius: 4px;background: var(--Borderes3);border-right: 4px solid #71a134;}    

a#downloadButton {display: block;padding: 10px!important;color: rgb(255, 255, 255);background: rgb(3, 93, 205);width: 100%!important;;text-align: center!important;;font-size: 16px;border-radius: 4px;margin-top: 20px;margin-bottom: 20px}    

a#downloadButton:hover {background: #598328!important;}   

  

  </style>

  <input accept="image/*" id="imageInput" type="file" />

  <button onclick="convertToWebP()" style="background-color: #598328; border-radius: 4px; border: none; color: white; cursor: pointer; font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 20px; padding: 14px; width: 100%;">تحويل الصورة إلى تنسيق WebP</button>

  <br />

  <img id="convertedImage" src="" />

  <a download="" href="" id="downloadButton" style="display: none;">تحميل الصورة المحولة</a>

و شكرا لكم لا نسى الاشتراك بالمدونة و قناتنا على اليوتيوب