كود html تحويل الصور الى webp مع شرح التركيب

السلام عليكم ورحمة الله وبركاته ،في موضوع اليوم سيكون حديثنا عن كود من الاكواد الجميله والذي يقوم بتحويل الصور الى webp مجانا ،كود كامل حيث يوجد به امكانية تحميل الصور المحولة ، وذلك عبر زر التحميل الذي يظهر لك بعد رفع الصورة واكتمال تحويلها.

كود html تحويل الصور الي webp

طريقة تركيب كود تحويل الصور الي webp

هذا السكريبت مجاني 100% لكم زوار موقعي ،يمكنكم تحميله من الرابط الموجود في نهاية المقال، كيف يمكنك استخدام هذا السكريب ،هذا ما سنعرفه في السطور التالية:

قم بنسخ الكود بالكامل من الاسفل.
اذا كنت تستخدم بلوجر فقم بانشاء مشاركة جديدة او صفحة جديدة.
اختار عرض html من او الاختيارات في الاعدادات اقصي اليمين "علامة القلم".
ثم الصق الكود.
ثم اختار عرض وضع الانشاء.
ثم اكتب بعض الكلمات المفتاحية في جمل مفيدة تخص الاداة المستخدمة.
يفضل وضع الفقرة او الفقرات بعد كود الاداة بداخل وسم باراجراف <p> حتي يكون الترتيب منطقي h1 ثم كود الأداة ثم h2 ثم فقرة او فقرات بها كلمتين او ثلاثة مفتاحية تخص الأداة المقصودة وهي في هذا المقال تحويل الصور الي webp.

هنا قد قمت بتركيب الأداة ، ووضع عناوين وفقرات ، وبالتالي محتوي نصي كاف للقبول في جوجل ادسنس، وايضا اداة يبحث عنها العديد من الاشخاص ،حيث ان الصور webp حجمها صغير جدا ،وبالتالي تحميل الصفحة بسرعة اكبر وهذا مهم لمحركات البحث.

كود html تحويل الصور الي webp كامل لموقعك

هذا الكود يمكنك وضعه بموقعك وفقا للشرح السابق،وعلي سبيل التذكير لأهمية ذلك الامر ،ضع محتوي نصي كافي ويفضل جدا ان يكون بعد الكود ،لان المحتوي النصي الكاف يسمح لك بالظهور في محركات البحث طبقا لكلمة البحث المقصودة ،فالبنسبة لهذه الأداة الكلمة هي "تحويل الصور الي webp"،كما ان المحتوي النصي الكاف عالي الجودة يمنحك القبول لموقعك في جوجل أدسنس.

كود تحويل الصور الي webp

ومن الجميل في هذا الكود يوجد زر تحميل الصور المحولة بشكل جميل وجذاب،وسرعة التحويل في الاداة من اهم ما فيها،هذا هو الكود انسخه بالكامل واذا واجهتك مشكلة في النسخ بمعني نسخت جزء وتركت جزء وتريد اعادة النسخ مرة اخري ،فالحل اعد تحميل الصفحة ثم انسخ الكود بالكامل بالطريقة الصحيحة،كما يمكنك مشاهدة فيديو شرح التركيب الموجود بعد الكود.

الكود:

<html>
<head>
  <title>تحويل الصور إلى تنسيق WebP وتنزيلها</title>
  <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>
</head>
<body>
  <input accept="image/*" id="imageInput" type="file" />
  <button onclick="convertToWebP()" style="background-color: #035dcd; color: white; padding: 7px 7px;">تحويل الصورة إلى تنسيق WebP</button>
  <br />
  <img id="convertedImage" src="" />
  <a download="" href="" id="downloadButton" style="display: none;">تحميل الصورة المحولة</a>
</body>
</html>

فيديو شرح تركيب الكود

هذا فيديو يشرح كيفية تركيب كود تحويل الصور الي webp "سكريبت تحويل الصور الي webp" يصلح لبلوجر ووردبرس:

الخاتمة:

قد شرحنا في هذا المقال كيفية تركيب كود تحويل الصور الي webp ، اداة مهمة لاي مدون حيث حجم الصور كلما كان اصغر كان افضل ،وذلك لسرعة تحميل الصفحة والذي مهم لمحركات البحث وتصدر نتائج البحث وللقبول ايضا في جوجل ادسنس ، الي هنا انتي المقال شكرا لا تنسوا متابعتنا للحصول علي الجديد في القناة والمدونة.

تعديل المقال

عصام تكنولوجي

كود html تحويل الصور الى webp مع شرح التركيب

طريقة تركيب كود تحويل الصور الي webp

كود html تحويل الصور الي webp كامل لموقعك

كود تحويل الصور الي webp

فيديو شرح تركيب الكود

مقالات قد تهمك

عصام تكنولوجي

أقسام الوصول السريع ( مربع البحث )

كود html تحويل الصور الى webp مع شرح التركيب

طريقة تركيب كود تحويل الصور الي webp

كود html تحويل الصور الي webp كامل لموقعك

كود تحويل الصور الي webp

فيديو شرح تركيب الكود

مقالات قد تهمك