כיווץ תמונות והמרה לפורמט WebP בחינם

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

למה תמונות כבדות מאטות את האתר?

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

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

מה זה WebP, ולמה הוא קטן יותר?

WebP הוא פורמט תמונה שגוגל פיתחה במיוחד לאתרים. לפי הנתונים של גוגל, תמונה בפורמט WebP קטנה ב-25 עד 34 אחוז מתמונת JPG באותה איכות, וב-26 אחוז מתמונת PNG כשלא מוותרים על אף פיקסל. הוא גם שומר על רקע שקוף, כך שהוא מחליף את שניהם.

איזה רוחב ואיזו איכות לבחור?

הרוחב חוסך יותר מכל הגדרה אחרת. תמונה שמוצגת בתוך מאמר לא צריכה יותר מ-1200 פיקסלים, תמונת מוצר מסתדרת עם 800, ורק תמונת רקע שנמתחת על כל המסך צריכה 1920 ומעלה. תמונה שכבר צרה מהרוחב שבחרתם נשארת בגודלה.

באיכות, כלומר בעוצמת דחיסת התמונות, 80 הוא האיזון שאני ממליץ עליו לרוב האתרים: העין לא מבחינה בהבדל, והקובץ קטן בהרבה. לתמונות רקע ולתמונות קטנות אפשר לרדת ל-70. מי שמציג עבודות צילום, אוכל או תכשיטים, שבהם הפרטים הם המוצר, יכול לעלות ל-90.

שם הקובץ לפני ההעלאה

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

השדה "שם לקבצים" נותן לכל התמונות שם אחיד, עם מספר רץ בסוף. אני ממליץ על אנגלית ומקפים, כמו leather-wallet-brown, כי שם בעברית הופך בכתובת לרצף של סימנים ונשבר בחלק מהמערכות. מה עוד משפיע על תמונות בגוגל פירטתי במדריך על אופטימיזציה לתמונות.

מה קורה למיקום ולפרטים שבתוך התמונה?

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

וורדפרס: לכווץ לבד או עם תוסף?

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

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

המרת WebP בחזרה לפורמט JPG

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