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

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

כיצד לבצע אופטימיזציה של תמונות לאתר האינטרנט שלך ולגרום להם לעבוד בכל המכשירים (תמונות מגיבות לנייד, שולחן עבודה, טאבלט)
СОДЕРЖАНИЕ
02 июня 2020

למה לטרוח לייעל תמונות? הרשה לי לשאול אותך את זה; מתי בפעם האחרונה ראית אתר ללא תמונות עליו? "לעולם לא" תהיה התשובה הנכונה. ��‍♂️ תמונות פשוט חיוניות מדי. וזה אפילו לא קשור לתצלום המלאי ההוא הראוי ללכת על שלך "10 טיפים לשיווק מקוון" הודעה. תמונות שימושיות למטרות מרובות. חשבו על פריסות, אלמנט עיצובי, סמלי לוגו, תמונות פרופיל וכן, גם תמונות בלוג.


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

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

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

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

�� למה להקשיב לנו?

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

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

�� מדוע עליכם לבצע אופטימיזציה של תמונות באתרכם

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

מבחן מהירות

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

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

ראה דוגמה זו:

השוואה בין גודל עמוד לפני ביצוע אופטימיזציה של תמונות ואחריה

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

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

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

כאשר כל אלה מורכבים, ישנם כמה דברים שאנחנו צריכים לדאוג להם בעת העברת תמונות מגיבות על מכשירים מרובים:

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

��‍♂️ כיצד לבצע אופטימיזציה של תמונות ולהעביר אותן בכל סוגי המכשירים

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

�� בחר את הפורמט הנכון

נתחיל בשאלה הישנה: PNG או JPG?

רוב האנשים אומרים "JPG כל הזמן!" אבל זה לא ממש נכון:

PNG לעומת JPG

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

אבל מילת המפתח כאן היא "התרחישים הנפוצים ביותר." למען האמת, אם מה שיש לך זה תמונה מורכבת עם הרבה צבעים ומעברים צבעיים (aka. הרבה "מידע צבעוני"), אז JPGs אכן יהיו טובים יותר. חשבו תמונות רגילות. אלה עובדים טוב יותר כ- JPG.

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

שקול את הדוגמא הבאה. להלן ארבע תמונות:

תמונה 1-אתמונה 1-א: JPG

תמונה-1-בתמונה 1-b: PNG

תמונה-2-אתמונה 2-א: JPG

תמונה-2-בתמונה 2-b: PNG

  • תמונה 1-a היא 312 KB
  • תמונה 2-a היא 196 KB

נסה לנחש את הגדלים של שתי התמונות האחרות …

תשובתך:

לא בסדר!

  • תמונה 1-b היא 1.3 מגה בייט (זה בטח ניחשתם נכון)
  • תמונה 2-b היא 106 KB (רגע, מה ?!)

כפי שאתה יכול לראות, PNG מנצח עבור תמונות פשוטות בעלות צבע נמוך.

חשוב על דברים כמו צילומי מסך של ממשק, איורים פשוטים וכו ‘.

�� שיעור 1:

אל תלך תמיד על JPG. חזו עד כמה גדולה התמונה מתבססת על תוכנה, ואז השתמשו בסוג התמונה הנכון.

עכשיו לשאלה קצת יותר מתוזמנת: SVG? WebP?

SVG ו- WebP

SVG ו- WebP הם סוגים פחות נפוצים של תמונות באינטרנט, אך שניהם נהדרים כל עוד אתה משתמש בהם כפי שיש להשתמש בהם. הרשו לי להבהיר:

  • SVG הוא תבנית תמונה וקטורית מבוססת XML. ניתן להגדיר את תוכן התמונה בקובץ XML פשוט – אותו קובץ XML בו תשתמש למטרות עיבוד נתונים בסיסיות אחרות. זה הופך את SVG לפורמט טוב, כל עוד אתה מתמודד עם תמונה וקטורית פשוטה.
  • WebP הוא פורמט חדש של גוגל. הם מתרברבים ש- WebP קטן יותר ב- 25-34% בהשוואה ל- JPEGs שווים, ו -26% קטן יותר מאשר PNGs דומים..

אז מה התפס? האם אתה יכול לבצע אופטימיזציה של תמונות על ידי הפיכת כולם ל SVGs ו- WebPs?

ראשון, SVG. בעיקרון, השתמש ב- SVG רק אם (א) ניתן לשמור את התמונה כ – SVG ביעילות, ו (ב) אם לא אכפת לך מאנשים לקחת את ה- SVG הזה ולשנות אותו.

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

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

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

דוגמה לתמונת jpg

דוגמה לתמונת webp

  • גרסת ה- JPG המקורית היא 204 KB
  • ה- WebP הוא 58 KB

החוכמה היא שלא כל הדפדפנים תומכים ב- WebP. למעשה, אולי אפילו לא תראו את תמונת ה- WebP בה השתמשתי למעלה. בזמן הכתיבה WebP עובד ב- Google Chrome, Firefox, Edge ואופרה. כמובן שהגרסאות הישנות אינן תומכות בפורמט.

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

כלומר, טכנית אתה יכול להשתמש בקטע קוד כזה:

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

כדי להשתמש ביעילות ב- WebP, עליכם לספק תמונות fallback. לדוגמה:

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

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

אתה יכול לשמור תמונות כ- WebP בפוטושופ, או להשתמש בכלי כמו XnConvert (חינם).

�� שיעור 2:

אל תטרחו להשתמש SVGs בכלל אם ברצונכם לבצע אופטימיזציה של תמונות במהירות. הזמן שתבזבז ביצירתם לא ישתלם (אם כי אל תהסס לא להסכים; הנה טוב קח אלטרנטיבי). PNGs יהיו מהירים יותר לשימוש ולא גרועים בהרבה מבחינת צריכת שטח דיסק.

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

דחוס תמונות

דחיסת תמונות זה כמו קסם. תן לי להראות לך:

זוהי אותה תמונת JPG שנשמרת רק ברמת דחיסה שונה (המכונה לעתים קרובות רמת איכות):

coon-100%100% איכות

coon-95%איכות 95%

coon-85%איכות 85%

coon-50%איכות 50%

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

הנה כמה שטח דיסק לוקח לכל אחת מהתמונות האלה:

  • 100% איכות: 969 KB
  • 95%: 439 KB
  • 85%: 186 KB
  • 50%: 102 KB

ענק, נכון ?! אתה יכול לעבור מ- ~ 1 MB ל- ~ 500 KB ללא אובדן איכות בולט בכלל, פשוט על ידי שינוי הדחיסה מ- 100% ל- 95%.

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

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

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

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

שני הכלים האהובים עלי שיכולים לעזור לכם כאן הם:

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

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

ImageOptim - כלי נהדר לאופטימיזציה של תמונות בשולחן העבודה

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

optimole - כלי נהדר לאופטימיזציה של תמונות בענן

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

במילים אחרות, דחוס תמיד את ה- PNG שלך!

בדוק את שלוש התמונות הבאות:

kwf-1
kwf-2

kwf-3

הם נראים אותו דבר, אך למעשה הם תופסים:

  • 346 KB
  • 215 KB
  • 100 KB

נסה לנחש מי זה.

שלושה כלים לדחיסת התמונות שלך והקטנתן:

  • ImageOptim שוב. אבל זה לוקח הרבה זמן עם PNGs, כך שאם יש לכם רבים מהם לעבד, אולי תרצו להכין לעצמכם כוס קפה בזמן שהכלי עובד.
  • ImageAlpha. הרבה יותר מהיר מ- ImageOptim. זה הפיתרון של שולחן העבודה שלי עבור PNGs.
  • אופטימול. באופן לא מפתיע, Optimole מטפלת גם בדחיסת PNG. הכל קורה על טייס אוטומטי.

�� שיעור 3:

דחוס את ה- JPG שלך כדי להגיע לרמה מקובלת של איכות לעומת שטח דיסק.

דחוס תמיד את ה- PNGs שלך.

הגישו תמונות במידות הנכונות

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

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

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

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

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

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

לאחר מכן תוכל ליצור נקודות מעבר עבור 800 פיקסלים ו -550 פיקסלים (ערכים נפוצים) לכיסוי תרחישים של טאבלט ונייד. אמנם זה לא ייתן לך 100% תוצאות מושלמות בכל המכשירים, אבל אתה לפחות מתייעל במידה סבירה ושומר על שליטת התמונות שלך..

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

להלן דוגמה כיצד להתמודד עם קוד התצוגה בפועל:

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

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

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

שימוש יעיל זה במאפיין הגדלים הוא האופן בו אתם הופכים את התמונות שלכם לתגובות באמת.

Trick טריק מקצוען: עבור לתמונות קטנות בממדים ב -10% מהנדרש ואז אפשר לדפדפן להגדיל אותן. זה יחסוך לך שטח רוחב פס נוסף. לדוגמה, אם אתה זקוק לתמונה בגודל 500 × 500 פיקסלים, אתה יכול לשנות את גודל התמונה לתמונות 450 × 450 פיקסלים, ואז לאפשר לדפדפן להגדיל אותה עד 500. הדבר תלוי בתמונה, אך ברוב המקרים, המשתמש לא שם לב.

�� שיעור מס ‘4:

השתמש בגדלי התמונה הנכונים לעיצוב שלך.

צור נקודות הפסקה.

צור גרסאות מרובות של אותה תמונה כדי לכסות את נקודות הפסקה.

השתמש בתכונות srcset וגדלים בעת הצגת התמונות.

בצע אופטימיזציה של תמונות למסכי רשתית ו- HiDPI

הקצה השני של ספקטרום ממדי התמונה הוא על תמונות ידידותיות ל- HiDPI.

הסיפור הוא שמסכי שולחן העבודה כל הזמן הולכים וגדלים, והפיקסלים שלהם מתארזים יותר ויותר בצפיפות. לא נדיר בימים אלה להיות א 4K מסך ארוז למחשב נייד בגודל 15 אינץ ‘. הרזולוציה של 4K היא 3840 × 2160 פיקסלים, כך שכל אחד מאותם פיקסלים צריך להיות ממש זעיר.

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

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

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

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

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

(אם הדפדפן אינו תומך ב- srcset, ה- src הרגיל ישמש.)

עכשיו, כשאני אומר "תמונות בקנה מידה," אני בעצם מתכוון שצריך להתחיל מהקצה השני. התחל עם תמונה ענקית (תייג אותה 3x), ואז סולם אותה והפוך אותה קטנה יותר (עד 2x), ולבסוף הפוך אותה לגודל 1x והשתמש בה כתמונת ברירת המחדל..

�� שיעור מס ‘5:

וודאו שהלוגואים, תמונות המיתוג וכל התמונות המשמשות בפוסטים ובדפים שלכם מוכנים למסכי HiDPI.

⌛ טעינת תמונה

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

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

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

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

�� שיעור מס ‘6:

תמונות טעונות עצלות שנמצאות מתחת לקפל.

�� העברת תמונות באמצעות CDN

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

�� דיברנו על CDNים יותר לעומק כאן, בדוק את זה.

ה- TL; DR הוא ש- CDN מנצלים רשת שרתים שכולם מחזיקים עותק של האתר שלך ואז מסירים אותו למבקר מהמיקום הזמין הקרוב ביותר. זה תמיד הולך להיות מהיר יותר מאשר משלוח מהשרת הראשי שלך.

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

לרוב, הפעולה חלקה מבחינתך. כל התמונות באתר שלך מוחלפות בגרסאות המתארחות ב- CDN (כלומר, כתובות האתר לתמונה משתנות).

  • Jetpack יש תמונה CDN פופולרית מובנית ממש. אתה יכול להשתמש בו בחינם, וזה נהדר. המגבלה העיקרית היא שזה עובד רק עם התמונות בפוסטים, בדפים שלך, ובתמונות המוצגות שלך. זה לא עובד עבור תמונות שמרכיבות את העיצוב שלך (חלקים מהנושא, הפריסה וכו ‘). אלה התמונות שבאמת יכולות להשתמש באיזה CDN-ing.
  • אופטימול כולל CDN מובנה כחלק מתכונת מיטוב התמונות העיקרית. הודעה זו אינה מוגבלת רק לפוסטים ולדפים שלך.

�� שיעור מס ‘7:

חבר את האתר שלך ל- CDN תמונה (Jetpack או Optimole) או ל- CDN כללי (MaxCDN / StackPath).

הגישו תמונות קטנות יותר למשתמשים בחיבורים איטיים

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

בתרחישים אלה, עדיף להוריד את איכות התמונות שלך בתמורה לזמן טעינה. משתמשים בחיבורים איטיים יותר יעריכו שהם יכולים לראות את התמונות בכלל.

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

אם אתה מעדיף שזה יטופל באמצעות טייס אוטומטי, שוב, אופטימול!

�� שיעור מספר 8:

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

�� כלים כלים כלים!

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

  • אופטימול – מאפשר לך לבצע אופטימיזציה של תמונות באופן אוטומטי, לדחוס אותן, לבחור את גודל התמונה הנכון לתצוגת המבקרים, להגיש תמונה באמצעות CDN, לטעון תמונות עצלות, לעבוד עם מהירויות חיבור איטיות יותר.
  • ImageOptim ו ImageAlpha – לטפל בדחיסת תמונות בשולחן העבודה ב- Mac. אתה יכול להשתמש TinyPNG ב- Win. עשה זאת לפני שתעלה תמונות לאתר שלך.
  • XnConvert – מאפשר לך להמיר תמונות ל- WebP.
  • a3 עומס עצל תוסף – עצלן טוען את כל התמונות.
  • Jetpack תוסף – מגיע עם CDN תמונה בחינם.
  • MaxCDN / StackPath – CDN כללי שידאג לכל האתר שלך ולא רק לתמונות.

כלים לייעול תמונות

�� לקריאה נוספת:

  • תאר לעצמך vs WP Smush לעומת ShortPixel לעומת Optimole: מה הכי טוב לייעול תמונות וורדפרס? השוואה ראש בראש
  • תמונות בחינם לבלוגים – כיצד להשיג אותן & השתמש בהם ביעילות (אזהרה! עצות לא ברורות, מגובות נתונים)
  • 11 דרכים להאיץ את ביצועי וורדפרס
  • מיטוב מהירות אתר: כיצד לעשות זאת בשנת 2019
  • אירוח וורדפרס המהיר ביותר – מדריך למתחילים למציאת אחד כזה

��‍♂️ TL; DR:

להלן סיכום כל השיעורים האישיים המשותפים למעלה:

שיעור 1:

אל תלך תמיד על JPG. חזו עד כמה גדולה התמונה מתבססת על תוכנה, ואז השתמשו בסוג התמונה הנכון.

שיעור 2:

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

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

שיעור 3:

דחוס את ה- JPG שלך כדי להגיע לרמה מקובלת של איכות לעומת שטח דיסק.

דחוס תמיד את ה- PNGs שלך.

שיעור מס ‘4:

השתמש בגדלי התמונה הנכונים לעיצוב שלך.

צור נקודות הפסקה.

צור גרסאות מרובות של אותה תמונה כדי לכסות את נקודות הפסקה.

השתמש בתכונות srcset וגדלים בעת הצגת התמונות.

שיעור מס ‘5:

וודאו שהלוגואים, תמונות המיתוג וכל התמונות המשמשות בפוסטים ובדפים שלכם מוכנים למסכי HiDPI.

שיעור מס ‘6:

תמונות טעונות עצלות שנמצאות מתחת לקפל.

שיעור מס ‘7:

חבר את האתר שלך ל- CDN תמונה (Jetpack או Optimole) או ל- CDN כללי (MaxCDN / StackPath).

שיעור מספר 8:

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

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

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

פריסה, מצגת ועריכה מאת קרול K.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector