מה גודל התמונה המומלץ לאתר?

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

לתמונת Hero רחבה אפשר להתחיל בדרך כלל באזור של 1600–2000px לרוחב. תמונה שמופיעה בתוך מאמר יכולה להסתפק בהרבה מקרים באזור 800–1200px, וכרטיס קטן באתר לא צריך לקבל תמונה ברוחב 3000px רק כי זה הקובץ המקורי שיצא מהמצלמה.

אבל מספר הפיקסלים הוא רק חלק מהעניין.

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

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

מה ההבדל בין גודל תמונה למשקל שלה?

אלה שני דברים שונים שקל לערבב ביניהם.

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

המשקל אומר כמה מקום הקובץ תופס. אותה תמונה יכולה לשקול 150KB אחרי דחיסה טובה או כמה מגה־בייט אם היא נשמרה בפורמט ובהגדרות לא מתאימים.

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

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

איזה גודל מתאים לתמונת Hero?

תמונת Hero היא בדרך כלל אחת התמונות הגדולות ביותר באתר, ולכן היא גם אחת המקומות שבהם הכי קל להגזים.

ברוב המקרים, רוחב של בערך 1600–2000px הוא מקום סביר להתחיל ממנו לתמונה רחבה במחשב.

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

אבל אין הרבה היגיון להעלות תמונה ברוחב 5000px רק כי היא קיימת.

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

‏Google גם ממליצה להגיש תמונות בגודל שמתאים לגודל שבו הן מוצגות, ולא לשלוח קובץ גדול משמעותית מהנדרש.

ומה עם מסכי Retina?

פה הדברים נהיים קצת יותר מעניינים.

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

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

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

אבל גם כאן לא צריך להפוך את זה לחוק קשיח.

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

מה הגודל המומלץ לתמונה בתוך מאמר?

לתמונה שנמצאת בתוך טור תוכן או מאמר, אין בדרך כלל צורך באותו רוחב כמו Hero.

אם טור המאמר עצמו הוא למשל 700–900px, תמונה ברוחב של בערך 1000–1400px תספיק בהרבה מאוד מקרים גם למסכים צפופים.

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

הטעות הנפוצה היא לקחת תמונה מקורית ברוחב 4000px ולשים אותה בתוך אזור שמוצג בפועל ב-700px.

היא לא נראית פי חמישה יותר טוב. היא פשוט כבדה יותר.

ומה לגבי תמונות של כרטיסים ומוצרים?

פה כדאי לחשוב לפי המקום שבו התמונה חיה.

כרטיס פרויקט שמוצג ברוחב 400px לא צריך לקבל אוטומטית את אותה תמונה שבה השתמשנו ל-Hero של 2000px.

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

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

העיקרון נשאר אותו דבר: לא לשלוח את הגרסה הכי גדולה לכל מקום באתר רק כי היא כבר קיימת.

כמה תמונה באתר צריכה לשקול?

אנחנו לא אוהבים חוקים כמו "כל תמונה חייבת להיות מתחת ל-100KB".

לפעמים זה אפשרי. לפעמים זה ייראה רע.

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

בתור נקודת התחלה, אנחנו משתדלים שתמונות רגילות באתר יהיו באזור של 100–300KB כשאפשר לשמור על איכות טובה.

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

מה שפחות הגיוני הוא תמונה של 2MB שמוצגת בגודל קטן בלי שום סיבה.

אם אפשר להוריד משמעותית את המשקל בלי לראות הבדל אמיתי באיכות, עדיף לעשות את זה.

‏WebP או AVIF: מה עדיף?

שני הפורמטים מתאימים מאוד לאינטרנט.

‏WebP כבר הפך לבחירה מאוד נפוצה ומאפשר בדרך כלל לשמור על איכות טובה במשקל נמוך יותר מ-JPEG או PNG.

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

אבל בפועל לא תמיד צריך לבחור ידנית.

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

לכן כדאי לבדוק קודם מה הפלטפורמה שבה אתם משתמשים כבר עושה עבורכם.

ומה עם PNG?

‏PNG עדיין שימושי, אבל הוא לא צריך להיות ברירת המחדל לכל תמונה.

אם מדובר בצילום רגיל, PNG יכול ליצור קבצים כבדים מאוד בלי לתת יתרון משמעותי.

הוא מתאים יותר למצבים שבהם צריכים שקיפות או שמירה מדויקת מאוד על פרטים מסוימים.

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

ומה עם SVG?

‏SVG מתאים לדברים אחרים לגמרי.

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

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

אם יש לכם לוגו וקטורי ואתם מעלים אותו כ-PNG ברוחב 3000px רק כדי שהוא לא יהיה מטושטש, כנראה שאתם פותרים את הבעיה בדרך הלא נכונה.

האם צריך להכין תמונה אחרת למובייל?

לפעמים כן, אבל לא תמיד בגלל הרזולוציה.

הבעיה הגדולה יותר היא לעיתים הקומפוזיציה.

‏Hero רחב של 16:9 יכול להיראות מצוין במחשב, אבל בטלפון הוא נהיה צר מאוד או נחתך בצורה שמעלימה את הדבר החשוב בתמונה.

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

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

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

מה קורה ב-Framer?

‏Framer כבר עושה חלק גדול מהעבודה הזאת אוטומטית.

נכון להיום, כשמעלים תמונות רגילות ומשאירים את Resolution על Auto, Framer יוצר גרסאות בגדלים שונים ומגיש למשתמש גודל שמתאים יותר למסך שלו.

הוא גם ממיר תמונות לפורמטים מודרניים כמו AVIF ו-WebP בהתאם לדפדפן.

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

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

אז למה בכלל צריך לחשוב על גודל תמונה אם הפלטפורמה עושה אופטימיזציה?

כי אופטימיזציה אוטומטית לא מתקנת הכול.

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

אם ה-crop לא מתאים למובייל, דחיסה לא תפתור את הקומפוזיציה.

ואם אתם משתמשים בקוד מותאם, מערכת ישנה או רכיב שלא משתמש נכון ב-responsive images, יכול להיות שהקובץ המקורי עדיין יישלח למשתמש.

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

איך אנחנו בוחרים גודל בפועל?

אנחנו מתחילים מהמקום שבו התמונה אמורה להופיע.

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

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

לבסוף בודקים את המשקל ואת האיכות.

אם אפשר להוריד 70% מהמשקל והתמונה נראית אותו דבר לעין, אין סיבה להשאיר את הקובץ הכבד.

אז באיזה גודל כדאי להתחיל?

אם רוצים כמה מספרים פשוטים להתחלה:

‏1600–2000px לתמונת Hero רחבה ברוב האתרים.

‏1000–1400px לתמונה גדולה בתוך מאמר או אזור תוכן.

‏600–1000px לכרטיסים ותמונות בינוניות, בהתאם לגודל שבו הן באמת מוצגות.

לתמונות מוצר כדאי לשמור מקור גדול מספיק ל-Zoom, אבל להשתמש בגרסאות קטנות יותר בתצוגות של כרטיסים וגלריות.

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

אלה לא חוקים. אלה נקודות התחלה.

אין גודל קסם

הטעות היא לחפש מספר אחד שאפשר להשתמש בו לכל תמונה באתר.

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

תמונה של 2000px יכולה להיות החלטה מצוינת ל-Hero והחלטה מיותרת לחלוטין ל-thumbnail קטן.

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

אנחנו ב-atar studio מסתכלים על תמונות כחלק מהעיצוב וגם כחלק מהביצועים של האתר. תמונה צריכה להיראות טוב, אבל היא לא צריכה להאט את כל העמוד רק כדי להיות קצת יותר גדולה מהנדרש.