המדריך השלם לשימוש בתבנית תמונה של WebP

WebP, או מבוטא באופן בלתי רשמי מטומטם, הוא פורמט תמונה שהציג Google Developers לפני 5 שנים. אם אתה מעצב אינטרנט, או מפתח אשר שואפת לצמצם לייעל את גודל הקובץ שלך התמונה, מה WebP מסוגל לשים חיוך על הפנים שלך.

בקיצור, הנה כמה דברים חשובים שאתה צריך לדעת על זה לא כל כך חדש, אבל עדיין מגניב פורמט התמונה:

• WebP הולך על ידי סיומת הקובץ של .webp.
• WebP מאמצת גם דחיסה lossless ו lossless.
• WebP lossy תמונות פוטנציאלים 25-34% קטן מ- JPEG.
• WebP lossless תמונות פוטנציאל 25% לעומת PNG.
• WebP תומך בשקיפות ללא אובדן נתונים, כלומר PNG עם ערוץ אלפא.
• WebP תומך בהנפשה. כלומר קבצי GIF מונפשים.

בקיצור, WebP מסוגל להפחית באופן משמעותי את קובץ JPEG, GIF, PNG של קובץ התמונה. הנה רענון ב WebP אתה צריך לבדוק לפני שאנחנו נכנסים דברים כיף.

ניסוי

הדברים הטובים ביותר על תביעות באינטרנט הוא שאנחנו תמיד יכולים להריץ ניסויים כדי לבדוק את האמת ואת האותנטיות. הנה כמה ניסויים שעשיתי כדי לגלות כמה קטנה התמונה יכולה לקבל לאחר שהם מומר מ פורמטים שונים של תמונות (JPEG, PNG ו- GIF) ל- WebP.

1. JPEG - תמונה מאובטחת

הנה תמונה אקראית JPEG תפסתי מ Pexels. קבצים מקוריים - 165kb. ↓

התמונה אופטימלית עם JpegMini. קבצים חדשים - 101kb. ↓

לבסוף, אותה תמונה מומרת לפורמט WebP. קובץ סופי - 70kb. ↓

על הערה צדדית: להלן הקבצים השונים, אם אותה תמונה הומרה לתבניות הבאות:

• GIF - 285kb
• PNG 8 - 241.2kb
• PNG 24 - 657.6kb

2. PNG - תמונה ללא אובדן

עכשיו, בואו ננסה עם PNG עם שקיפות. (מקור). קבצים מקוריים - 587kb. ↓

הנה התמונה אופטימיזציה עם tinypng. קבצים חדשים - 278kb. ↓

ולבסוף, התמונה המרה לפורמט WebP. קובץ סופי - 112kb. ↓

3. GIF מונפש

כאשר הומרו ל- WebP, תמונת JPEG עברה מ- 165kb ל- 70kb, בעוד שתמונת PNG עברה מ- 587 kb ל- 112kb.

בוא נראה כיצד GIF מונפשים:

• קבצים מקוריים - 6.8mb
• WebP קבצים - 6.3MB

סיכום:

הנה טבלה לסיכום הניסוי כולו:

	Lossy (JPG)	ללא אובדן (PNG)	אנימציה GIF
מקורי	165kb	587kb	6.8mb
ממוטב עם כלים	101kb	278kb	-
פורמט WebP	70kb	112kb	6.3MB

מבלי לדמיין הרבה בחישובים מתמטיים, הנתונים הללו מצביעים על הפחתה משמעותית של גודל הקובץ, ואם לשפוט לפי התמונות, אתה לא יכול באמת להבחין בהבדל במונחים של בהירות ופתרון. גודל קובץ קטן יותר וקל עם אותה רמה של איכות תמונה, WebP בהחלט שווה להסתכל לתוך.

המרת WebP עם כלים

אם אתה כבר על הלוח וברצונך להתחיל לשחרר תמונות בפורמט WebP, בואו לצלול פנימה ולראות איך אתה יכול להמיר את התמונות בקלות בפורמט זה. כל השיטות שהוזכרו להלן משתנות במונחים של בקרות, קלות שימוש ושינויים. תבחר את הרעל שלך.

WebPonize ל מק

WebPonize היא כנראה הדרך הפשוטה והמהירה ביותר להמיר תמונות בפורמט WebP ב- Mac. כל שעליך לעשות הוא פשוט גרור ושחרר את התמונות לתוך WebPonize וזה יעשה את ההמרה. אתה תקבל את ouput, את גודל לפני, בגודל ואחוז של הפחתה של הקובץ המקורי. [הורד WebPonize]

Webpconv ל Windows

אם אתה מפעיל את Windows, Webpconv הוא היישום שאתה צריך להתקין. זה גם מגיע בגירסה ניידת, כך שתוכל להפעיל אותו באופן עצמאי על כונן הבזק שלך. [הורד Webconv]

המרת עם שורת פקודות

אם אתה מרגיש חנונית, ייתכן שתרצה כנראה excute ההמרה באמצעות שורות הפקודה. cwebp ממיר תמונות JPEG, PNG או TIFF לתוך פורמט WebP dwebp ממיר אותם בחזרה לתבנית PNG. בואו נראה איך זה עובד.

הערה: הבא עבור Mac OS X. למשתמשי Windows ו- Linux, לחץ כאן.

הגדרת MacPorts ב- Mac OSX

תחילה, ודא שיש לך את Xcode מותקן, ולאחר מכן בצע את הפעולות הבאות:

1. הורד והתקן את MacPorts. אם כבר יש לך MacPorts מותקן ב- Mac שלך, המשך לשלב 2.
2. הפעלה מסוף.
3. IT 12יציאת"ולחץ על Enter. פעולה זו תעדכן את ה- MacPorts שלך לגרסה העדכנית ביותר.

   

4. , הקלדיציאת sudo להתקין"ולחץ על Enter libwebp (ספריית WebP).

   

זהו זה. עכשיו בואו נסתכל כיצד להמיר תמונות ל - WebP באמצעות שורת הפקודה.

פקודות להמיר / לחזור

הנה הפקודות הבאות:

אני - המרת JPEG / PNG קבצי תמונה בפורמט WebP

פורמט: cwebp -q [image_quality] [JPEG / PNG_filename] -O [WebP_filename]

דוגמאYou

cwebp -q 80 example.png -o example.webp 

II - סמוי WebP התמונה קבצים חזרה PNG

פורמט: dwebp [WebP_filename] -O [PNG_filename]

דוגמאYou

dwebp image.webp -o image.png 

יותר: אם אתה פרפר converti באמצעים אחרים, להלן הוראות לשימוש Grunt ו Gulp משימות להמיר קבצי JPG / PNG ל WebP.

המר עם כלים מקוונים

אם אתה לא מסתכל על התקנת יישומים על מערכת ההפעלה שלך כדי לבצע משימה זו, לבחור את הכלים המקוונים האלה במקום. הנה כמה שאני מכיר:

• Online-converter.com
• Webp-convertor.com
• זמזאר

טיפ: אם אתה google להמיר אינטרנט , אתה כנראה למצוא אפשרויות נוספות.

תוסף

אתה יכול להיות שמח לדעת שיש גם Photoshop Plugin המאפשר לך לשמור תמונות בפורמט WebP באמצעות Photoshop. תוסף זה תומך Mac OS X (CS 2 - CS 6) ו- Windows (32 סיביות & 64 סיביות). [הורד את הפלאגין כאן.]

הערה: רק חשבתי שאתה צריך לדעת שניסיתי את זה על Photoshop CC. לא עבד שם.

תמיכה בדפדפן WebP

לבסוף, בואו נדבר על תאימות. נכון לעכשיו, ניתן להציג תמונות בפורמט WebP בדפדפנים הבאים (נ"צ):

• Chrome / Chrome עבור iOS
• אופרה / אופרה מיני

לא כל כך הרבה מזל פיירפוקס ו ספארי, אשר עדיין לא תומך בפורמט WebP מקורי. עם זאת, אתה יכול להשתמש WebPJS Javascript הספרייה להמיר תמונות WebP לתוך מחרוזת DataURI באתר הלקוח.

סתיו חזרה לתבניות תמונה אחרות

מומלץ תמיד להשתמש ב- fallback כדי למנוע הצגת שגיאות תמונה עקב דפדפנים שאינם נתמכים. במקרה זה, החזרה תהיה לתמונה בפורמט JPG או PNG. הנה איך אתה עושה את זה.

  srcset = "example.webp 1x" type = "image / webp">   

עבור קוד זה, תמונות / מלא-מדריך- to-using-webp-image-format_13.jpg ייטענו אם המשתמש השתמש ב- Firefox או ב- Safari.

תצוגה מקדימה של תמונות WebP

ניתן לצפות בתצוגה מקדימה של תמונות WebP ב- Chrome ו- Opera browers. אבל אם אתה רוצה לעשות את זה באופן מקומי על המחשב שלך, תצטרך כמה כלים.

משתמשי Mac יכולים להשתמש WebPQuickLook לתצוגה מקדימה של תמונות בפורמט WebP באמצעות פונקציית Quick Look (כאשר התמונה נבחרה או מסומנת, הקש על מקש הרווח).

עבור משתמשי Windows, WebPCodec יציג תצוגה מקדימה של תמונות ממוזערות של תמונות WebP בסייר הקבצים. הן WebP ו- JPEG שוויון יוצגו. במערכות הפעלה נתמכות מסוימות (Vista, 7, 8), תמונת WebP יכולה להופיע גם ב- Windows Photo Viewer.

יותר: ReSCR.it מספק תמונות בפורמט WEBP באופן אוטומטי וזה זמין אם אתה שומר את התמונות שלך עם MaxCDN. (קרא עוד)

הפניות נוספות

• המרת GIF מונפש ל - WebP
• כיצד פועל WebP
• פריסת WebP באמצעות קבל משא ומתן על תוכן
• אינטרנט מהיר יותר, קטן ויפה יותר עם WebP
• פריסת תבניות תמונה חדשות באינטרנט
• תיעוד API של WebP