אחת מהסיבות לאיטיות טעינה של אתר הוא משקל גבוה של סך כל הרכיבים שצריכים להיטען עבור התצוגה שלו. ברוב המקרים, החלק הארי של הרכיבים הללו הן תמונות.
תמונות הן דבר כבד. הן היו עוד יותר כבדות לפני שהמציאו את הפורמטים המכווצים כדוגמת jpeg, אבל גם כשהן בפורמטים האלה, כשהן באיכות טובה ובגודל מספיק הן שוקלות כמה מגה (כמו למשל תמונות שצולמו במצלמה דיגיטלית עם רזולוציה טובה), ומכילות כמה מיליוני פיקסלים. לתמונות בגודל כזה אין שימוש אמיתי. כדי להבין מה קורה בתמונה, משתמש יכול להסתפק בתמונות קטנות בהרבה.
הצגה של התמונות המקוריות שמוצגות בהקטנה לא יעילה במקרה הזה, מפני שבכל פעם שהעמוד ייטען הוא יצטרך להוריד את התמונה הכבדה ורק אחר כך להקטין אותה. דבר כזה כאמור פוגע בזמן זמן הטעינה, שבתורו פוגע בקידום האתר ובחוויית המשתמש.
הברירה האחרת היא להטעין מלכתחילה תמונה בגודל שונה. מערכות לניהול תוכן (לדוגמה, וורדפרס) לרוב עושות בעבורנו את העבודה כשכל תמונה שעולה למערכת נחתכת אוטומטית לכמה גדלים – גדול, בינוני וקטן (מה שנקרא “תצוגת תאמבנייל”)
אלא שהתמונות האלה הן בגדלים הללו מוגדרים מראש, ולא תמיד עונות על הדרישה שלכם. לדוגמה, אם אתם רוצים להציג תמונה בתוך אלמנט בגובה 250 פיקסלים על 127 פיקסלים, ו-וורדפרס הכינו לכם תמונה בגודל medium בגובה 300 פיקסלים – תצטרכו להשתמש בפתרון שהסברנו כלא יעיל, של טעינת תמונה גדולה יותר והקטנה שלה בתצוגה.
האלטרנטיבה היא להגדיר בעצמנו ״גודל תמונה חדש״. בוורדפרס יש פקודה בשם add image size, שבה ניתן להגדיר גדלים לבחירתנו.
הסינטקס הוא:
<?php add_image_size( $name, $width, $height, $crop); ?>
כשהאטריביוטס הם: שם הגודל, רוחב וגובה, והאם רוצים לחתוך את התמונה או לשנות את הגודל שלה באופן פרופורציונלי ומלאכותי. את הפקודה מוסיפים בקובץ functions.php, ולאחר שהוספנו יש לרענן את מאגר התמונות. ניתן לעשות את זה באמצעות התוסף regenerate thumbnails, שהרצה שלו תיצור גם את הגדלים הדיפולטיביים (“גדול”, “בינוני”, “קטן”) וגם את החדשים.
לאחר שהגדרנו ורפרשנו את המאגר, ניתן “לדלות” את התמונה באמצעות כל הפונקציות למשיכת תמונה, כגון the_post_thumbnail(). לדוגמה:
אם נגדיר תמונה בשם moshe בגובה 280 וברוחב 120, כך שכל חריגה “תיחתך”, נכתוב כך:
<?php add_image_size('moshe',120,280,true); ?>
לאחר רענון מאגר התמונות נוכל לדלות את התמונה כך:
<?php the_post_thumbnail('moshe'); ?>
כמובן שכל תמונה חדשה שתעלו למאגר תייצר באופן אוטומטי תמונה בגודל החדש.