מטב את התמונות שלך עם גודל תמונה מוגדרים מראש [עצה וורדפרס]

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

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

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

כיצד וורדפרס מטפל תמונות

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

בכל פעם שאתה מעלה תמונה באמצעות וורדפרס, זה יוצר גירסאות של תמונות אלה ומאחסן אותם בנפרד. לדוגמה, אם תעלה תמונה בגודל 1200 × 800, WordPress עשוי ליצור גרסאות של 100 × 100, 600 × 400 ו- 900 × 600. כאשר אתה מכניס תמונה ובחר "בינוני" את הגירסה הבינונית בפועל ישמש, בניגוד לגירסה למטה מכווץ של המקור.

זה מועיל מאוד כי זה חוסך רוחב פס בשרת ועל זמן העיבוד במחשב הלקוח. אני חושב שזה לא מפתיע כי הורדת תמונה 600 × 400 הוא מהיר יותר מאשר הורדת תמונה 1200 × 800.

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

תמונה נכונה במקום הנכון

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

בכל המאמרים, אבל בצורה הכי ויזואלית, זה לא ממש משנה אם התמונה ב-פוסט הוא 220px או 245px רחב. איזו גרסה יש לך יהיה שמיש באותה מידה. תמונות המוצגות עם זאת מוצגים בדרך כלל בגדלים נפוצים. לקבלת רשימות מאמרים, באפשרותך להשתמש בתמונה ממוזערת בגודל 178 × 178, עבור כותרות כתבות, באפשרותך להשתמש בתמונה רחבה בגודל 1200 × 600.

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

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

יצירת גדלי תמונה

באמצעות add_image_size () פונקציה אתה יכול להגדיר את כל הגדלים התמונה האתר שלך צריך. בואו ליצור את שתי הדוגמאות שהוזכרו לעיל. הצב את הקוד הבא בקובץ function.php של ערכת הנושא או בקובץ של תוסף.

 Add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

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

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

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

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

 the_post_thumbnail ('featured_thumbnail'); 

הפרמטר הראשון של פונקציה זו מאפשר לך לציין את גודל התמונה לשימוש. מאחר שציינתי את "featured_thumbnail", הגירסה 178 × 178 של קובץ זה תשמש.

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

תמונות ממוזערות מחדש

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

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

לאחר חידוש התמונות הממוזערות שלך, תראה את הגרסאות המותאמות לטעינה באתר שלך. אתה יכול לבדוק את זה על ידי הצגת המקור של התמונה. אם העלית את 'example.jpeg' ואתה רואה 'example.jpeg' כמקור לתמונה המוצגת שלך, משהו לא מתאים. אם אתה רואה “example-178 × 178.jpeg” אז הכל טוב; התמונה הממוטבת מוצגת.

תמונות מגיבות

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

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

תמונה נוספת אופטימיזציה

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

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