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

תמונה מהטלפון יכולה לשקול פי עשרים ממה שהאתר צריך. איך בוחרים בין JPG, PNG, WebP, AVIF ו-SVG, כמה פיקסלים באמת נחוצים, ונוהל קצר להכנת כל תמונה לפני שהיא עולה.

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

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

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

מה קורה כשהדפדפן טוען עמוד עם תמונות

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

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

שלושה דברים קובעים כמה זמן לוקחת התמונה הזו:

• מספר הפיקסלים. תמונה ברוחב 4000 פיקסלים מכילה בערך פי עשרה פיקסלים מתמונה ברוחב 1200, גם אם שתיהן מוצגות באותו גודל על המסך.
• הפורמט. אותה תמונה בדיוק יכולה לשקול פי כמה כ-PNG מאשר כ-JPG או WebP.
• רמת הדחיסה. ברוב התמונות אפשר לדחוס הרבה לפני שהעין מבחינה בהבדל, במיוחד כשהתמונה מוצגת על מסך טלפון.

איזה פורמט לאיזו תמונה

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

✅ כלל אצבע: צילום עולה כ-WebP, או כ-JPG אם המערכת לא מקבלת WebP. לוגו עולה כ-SVG. PNG נשמר לצילומי מסך ולמקרים שבהם צריך שקיפות ואין אפשרות אחרת.

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

כמה פיקסלים באמת צריך

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

כמה נקודות התחלה סבירות, שכדאי להתאים לתבנית שלכם:

• תמונה ברוחב מלא של המסך: בסביבות 1920 עד 2400 פיקסלים ברוחב.
• תמונה בתוך גוף הטקסט: בסביבות 1200 עד 1600 פיקסלים.
• תמונה ממוזערת בכרטיס או ברשימה: בסביבות 600 עד 800 פיקסלים.

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

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

<img src="product-1200.webp"
     srcset="product-600.webp 600w, product-1200.webp 1200w, product-2400.webp 2400w"
     sizes="(max-width: 768px) 100vw, 1200px"
     loading="lazy"
     width="1200" height="800"
     alt="תיאור קצר של המוצר">

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

נוהל של שישה צעדים לפני שתמונה עולה לאתר

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

• צעד 1: לבדוק איפה התמונה תוצג. ברוחב מלא, בתוך טקסט או כתמונה ממוזערת. מזה נגזר הרוחב.
• צעד 2: לחתוך לפני שמקטינים. אם רק חלק מהתמונה רלוונטי, לחתוך אותו קודם, כדי לא לשלם במשקל על שוליים שאף אחד לא יראה.
• צעד 3: להקטין לרוחב היעד. לפי הטבלה שלמעלה, ולא יותר.
• צעד 4: לבחור פורמט. צילום ל-WebP או JPG, לוגו ל-SVG, צילום מסך ל-PNG או WebP.
• צעד 5: לדחוס ולבדוק בעין. כלי חינמי כמו Squoosh של גוגל מאפשר להזיז את רמת האיכות ולראות את התוצאה לצד המקור. ברוב הצילומים, איכות של 70 עד 80 אחוז נראית זהה למקור על מסך טלפון.
• צעד 6: לתת שם קובץ וטקסט חלופי. שם קובץ שמתאר את התוכן, באנגלית ובלי רווחים, וטקסט חלופי שמתאר מה רואים בתמונה. הטקסט החלופי משרת קוראי מסך ומנועי חיפוש, ומעט מאוד עסקים ממלאים אותו.

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

מה בונה האתרים כבר עושה בשבילכם

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

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

גם כשהפלטפורמה מקטינה אוטומטית, יש שני דברים שהיא לא תעשה: היא לא תחתוך את התמונה בשבילכם, והיא לא תכתוב טקסט חלופי. מי שבוחר עכשיו פלטפורמה לאתר חדש, למשל בין הכלים שמופיעים בהשוואה בין Framer ל-Webflow, יכול להוסיף את הטיפול האוטומטי בתמונות לרשימת השאלות שבודקים בתיעוד לפני שמחליטים.

מתי לא להשקיע בזה

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

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

עוד מדריכים על עבודה עם חומרים גרפיים בעסק קטן נמצאים במדור העיצוב.

שאלות נפוצות

האם להמיר את כל התמונות באתר ל-WebP?

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

האם דחיסה פוגעת באיכות שהלקוחות רואים?

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

מה זה טקסט חלופי, והאם הוא באמת חשוב?

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

איך יודעים אם התמונות הן מה שמאט את האתר?

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