الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

مولد WebP لجيكل

يمكن لـ WebP Image Generator لمواقع Jekyll إنشاء صور WebP تلقائيًا لجميع الصور الموجودة على موقعك الثابت وتقديمها عندما يكون ذلك ممكنًا. عرض على Rubygems.org.

اقرأ المزيد حول هذه الأداة على مدونتي على blog.sverrrers.com

تثبيت 

 gem install jekyll-webp

يتضمن الإصدار جميع الملفات الضرورية للتشغيل، بما في ذلك الملفات القابلة للتنفيذ القابلة لإعادة التوزيع لـ WebP.

يتضمن الإصدار حاليًا الإصدار v0.6.1 من أدوات WebP المساعدة لأنظمة التشغيل Windows وLinux وMac OS X 10.9 (Mountain Lion). يمكن تنزيل الإصدارات والإصدارات الأخرى مباشرة من صفحة Google.

أضف الجوهرة إلى Gemfile الخاص بك وإلى _config.yml الخاص بـ Jekyll ثم قم بتشغيل jekyll serve مرة أخرى ويجب أن ترى المولد يعمل أثناء إنشاء الموقع.

إعدادات

يمكن تكوين المكون الإضافي في ملف _config.yml الخاص بالموقع من خلال تضمين عنصر تكوين webp 

 # ###########################################################
# Site configuration for the WebP Generator Plugin
# The values here represent the defaults if nothing is set
webp :
  enabled : true
  
  # The quality of the webp conversion 0 to 100 (where 100 is least lossy)
  quality : 75

  # List of directories containing images to optimize, nested directories will only be checked if `nested` is true
  # By default the generator will search for a folder called `/img` under the site root and process all jpg, png and tiff image files found there.
  img_dir : ["/img"]

  # Whether to search in nested directories or not
  nested : false

  # add ".gif" to the format list to generate webp for animated gifs as well
  formats : [".jpeg", ".jpg", ".png", ".tiff"]

  # File extensions for animated gif files 
  gifs : [".gif"]

  # Set to true to always regenerate existing webp files
  regenerate : false

  # Local path to the WebP utilities to use (relative or absolute)
  # Omit or leave as nil to use the utilities shipped with the gem, override only to use your local install
  # Eg : "/usr/local/bin/cwebp"
  webp_path : nil

  # List of files or directories to exclude
  # e.g. custom or hand generated webp conversion files
  exclude : []

  # append '.webp' to filename after original extension rather than replacing it.
  # Default transforms `image.png` to `image.webp`, while changing to true transforms `image.png` to `image.png.webp`
  append_ext : false
# ###########################################################

أبسط استخدام: HTML

في حالة عدم قدرتك على التحكم في خادم الويب الخاص بك، فإن استخدام العنصر <picture> وتحديد جميع تنسيقات الصور المتاحة هو الخيار الأفضل. بهذه الطريقة سيقرر المتصفح التنسيق الذي سيتم استخدامه بناءً على إمكانياته الخاصة. 

 < picture >
  < source srcset =" /path/to/image.webp " type =" image/webp " >
  < img src =" /path/to/image.jpg " alt ="" >
</ picture >

الاستخدام المتقدم: تكوين خادم الويب

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

فيما يلي مثال لقسم تكوين .htaccess في خادم الويب Apache. سيقوم بإعادة توجيه المستخدمين إلى صور webp كلما أمكن ذلك. 

 ####################
# Attempt to redirect images to WebP if one exists 
# and the client supports the file format
####################
# check if browser accepts webp
RewriteCond %{HTTP_ACCEPT} image/webp 

# check if file is jpg or png
RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$

# check if corresponding webp file exists image.png -> image.webp
RewriteCond %1.webp -f

# serve up webp instead
RewriteRule (.+).(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]

AddType image/webp .webp

اعتمادًا على التكوينات الأخرى في ملف .htaccess الخاص بك، قد يتعين عليك تحديث ExpiresByType و ExpiresDefault و Header set Cache-Control لتضمين تنسيق webp أيضًا.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل