כלים לאופטימיזציה של תמונות

שאלה: אתר עם כ-1600 תמונות שעל כולן גוגל מקטר. איך עושים אופטימיזציות לכמות הזו?

תשובה קצרה: עושים responsive images. מוסיפים גדלים של תמונות לפי הצורך, ומשחקים מעט עם האטריביוט sizes במידה והתמונה היא לא על רוחב מלא של העמוד (כלומר 100vw)

תשובה ארוכה יותר, ולא תמיד צריך לעשות אותה, וגם ככה היא מורכבת, כי היא דורשת תכנות: להדבק לאקשן shutdown, לקחת את תוכן כל העמוד בבאפר, "לקצור" את כל התמונות, לבדוק כל תמונה אם יש לה אטריביוט width, ואז להחליף את התמונה לתמונה מתאימה ברוחב המתאים – בין אם זו תמונה מוכנה כבר מה- image sizes, ובין אם זו תמונה שמיוצרת on the fly. במידה ויש לכם קאש, אחרי הרצה אחת, pleloaded, האתר ישקול הרבה פחות והתמונות יהיו בגודל המדויק. אבל כאמור, פרוצדורה כזאת היא רק נשק יום הדין.

שלושת הפלאגינים האלה עוזרים מאוד בשני המקרים:

  1. Regenerate Thumbnails – אחרי ששיניתם את גדלי התמונות הרצויים, או הוספתם חדשים עם הפונקציה add_image_sizes, יצרו מחדש ו-וורדפרס ייצר בשבילכם את התמונה הרפסונסיבית הרצויה, כולל הגדלים החדשים שזה עתה יצרתם. שימו לב, יותר גדלי תמונות שיצרתם הם יותר תמונות שמורות בתיקיית uploads. באיזה שהוא שלב היא תתפוצץ. הוסיפו גדלים בחכמה.
  2. PNG to JPG – כדי לשמור על עמוד קל וקומפקטי רצוי מאוד לוותר כמה שניתן על שימוש ב-png לטובת תמונות מכווצות. פעולה כזאת תחסוך 90% בד"כ מכובד האתר
  3. Post Thumbnail Editor – אם החיתוך האוטומטי של וורדפרס לא עלה יפה, תוכלו לחתוך את התמונה מחדש

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

על מנת לחסוך בקשות HTTP במידה ויש כמה תמונות (וכמובן במידה ויש קאש) לא מן הנמנע שלהפוך תמונות ל- base64 יעזור מאוד. עדיף לעשות כאלה דברים לתמונות קטנטנות, שיקר יותר לטעון אותם מאשר לשלב אותן בעמוד ה-html.

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

טיפים ומאמרים אופטימיזציה, וורדפרס, עיבוד תמונה

בחזרה למאמרים