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

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

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

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

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

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

השתמש בגודל המתאים וברזולוציה

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

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

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

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

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

מספר תוספים קיימים למטרה זו, ואחד הפופולריים יותר הוא WP Smush אשר מסייע לייעל JPEG, PNG או פורמטים GIF בנפרד או בתפזורת באמצעות שרתים ייעודיים. זה פשוט רצועות מטה metadata וצבעים שאינם בשימוש מן הקבצים כדי להקטין את גודל הקובץ. עם גרסת החינם אתה מוגבל תמונות 1MB ומטה, אבל אתה יכול להסיר את ההגבלה על ידי שדרוג לגרסה Pro המאפשר עד 5MB.

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

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

תייג את התמונות שלך כהלכה

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

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

טעינה איטית

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

השתמש ברשת מעריצים תוכן

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

MaxCDN הוא אחד דורג ביותר CDN שבו אתה יכול לנסות, וישנם אחרים כמו CloudFlare, CDN.net ועוד.

שורה תחתונה

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