משוב מהסקר בנושא אופטימיזציית תמונות בקיץ 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 ובסוגי תמונות אחרים מהדור הבא, כדי שמי שאינם מפתחים לא יצטרכו להתמודד עם הבעיה הזו".

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

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

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

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

טעינה מדורגת

  • "חשוב להביא בחשבון את המשתמש כשמביאים בחשבון תכונות כמו טעינה מדורגת, כי בהרבה מקרים הן מעצבנות".
  • "תניח למאפיין הטעינה הדרגתית לעבוד עם תמונת רקע בבקשה".
  • "השימוש ב-frameworks צריך להיות מבוסס על עיבוד נכסים בצורה טובה יותר."
  • "השלמנו לפני זמן רב מטעינה מדורגת. משתמשים מדווחות על מיליוני תמונות ואתרים ש'לא נטענו'. לפי ההבנה שלנו הצוות שלנו סיכמו את הסיכום הזה. למשתמשים לא טכניים קשה לתאר את הבעיות."
  • "אני רוצה להבין טוב יותר איך להשתמש ב-Intersection Observer API לטעינה מדורגת במקום להשתמש בטכניקות מסורתיות".
  • "זה עובד טוב בשבילי: pwafire.org/developer/codelabs/progressive-loading."

תמונות רקע

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

שקיפות

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

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

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

ביצועים

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

התאמת גודל

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

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

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

יכולת דפדפן

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

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

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

CMS, פלטפורמה ו-framework

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

עלות/הטבה

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

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

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

תפקיד התמונות באינטרנט

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

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

  • [משתתף אחד כתב פוסט בבלוג בתגובה לסקר הזה]
  • "נראה שהדרישות משתנות כל הזמן. בתור מפתח/ת אתרים, התהליך הזה מתסכל מאוד, כי צריך להשקיע זמן בשמירת התמונות. אנחנו מבצעים אופטימיזציה כמיטב יכולתנו, אנחנו בודקים את האתר ולאחר מכן חודשים Google החליטה שהתמונות יוכלו להיות דחוסות עוד יותר או להיות בפורמט אחר. לכן, אנחנו לא יכולים לספק ללקוח את הפתרון הטוב ביותר שיכול להימשך זמן רב, ולהשקיע מאמצים יקרים – גם לו וגם לנו. לחלק מהלקוחות הקטנים של עסקים קטנים אין מספיק תקציב כדי שנוכל להמשיך לתקן תמונות ולשמר אותן מחדש כך שיעמדו בדרישות. אין לנו תקציב לביצוע הפעולות האלה במסגרת חבילות הניהול שלהם. גם כתיבת הקוד לקריאה לגדלים שונים של תמונות במכשירים שונים גוזלת זמן רב. זה יהיה נהדר להשתמש במערכת של שמירת תמונות שתהיה עקבית למשך זמן רב יותר."
  • "כן, נראה לי שיש טעות בהגדרה "יש לשמור על נפח הבקשות הנמוך ובגודל קטן" ב-Lighthouse. אם אתר מציג מעל HTTP1.x אז כן, אבל אם אתר מציג מעל HTTP2, מספר הבקשות פחות חשוב ואפילו אין בעיה אם הן מגיעות מאותו שם מארח. יש לי אתר Lite, אבל אני טוען 30 קובצי WebP קטנים עם כ-35 בקשות בסך הכול, יותר מ-HTTP2 עם אותו שם מארח. מערכת Lighthouse מסמנת את הבעיה הזו כבעיה מסוג 'השארת הבקשות סופרות מעטות וגדלים של קבצים קטנים', אבל היא מהירה במיוחד ובגלל ה-HTTP2 באותו שם מארח, מספר הבקשות לא מהווה בעיה. כן, הקבצים כבר קטנים (רובם הם בין 1KB ל-2KB או פחות). אפשר לטעון sprite, אבל צריך לבצע עוד מחשוב CSS. לכן, חשוב לעדכן את הדוח 'השארת הבקשות ספירות נמוכות וגדלים של קבצים קטנים' ב-Lighthouse כדי להביא בחשבון גם את HTTP2 וגם את אותו שם מארח."
  • "אנשים מתקשים לזכור לדחוס את התמונות שלהם".
  • "התנהגות בדפדפנים שונים נשארת בלתי צפויה, לכן הפתרונות הפשוטים ביותר הם בדרך כלל הבטוחים ביותר".