כיצד לייעל את התמונות שלך כדי להיות ידידותיות לקידום אתרים (מדריך מלא)

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

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

מהי מיטוב תמונה?

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

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

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

היתרונות של עיצוב תמונה

גודל תמונות ממוצע באינטרנטההערכה היא שכ -54 אחוזים מהמשקל הכולל של דף אינטרנט נובע מתמונות.

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

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

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

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

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

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

בחר את פורמט הקבצים הטוב ביותר

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

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

תבניות קובץ תמונה

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

עם זאת, הן יכולות להיות בחירה בת קיימא. לדוגמה, בהשוואה לתמונת JPEG השוואה, יש ירידה בגודל 30 אחוז קובץ עם WebP בממוצע.

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

  • מיטוב תמונה הוא שירות הניתן על ידי כמה CDNs, כולל משלוח WebP ו- JPEG XR.
  • כדי לאתר את הלקוח, ספק את פורמט התמונה הטוב ביותר שקיים ובדוק את הפורמטים הנתמכים ניתן להוסיף לוגיקת יישומים נוספת.
  • כלים קוד פתוח מסוימים אוטומטיים שיחה, מיטוב והגשה של נכסים מתאימים.

גודל לעומת איכות דחיסה

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

איכות תמונה לעומת דחיסה

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

מיטוב ללא אובדן לעומת אופטימיזציה

אלה שני סוגי הדחיסה שבהם תשתמש. חשוב להבין מה הם עושים:

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

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

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

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

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

שינוי גודל התמונה ב - WordPress - -

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

החלפת תמונות וחיסולן

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

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

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

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

רסטר לעומת תמונות וקטוריות

ראסטור לעומת וקטור

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

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

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

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

השלכות מסך ברזולוציה גבוהה

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

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

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

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

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

רק זכרו שבלי קשר לרזולוציה, טכניקות מיטוב התמונות זהות.

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

גרפיקה וקטורית מדרגית (SVG) נתמכת על ידי כל הדפדפנים המודרניים.

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

כדי לצמצם את גודל קבצי SVG, יש לצמצם אותם. יש להשתמש ב- GZIP בעת דחיסת קבצי SVG.

מיטוב תמונות רסטר

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

סגר כבדערכי RGBA מאוחסנים על ידי כל פיקסל. אלו כוללים:

  • ערוץ אדום
  • ערוץ כחול
  • ערוץ ירוק
  • ערוץ אלפא (שקיפות)

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

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

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

כלים וכוונון פרמטרים

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

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

למידה על כמה כלים נפוצים יכולה לסייע לכם בבחירה הנכונה. ארבעה אלה הם מהנפוצים ביותר:

  • Gifsicle: זה מאפשר לך לבצע אופטימיזציה וליצור תמונות GIF שונות.
  • Optipng: זה משמש כדי לאפשר אופטימיזציה ללא אובדן PNG.
  • Jpegtran: תמונה זו מאפשרת לך לבצע אופטימיזציה של תמונות JPEG.
  • Pngquant: זה משמש כדי לאפשר אופטימיזציה PNG אובדן.

העברת נכסי תמונה בקנה מידה

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הפניות וזיכויי תמונה:

  • PicupMedia.com
  • מחשוב.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author