תמונות גדולות ולא מיועלות הן הסיבה מספר אחת לדפי אינטרנט איטיים, ודפים איטיים מאבדים מבקרים ודירוגים. החדשות הטובות הן שלגרום לתמונות לטעון מהר יותר זה פשוט: בחרו את הפורמט הנכון, שנו את גודל התמונות לגודל שבו הן מוצגות, דחסו אותן, ותנו לדפדפן ול CDN לעשות את השאר. המדריך הזה עובר על כל טכניקת אופטימיזציה של תמונות שמשפרת את זמני הטעינה, עם כלים חינמיים לבצע כל שלב ישירות בדפדפן שלכם.
תמונות הן בדרך כלל החלק הכבד ביותר של דף אינטרנט. כשהן גדולות מדי, הדף לוקח יותר זמן לטעון, המבקרים עוזבים, וגוגל, שמשתמשת במהירות הטעינה וב Core Web Vitals כאותות דירוג, שמה לב לכך. אופטימיזציה של התמונות שלכם היא אחת הפעולות בעלות ההשפעה הגדולה ביותר שאתם יכולים לעשות גם עבור חוויית המשתמש וגם עבור SEO.
הטעות הגדולה ביותר היא להעלות תמונה ענקית ולתת לדפדפן לכווץ אותה על המסך. אם הפריסה שלכם מציגה תמונה ברוחב 800 פיקסלים, הגשה של קובץ ברוחב 4000 פיקסלים מבזבזת את רוב ההורדה. שנו את גודל התמונות למידות שבהן הן באמת מופיעות לפני שאתם מעלים אותן.
השתמשו בכלי החינמי שלנו שינוי גודל תמונה כדי להגדיר מידות פיקסלים מדויקות בדפדפן, או שינוי גודל תמונות בכמות כדי לעשות תיקייה שלמה בבת אחת, מה שמושלם לגלריה או פורטפוליו עם הרבה תמונות.
הדחיסה מסירה נתונים שהעין לא מבחינה בהם, ומקטינה את גודל הקובץ באופן דרמטי עם מעט או ללא אובדן איכות נראה לעין. זו הדרך המהירה ביותר להפחית את משקל התמונה.
דחסו תמונה בודדת עם הכלי שלנו דחיסת תמונה, שיכול אפילו לכוון לגודל KB מדויק, או הריצו אצווה דרך דחיסת תמונות בכמות. הכל קורה בדפדפן שלכם, כך שהקבצים שלכם לעולם אינם מועלים.
הפורמט שאתם בוחרים משפיע גם על האיכות וגם על גודל הקובץ:
טלפון לא זקוק לאותה תמונה גדולה כמו מחשב שולחני. השתמשו במאפיין srcset או בתכונת תמונות רספונסיביות ב CMS שלכם כך שכל מכשיר יוריד תמונה בגודל המתאים למסך שלו. זה לבדו יכול לקצר משמעותית את זמני הטעינה בנייד.
טעינה עצלה מעכבת את התמונות שמחוץ למסך עד שהמבקר גולל אליהן, כך שהדף הופך לשמיש הרבה יותר מהר. דפדפנים מודרניים תומכים בכך באופן מובנה: פשוט הוסיפו loading="lazy" לתגי התמונה שלכם, או הפעילו זאת ב CMS שלכם.
מטמון מאפשר למבקרים חוזרים להשתמש מחדש בתמונות שכבר מאוחסנות בדפדפן שלהם במקום להוריד אותן שוב. הגדירו תוקף לתמונות בהגדרות השרת שלכם, למשל בקובץ .htaccess, כך שהדפדפנים ישמרו אותן במשך שבועות או חודשים.
CDN מאחסן עותקים של התמונות שלכם בשרתים ברחבי העולם ומגיש לכל מבקר מהשרת הקרוב ביותר, ובכך מקצר את המרחק שהנתונים עוברים. ספקים כמו Cloudflare יכולים לשפר באופן ניכר את אספקת התמונות, במיוחד לקהל גלובלי.
דפים עם תמונות רבות, כמו פורטפוליו צילום או גלריית מוצרים, זקוקים לתשומת לב נוספת מכיוון שמשקל התמונות מצטבר במהירות. השילוב המנצח הוא:
יחד, אלה יכולים להפוך דף איטי ועמוס בתמונות לדף שנטען כמעט מיידית.
לאחר האופטימיזציה, מדדו את התוצאה. כלים חינמיים כמו Google PageSpeed Insights ו GTmetrix מדרגים את מהירות הטעינה שלכם ומסמנים תמונות שעדיין גדולות מדי, כך שתדעו בדיוק מה לתקן בהמשך.
שנו את גודל כל תמונה לגודל שבו היא מוצגת, דחסו אותה, השתמשו בפורמט מודרני כמו WebP, הפעילו טעינה עצלה, והגישו תמונות דרך CDN. שינוי גודל ודחיסה לבדם בדרך כלל נותנים את הדחיפה הגדולה ביותר במהירות.
היעילות ביותר הן שינוי גודל התמונות לגודל התצוגה שלהן, דחיסתן, שימוש ב WebP, הגשת גדלים רספונסיביים לכל מכשיר, טעינה עצלה של תמונות מחוץ למסך, מטמון דפדפן ו CDN.
WebP הוא הפורמט הטוב ביותר למהירות ברשת המודרנית. הוא מייצר קבצים קטנים יותר מ JPG או PNG באותה איכות ותומך בשקיפות. השתמשו ב JPG לתמונות כאשר WebP אינו אפשרות.
Google PageSpeed Insights מסמן תמונות גדולות מדי ולא דחוסות. תקנו אותן על ידי שינוי גודל לגודל התצוגה, דחיסה, המרה ל WebP והוספת טעינה עצלה, ואז בדקו מחדש כדי לוודא שהציון השתפר.
שנו גודל ודחסו בכמות כל תמונה, המירו אותן ל WebP וטענו אותן בטעינה עצלה כך שרק התמונות שבתצוגה נטענות תחילה. עבור פורטפוליו עם הרבה תמונות זו הדרך המהירה ביותר לדף שנטען במהירות.
דחיסה עם אובדן מסירה נתונים שהעין בקושי מבחינה בהם, כך שתמונה דחוסה היטב נראית כמעט זהה בעודה שוקלת הרבה פחות. דחיסה ללא אובדן שומרת כל פיקסל אך מקטינה את הקובץ פחות.
תמונות מהירות יותר משמעותן מבקרים מרוצים יותר, שיעורי נטישה נמוכים יותר ו SEO טוב יותר. התחילו בשתי הטכניקות שמשפיעות הכי הרבה: שנו את גודל התמונות לגודל התצוגה שלהן ודחסו אותן. הכלים החינמיים שלנו לשינוי גודל שינוי גודל ו דחיסה, המבוססים על הדפדפן, הופכים את שניהם למהירים, ושום דבר שאתם מעלים לעולם אינו עוזב את המכשיר שלכם.