หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

ตัวสร้าง WebP สำหรับ Jekyll

WebP Image Generator สำหรับไซต์ Jekyll สามารถสร้างอิมเมจ WebP สำหรับรูปภาพทั้งหมดบนเว็บไซต์คงที่ของคุณโดยอัตโนมัติ และให้บริการเมื่อเป็นไปได้ ดูบน rubygems.org

อ่านเพิ่มเติมเกี่ยวกับเครื่องมือนี้ในบล็อกของฉันที่ blog.sverrirs.com

การติดตั้ง 

 gem install jekyll-webp

การเปิดตัวครั้งนี้ประกอบด้วยไฟล์ที่จำเป็นทั้งหมดในการรัน รวมถึงไฟล์ปฏิบัติการที่แจกจ่ายต่อได้ของ WebP

ขณะนี้การเปิดตัวประกอบด้วยยูทิลิตี้ WebP เวอร์ชัน v0.6.1 สำหรับ Windows, Linux และ Mac OS X 10.9 (Mountain Lion) สามารถดาวน์โหลดเวอร์ชันและรุ่นอื่นๆ ได้โดยตรงจากหน้า Google

เพิ่ม gem ลงใน 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 ด้วยเช่นกัน

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด