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

04.06.2020
WordPress 'כיצד להפוך תמונות לטעון מהר יותר באתר וורדפרס שלך
0 32 мин.

אז אתה רוצה שהתמונות שלך יטענו מהר יותר?


ובכן, אני לא אקח דיאלי. בואו נצלול ישר אל החומר הטוב!

ישנן שלוש דרכים לגרום לתמונות לטעון מהר יותר בוורדפרס:

  • שינוי גודל
  • דחוס
  • עומס עצלני

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

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

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

שנה את גודל התמונות שלך

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

מה משנה גודל?

כשאני אומר “שינוי גודל” אני מתכוון לשנות את הממדים של תמונה, ובמקרה זה אתה רוצה לצמצם את הממדים של תמונות גדולות מדי..

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

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

לתמונות בעלות ממדים גדולים יותר יש גם גדלי קבצים גדולים יותר.

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

נחזור לדוגמא שלי ונניח שהתמונה רחבה וגובהה 5,000 פיקסלים. אם היית מצמצם את זה מ -5,000 פיקסלים למטה ל 700 פיקסלים בלבד, התמונה למעשה הייתה משתמשת ב 99% פחות פיקסלים. במילים אחרות, גודל הקובץ יפחת בכ- 99%. אם התמונה הייתה 5Mb, היא הייתה בסופו של דבר 50 קילוגרם והיא הייתה נטענת 99% מהר יותר באתר שלך.

שינוי גודל של תמונות

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

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

שנה את גודל התמונות שלך באופן ידני

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

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

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

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

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

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

אם אתה מבקר בדף הגדרות המדיה שלך, תראה שתוכל לבחור בגדלים אלה כאן:

הגדרות מדיה של וורדפרס

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

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

שינוי גודל תמונה של וורדפרס

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

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

שינוי גודל אוטומטי עם תוסף

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

כלי אופטימיזציית התמונות

זה לא עובד כמו שאתה מצפה.

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

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

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

אם ברצונך ללמוד כיצד להשתמש ב- Optimole, תוכל לעקוב אחר סרטון ההליכה המלא שלי:

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

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

דחוס את התמונות שלך

דחיסה היא דרך להפחית את גודל הקובץ של תמונה מבלי לשנות את ממדיה.

ישנם שני סוגים של דחיסת תמונות.

הסוג הראשון של דחיסת תמונות נקרא דחיסה “ללא הפסד”.

דחיסה ללא אובדן

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

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

הרווחים האמיתיים נובעים מאופטימיזציה אבודה.

דחיסה אבודה

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

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

כיצד לדחוס את התמונות שלך

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

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

shortpixel

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

תוכלו למצוא כאן כמה תוספים למיטוב תמונות.

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

הטמנת טעינה עצלה

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

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

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

לסרטון זה יש ויזואליזציה שמסבירה זאת טוב יותר אם אתה רוצה תמונה ברורה יותר של אופן פעולת הטעינה:

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

כיצד להשתמש בהעמסה עצלה

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

אם אתה מחפש אפשרות בחינם, נסה את Optimole או a3 עומס עצל.

עם Optimole, טעינה עצלה מופעלת אוטומטית, והתוסף a3 קל להגדרה.

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

כדי להפעיל טעינה עצלה באמצעות WP Rocket, כל שעליך לעשות הוא להפוך את המתג הזה:

WP Rocket Media

זה לא יכול להיות קל יותר!

ליהנות מתמונות טעינת מהירות יותר

לסיכום מה בדיוק למדת …

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

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

בשלב הבא אלגוריתמי דחיסת תמונות עברו דרך ארוכה ובימינו תוכלו להפחית את גודל הקובץ של תמונה ב- 50-70% מבלי להשפיע על האיכות בצורה בולטת. זה לא מוחלט. השתמש ב- ShortPixel או Optimole כדי לדחוס כל תמונה באתר שלך.

לבסוף, טעינה עצלה היא דרך נהדרת לטעון תמונות באופן סלקטיבי. אתה יכול להשתמש ב- Optimole, a3 Lazy Load או WP Rocket ליישום מיידי של טעינה עצלנית באתר שלך.

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

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

אולי גם תאהב,

כיצד לתקן אתר וורדפרס איטי ולוח ניהול (לצמיתות)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector