תמונות רספונסיביות עבור אלגוריתם ידידותי למובייל

הספירה לאחור לקראת אחד משינויי האלגוריתם המשמעותיים ביותר בתולדות גוגל ובעלי האתרים מתקרבת לקיצה. ב-21 באפריל גוגל תשיק את האלגוריתם הידידותי למובייל (mobile-friendly algorithm), ואינספור אתרים בעולם שאינם מותאמים באופן מושלם למובייל צפויים לסבול ירידות משמעותיות במיקומים האורגניים שלהם.

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

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

שימוש בתגיות srcset או picture

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

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

שימוש בתגית srcset מאפשר לנו, כאמור, לטעון מראש כמה תמונות באיכות שונה, כאשר הדפדפן יחליט בעצמו איזו גרסה יציג בהתאם לאיכות הרזולוציה שלו. במקרה זה על הגרפיקאי ליצור כמה גרסאות של אותה תמונה, אחת לכל מכשיר בעל צפיפות פיקסלים שונה. עבור גולשי דקסטופ נשתמש בתמונה בגודל 1X כאשר הכוונה בגודל 1X היא שמידת הפיקסל כפי שהיא מוגדרת ב-CSS מתאימה אחד לאחד למידות הפיקסל של המכשיר, עבור מכשירי מובייל בעלי צפיפות פיקסלים גבוהה יותר ניצור תמונה נוספת, גדולה יותר, ביחס של 2X או כאלה שצפיפות הפיקסלים שלהן גבוהה פי 2 מזו המוגדרת ב-CSS. פרט לאלה ניצור תמונה אחת נוספת בגודל 1X שתהיה ברירת מחדל עבור דפדפנים שאינם תומכים בתגית זו (ניתן להשתמש בספריית Picturefill כדי לאפשר תאימות גם בדפדפנים ישנים יותר).

הנה קוד לדוגמה  (ניתן כמובן לטעון יותר משתי תמונות ויש להגדיר את גודל 1X,2X):

<img src="default.jpg" srcset="small-image.jpg 1x, large-image.jpg 2x">

 

• טיפ למתקדמים שאוהבים לקרוא לעומק: מדוע השימוש ב- srcset עדיף אלף מונים על שימוש ב-media queries – המאמר מיועד לגרפיקאים אבל יש לו השלכות לא מבוטלות גם על SEO טכני.

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

שימוש בתגית picture ב-HTML5

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

<picture>
      <source media="(min-width: 800px)" srcset="logo.jpg, logo-2x.jpg 2x">
      <source media="(min-width: 320)" srcset="logo-small.jpg, logo-small-2x.jpg 2x">
      <img src="head-default.jpg" srcset="head-default-2x.jpg 2x" >
</picture>

 

בקוד לדוגמה זה, אם רוחב המסך הוא 800 פיקסלים ומעלה נטען את קובץ logo.jpg או logo-2x.jpg בהתאם לרזולוציה של המסך. עבור מסכים שגודלם בין 320 פיקסלים ל-800 פיקסלים נטען את קובץ התמונה logo-small.jpg או logo-small-2x.jpg בהתאם לרזולוציה ועומק הפיקסלים של המסך. עבור גודל מסך הקטן מ-320 פיקסלים (גודל המסך של אייפון מדורות קודמים) נטען את התמונה logo-default.jpg שתופיע גם בדפדפנים שאינם תומכים בתגית picture (כאמור ניתן להתגבר על מכשול זה בעזרת ספריית ה-JS בשם Picturefill polyfill).

סיכום שאינו כולל בלבולי מוח טכניים

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

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