כללי SEO לעיצוב ובניית אתרים – דחיסת תמונות

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

פורמט התמונה

אשתדל שלא לחזור על מה שכבר נכתב על ידי המומחים של גוגל ב-Web Fundamentals  אלא להרחיב לתחומים בהם הם לא נגעו, הראשי בהם הוא היכולת לקרוא לתמונות בהתאם לגודל המסך של הגולש.

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

ראשית הפורמט. יש בסך הכל 4 פורמטים של תמונות שנתמכים בכל הדפדפנים באופן מלא:

• JPEG
• GIF
• PNG
• SVG

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

• JPEG או JPG הוא פורמט התמונות הנפוץ ביותר ברשת והוא מתאים בעיקר לתמונות עשירות בצבעים ובפרטים. ההמלצה החדש משמעית ביחס לתמונות JPEG היא לשמור אותן בפורמט Lossy, כלומר כזה שמעריך בקירוב את כל פרטי התמונה ולא שומר את כל פרטי התמונה והצבעים במלואם. ברוב המקרים, מחלקת הגרפיקה תשלח JPEG בפורמט Lossless שהבדלי האיכות בינו לבין פורמט Lossy מזעריים, אבל משקל התמונה שונה משמעותית (דוגמה למטה), לפיכך המשימה הראשונה שלנו בטיוב תמונות היא הפחתת המשקל של קבצי JPEG.
• GIF הוא פורמט ישן ולא שימושי במיוחד שזוכה בשנים האחרונות לעדנה מחודשת תודות לתופעת ה-Animated Gifs שעושה כבוד לעיצובי הרטרו מסוף שנות ה-90. עבור אתרים מודרניים יש ל-GIF שימוש אחד בלבד והוא עבור אנימציות פשוטות דלות בפיקסלים.
• PNG הוא מחליפו המודרני יותר של ה-GIF וכמו JPEG, גם אותו ניתן לשמור בפורמט Lossy אם כי בצורה שונה מעט. PNG מתאים בעיקר לשמירה של תמונות דלות יחסית בפרטים או תמונות בהן נדרשת שקיפות בחלקים מהתמונה (PNG מאפשר לשמור תמונות שאזורים בהן שקופים ולא מוצגים בדפדפן). PNG ניתן לשמור בשלוש רמות של איכות: PNG 8, PNG 24 ו-PNG 32 כל רמת איכות כוללת יותר פרטים ומעלה את משקל הקובץ, לכן מומלץ לשמור קבצי PNG כמעט תמיד ברמה הנמוכה של PNG 8. אם רמה זו אינה מספקת, כנראה עדיף לנו לבחור בפורמט JPEG. דוגמה לשימוש בקובץ PNG היא הלוגו של ויקיפדיה שכולל הרבה אזורים שקופים:
• הפורמט האוניברסלי האחרון ואחד השימושיים שבהם הוא SVG או Scalable Vector Graphics שמתאים במיוחד לקבצים גרפיים דוגמת לוגו, גרפים וכיוצא באלה. היתרון העיקרי של קבצי SVG הוא משקלם הנמוך והיכולת להגדיל אותם לכל גודל שהוא מבלי לאבד פרטים ומבלי להעלות את משקל הקובץ. קבצי SVG פשוטים כולל פילטרים ואנימציות ניתן ליצור גם באמצעות HTML5 – מבלי להשתמש בקובץ תמונה בכלל אלא אך ורק בקוד. באתר הבא תמצאו מספר דוגמאות לשימוש מתקדם ב-SVG ו-HTML5.

דוגמאות לשמירת קובץ JPEG ללא דחיסה (Lossless)

דוגמאות לשמירת קובץ JPEG עם דחיסה (Lossy)

דוגמאות לשמירת קובץ PNG ללא דחיסה ועם שקיפות (Lossless)

התאמת תמונות לגודל המסך והגדרת גודל תמונה בקוד

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

Art Direction / srcset

פתרון פשוט לא פחות, אבל כזה שחלק ממעצבי האינטרנט עדיין לא מודעים אליו הוא השימוש בתגית srcset שהיא חלק מ-HTML5.  עם תגית srcset ניתן להגדיר תמונה אחת כברירת מחדל וסט של מספר תמונות נוספות בגדלים שונים שהדפדפן מחשב באופן אוטומטי וטוען בהתאם לגודל המסך. srcset והתגית המלווה שלה, תגית <picture> עדיין לא נתמכות על ידי כל הדפדפנים, אבל כבר כיום מפתחים יכולים להשתמש בספריית picturefill polyfill כדי לתמוך בתגיות גם בדפדפנים שעדיין לא מותאמים להן.

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

Lazy Loading

אחת הטכניקות הנפוצות ביותר היום לבניית עמודי נחיתה, אתרים שיווקיים או דפי מוצר היא באמצעות גלילת פרלקס (parallax) שטוענת תוכן חדש לעמוד בהתאם לעומק הגלילה. שימוש בפרלקס ללא Lazy Loading של התמונות (אבל גם של הטקסט) יוצר עומס מיותר מהירות הטעינה ופגע בחוויית המשתמש. שימוש ב- Lazy Loading, טכניקה ישנה למדי המאפשרת טעינה של תכנים לדף רק כאשר מגיעים לעומק גלילה מסוים, מקל על טעינת העמוד ואינו פוגע כלל בקידום האורגני של האתר.

קצת על רזולוציה וגדלי תמונות לאתרי אינטרנט, המיתוס של 72 DPI/PPI

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

ההסבר בקצרה: DPI או Dots per Inch הוא מושג הלקוח מעולם הפרינט. במסכי מחשב או כל סוג מסך אחר אין כזו שיטת מדידה, אלא מדידה לפי פיקסלים ולפי פיקסלים בלבד. לא משנה כמה DPI/PPI תבחרו, התמונה תמיד תישאר זהה עבור תמונות המוצגות על מסכים. תוכלו להזין ערך של 1 או 100, התוצאה תהיה זהה והפרמטר היחיד שקובע הוא גודל התמונה בפיקסלים.

מילות סיכום

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

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

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