משוב מהסקר בנושא אופטימיזציית תמונות בקיץ 2019

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

סם דוטון

בפוסט הזה מפורט המשוב החופשי ש-Google Web DevRel קיבל בסקר בנושא שיטות לאופטימיזציה של תמונות בקיץ 2019. התשובות נשלחו באמצעות Web Fundamentals (היסודות של בניית אתרים) ו-@ChromiumDev. המוטיבציה בסקר הייתה מדוע רוב האתרים לא פועלים בהתאם לשיטות המומלצות לאופטימיזציה של תמונות, למרות שנראה שיש דרך קלה יחסית לשפר את הביצועים. נתוני התשובות לא מופיעים כאן כי היו פגמים במתודולוגיית הסקר.

קהל

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

תגובות

WebP

• "אני אוהב את WebP, אבל הוא עדיין לא מוכן לגמרי. בנוסף, WordPress שלנו לא תומך ב-WebP. אחת מהאפליקציות הפופולריות ביותר לעריכת תמונות, Photoshop, לא תומכת גם ב-WebP מהאריזה. לכן אנחנו לא יכולים להסתמך על אפליקציות או שירותים של צד שלישי לדחיסת תמונות."
• "צריך להגדיר את WebP לשימוש ב-Safari."
• "אשמח להשתמש ב-WebP אם אוכל לייצא אותם מ-Photoshop/Figma/Sketch וכל הדפדפנים יתמכו בו". [הערה: Sketch לא תומך ב-WebP]
• "פתרון הפורמט הבא הוא מצוין."
• "הפסק לדחוף את WebP כל כך חזק כשהתמיכה בדפדפן חלשה, ושקול אם יש צורך ב-PNG במקום ב-JPEG לצילומי מסך."
• "Google Docs לא תומך ב-WebP".
• "אנחנו נשתמש ב-WebP אך ורק ב-WebP, אבל אנחנו חוששים לגבי תאימות הדפדפן".
• "קודם כל צריך לתקן את התאימות של הדפדפן ולעדכן דפדפנים מדור קודם או להוסיף תיקונים מדור קודם, ואז אנשים יוטה יותר לאמץ סוגי תמונות חדשים, כמו WebP..."
• "כדאי לעודד מפתחי יישומי פלאגין/עיצובים לספק תמיכה ל-WebP ולסוגי תמונות אחרים מהדור הבא, כדי שאנשים שאינם מפתחים לא יצטרכו להתעסק בהם".

תמונות SVG ווקטור

• "אם זה אפשרי, אני משתמש ב-SVG (מונפש). gatsby-image פתר חלק גדול מזה. אבל אם תתעמקו במה שהם עשו, לא מציאותי בכלל שאתר רגיל יצטרך לבנות משהו כזה כדי שהתמונות יפעלו כמו שצריך. הדפדפן צריך לשאת באחריות רבה יותר".
• "האם ניתן יהיה לתעד איך ליצור אנימציות SVG עם lottie.js?"
• "בדרך כלל, אנחנו מנסים להשתמש בתמונות JPEG ברזולוציה גדולה ובגדלים נמוכים באתר שלנו, כדי להימנע מזמני טעינה. אנחנו גם מקפידים להשתמש בפורמטי SVG במידת הצורך כדי לספק איכות לעיצוב רספונסיבי."
• "אנחנו מנסים להשתמש בגרפיקה וקטורית אופטימלית לכל התמונות מלבד תמונות, אם אפשר."

פורמטים אחרים של תמונות

• "אנחנו [צריכים] לחנך אנשים יותר להפסיק להשתמש ב-GIF."

טעינה מדורגת

• "חשוב לזכור את המשתמש כשהוא שוקלים להשתמש בתכונות כמו טעינה עצלה, כי רבים מהן הן מעצבנות."
• "Make the lazy load to work with background-image."
• "Frameworks אמור לשפר את עיבוד הנכסים".
• "ביצענו המרה מטעינה מושהית לפני זמן רב. דיווחים של משתמשים על מיליוני תמונות ואתרים "לא נטענים". הצוות שלנו סיכם את זה כהבנה. למשתמשים ללא ידע טכני קשה לתאר את הבעיות."
• "אני רוצה להבין טוב יותר את השימוש ב-Intersection Overer API לצורך טעינה עצלה במקום להשתמש בשיטות מסורתיות".
• "זה מתאים לי: pwafire.org/developer/codelabs/progressive-loading."

תמונות רקע

• "בדרך כלל אני טוען תמונות כרקעים ב-CSS".
• "התג <img> הוא בעייתי וקשה לשלוט בו באופן פרטני, במיוחד בתוכן שנשלח על ידי משתמשים. אנחנו משתמשים בעיצוב <div> ובעיצוב של תמונות רקע בתדירות הרבה יותר גבוהה, כי זה מאפשר לנו להשתמש בגודל רקע ובמיקום ברקע ולמנוע שמירה של התמונה בלחיצה ימנית".

שקיפות

• "זה 2019. כיצד קובצי JPG עדיין ללא שקיפות אלפא?"
• "אני משתמש באמת בתמונות PNG רק כאשר אני צריך רקע שקוף".

Placeholder של תמונות באיכות נמוכה (LQIP)

• "אנו משתמשים ב-LQIPS וזו טכניקה נהדרת לשמירה על מעורבות המבקרים, מבלי לטעון תמונות באיכות גבוהה בשלב מוקדם".

ביצועים

• "לאחרונה הייתה לנו בעיה בביצועים עם תמונות. כשמשתמש גולל למטה באתר, אנחנו מציגים את 60 הכרטיסים הבאים שכוללים תמונה ממוזערת. בגלל מגבלת 6 החיבורים באותו דומיין, התמונות הממוזערות נחסמו, כמו גם בקשת ה-AJAX הבאה לקבלת 60 הכרטיסים הבאים אם המשתמש ממשיך לגלול למטה."
• "נשמח להשתמש ב-HTTP/2 אבל רוב הלקוחות שלנו משתמשים ב-IE11! לכן אנחנו בודקים פיצול או טעינה של בקשות לנתוני AJAX JSON מדומיין אחר."

התאמת גודל

• "סליחה על הרצינות; נראה לי שמינוף גובה/רוחב עדיף לי."
• "אנחנו מחפשים דרך לייצר פחות גדלים, כרגע היא בגודל של כ-12".
• "שינוי דינמי של גודל של תמונות הוא ממש קשה ובלתי אפשרי ללא JS."
• "יש כלי כמו responsivebreakpoints.com שאפשר להשתמש בו ב-web.dev :)".

תמונות באיכות גבוהה וברזולוציה גבוהה

• "איך להוריד תמונות דחוסות בלי לגרוע מאיכות ה-DPI?"
• "אנחנו חברה לניהול מסמכים. האפליקציות שלנו מטפלות במיליוני תמונות סרוקות ברזולוציה גבוהה, בדרך כלל בפורמט TIFF או PDF."
• "זו טרחה. קובצי img ברזולוציה גבוהה נחוצים לפורמט הדפסה. הם חייבים להיות מותאמים לאינטרנט. הקטנת גודל התמונות באינטרנט מקשה מאוד, אבל אם מחברים מספקים רק קבצים קלים עבור תמונות שמיועדות לפרסום בדפוס. בסופו של דבר, אנחנו שולחים מסרים מעורבים לגבי הדרישות להגשה של כתבי יד עם יצירות אומנות. לאחר מכן אין לנו תהליכי עבודה מורכבים לעיבוד החומרים האלה."

יכולות הדפדפן

• "חיתוך אוטומטי של src מהדפדפן כתכונה [מובנית] יהיה שימושי מאוד, כי הוא לוקח זמן כדי לחתוך את כל התמונות ל-4 גדלים ולכתוב את כל תגי העיצוב. אם נצליח להעלות תמונה גדולה אחת ולכתוב תג תמונה פשוט, הדפדפנים ייצרו באופן אוטומטי את המאפיינים המרובים של src שנחשבים לתכונה מנצחת."
• "אני באופן אישי קשה להימנע מזרימה חוזרת של דפים כאשר התמונה עם מוגדרת על ידי CSS לתמונות רספונסיביות (רוחב מקסימלי: 100%, גובה אוטומטי או גובה: רוחב: 100%, גובה אוטומטי), במיוחד בשילוב עם כיוון אומנות של תמונות/תג תמונה מותאמים. הדרך הטובה ביותר להימנע מכך היא להשתמש ב "פריצת גבולות שליליים" לקבלת יחס תמונה קבוע, ולאחר מכן למקם את התמונה בתוך תיבת יחס גובה-רוחב זו. תמיכה טובה יותר בדפדפן/טיפול בתמונות רספונסיביות יועילו מאוד!"
• "יש להשבית את 'הפעלה אוטומטית' של ה-GIF על ידי אחזור הפריים הראשון בלבד".

CDN ושירותי תמונה

• "Google צריכה לספק CDN בחינם, כמו Cloudflare."
• "אולי שימוש בכלים נוספים כדי להגדיר קנה מידה דינמי ו-CDN באמצעות ספקים שונים" יהיה נחמד."
• "תמונה אחת דחוסה במשקל יתר היא פתרון סביר מאוד, ללא עלות הפקה נוספת. נדרשות תמונות רחבות של כ-1,000 פיקסלים לנייד (רוחב עיבוד של 500 פיקסלים) וגודל העיבוד הזה הוא גם הגודל הנחוץ לצגים גדולים/שולחניים שאינם רטינה. לדעתי, שינוי גודל של תמונות CDN הוא פתרון גרוע מאוד, למרות שהשתמשתי בו בעבר. מערכת ניהול התוכן אמורה לטפל בשינוי הגודל, והשינוי הזה מורכב מדי בשביל להגדיר. פתרון אחד הוא פתרון טוב (כרגע)".
• "ב-CloudFlare מתבצעת התאמה אוטומטית של התמונות שלנו כך שיתאימו בצורה הטובה ביותר לתצוגה של המשתמש. כך אנחנו יכולים לחסוך בזמן הטעינה, כי התמונות נטענות ביחס לתצוגה של המשתמש. לדוגמה, אם משתמש נמצא בטלפון, הוא לא ייטען ברקע בגודל של מחשב שולחני."
• "האפליקציה Cloudflare עושה את זה ברקע בלי שאנחנו צריכים לעשות שום דבר חוץ מסימון תיבה בחלונית ההגדרות".
• "רק כדי להבהיר, הסיבה היחידה שאני יכול להשתמש ב-srcset וכו' היא קלות השימוש של Cloudinary. אבל Cloudinary הופך ליקר, ממש מהר. זו תחושה של חור גדול בחוויית הפיתוח."
• "אנחנו צריכים דרך לבצע חיתוך אוטומטי של תמונות בקלות ובצורה חכמה, כך שהן יוכלו לעבוד עם יחסי גובה-רוחב שונים בהקשרים שונים".
• "אני משתמש גם בתמונות מספקים אחרים כמו Unense, שם יש פחות שליטה ברזולוציה, באיכות ובדחיסה".

מערכת ניהול תוכן, פלטפורמה ומסגרת

• "אני עדיין מתקשה להבין מהי הדרך הטובה ביותר להשתמש בתמונות, כשאני בונה אתר באמצעות מערכת ניהול תוכן. מחברים נוטים להגדיר תמונות עם מימדים שונים וצופים שהתמונות לא יתכווצו או יזכו לקנה מידה. לא ברור לי אם אפשר להגדיר רוחב מקסימלי או גובה מקסימלי של תמונות"
• "השתמשתי ב-gatsby-image בפרויקטים האחרונים ומעולם לא הבטתי לאחור."
• "לרוב, תמונות הן החלק הקשה שהן מועברות למערכת ניהול התוכן על ידי משתמש הקצה. הן עשויות להשתמש בכל גודל, פורמט, לפעמים תמונה מקורית בפורמט התמונה האידיאלי והמידות שלה לא זמינות."
• "קשה לתחזק תמונות מאחר שהמערכת שלנו פועלת באופן עצמאי להוספת פקדים, אלא אם דברים מתרחשים באופן אוטומטי מבלי להשפיע על הרזולוציה. גם עבורנו התמונות לא נראות כמו שצריך בניידים לעומת מחשבים
• "אני עוזר לאנשים לבצע אופטימיזציה של האתרים שלהם (WordPress). הבעיות הכי גדולות שראיתי לגבי תמונות הן: הצורך להשתמש ב-CDN או ביישומי פלאגין כדי ליצור את WebP. מפתחי עיצוב צריכים להיות מקודדים בצורה נכונה על ידי srcset/picture. רוב יישומי הפלאגין שנטענים לאט נטענים באיטיות ויוצרים חוויית משתמש גרועה. קשה לטעון תמונות רקע באופן הדרגתי."

עלות/הטבה

• "השיטות החדשות יעילות, אך הן מאריכות את זמן הפיתוח של האתרים".
• "חברות רבות מסוג Fortune 500 מאמצות לאט את חוסר היענות לתקנים החדשים, כמו srcset ו-WebP. לאור זאת, חברות רבות התנגדו לשינוי כעלות פיתוח מיותרת לאתרים קיימים. משתמש הקצה (UX) לא מדבר על שיפור הביצועים ולא מדווחים עליו באופן נרחב. הוא מקשה במידה מסוימת על שמירת תמונות מהאינטרנט".
• "יצירה וניהול של מספר גדלים, גרסאות ועלויות יקרות".
• "הם תופסים הרבה מקום בשרת שלנו".

אופטימיזציה עבור מנועי חיפוש

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

תפקידן של תמונות באינטרנט

• "יש יותר מדי מילות מפתח באינטרנט. הפסיקו להשתמש בתמונות חסרות תועלת שלא משפרות את התוכן הכתוב".
• "את עדיין זוכרת את הזמן שבו לא היו תמונות באינטרנט ושיתפנו תמונות סלפי כאומנות ASCII?"

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

• [משתתף אחד כתב פוסט בבלוג בתגובה לסקר הזה]
• "נראה שהדרישות משתנות כל הזמן. הדבר מתסכל מאוד מכיוון שמפתחי אתרים צריכים להשקיע הרבה זמן בשמירת התמונות שלהם מלכתחילה. אנחנו מבצעים אופטימיזציה באופן הטוב ביותר שאנחנו יכולים, בודקים את האתר ולאחר מכן חודשים ב-Google החליטו שהתמונות יהיו דחוסות עוד יותר או צריכות להיות בפורמט אחר. לכן אנחנו לא מעניקים ללקוח שלנו את הפתרון הטוב ביותר האפשרי, ובמקום זאת משקיעים במאמץ יקר גם עבורם וגם לנו. לחלק מהלקוחות שלנו כעסקים קטנים אין לנו תקציב לכך שנוכל להמשיך לתקן תמונות ולשמור אותן מחדש כדי לפעול בהתאם לדרישות. אין לנו תקציב לכך במסגרת חבילות הניהול שלהם. כתיבת הקוד כדי לקרוא לגדלים שונים של תמונות במכשירים שונים גוזלת גם זמן רב. זה יהיה נהדר להמציא מערכת לשמירת תמונות שתהיה עקבית למשך זמן רב יותר".
• "כן, לדעתי יש שגיאות בספירה של "בקשות שמירה נמוכות וקבצים קטנים" ב-Lighthouse. אם אתר פועל באמצעות HTTP1.x אז ודאי, אבל אם אתר פועל באמצעות HTTP2, מספר הבקשות הוא פחות חשוב או אפילו בעיה אם מקורו באותו שם מארח. יש לי אתר מסוג lite, אבל אני טוען 30 קובצי WebP קטנים של כ-35 בקשות בסך הכול, ב-HTTP2 באותו שם מארח. מערכת Lighthouse מסמנת את הבעיה כבעיה מסוג 'Keep Request Counts Low and Files Small' (שמירה על מספר בקשות נמוך וגדלים קטנים) היא מהירה במיוחד, ובגלל HTTP2 באותו שם מארח, מספר הבקשות לא מהווה בעיה. וכן, הקבצים כבר קטנים (רובם בגודל 1KB עד 2KB או פחות). הצלחתי לטעון Sprite אבל צריך לבצע יותר מחשוב CSS. לכן, חשוב לעדכן את הדוח 'שמירת מספר בקשות נמוך וגדלים קטנים של קבצים' ב-Lighthouse כדי להביא בחשבון את פרוטוקול HTTP2 עם אותו שם מארח."
• "אנשים התקשו לדחוס את התמונות שלהם."
• "התנהגות חוצת דפדפנים נשארת בלתי צפויה, לכן הפתרונות הפשוטים ביותר הם לרוב הבטוחים ביותר".