הזכייה הגדולה ביותר בביצועים ששלחתי אי פעם ב-WP Adminify's אתר השיווק היה't תוסף מטמון או תיקון CDN. זה היה מחיקת תמונה אחת. הגיבור הישן שלנו היה צילום מסך PNG בגודל 2,400 פיקסלים I' d מיוצא ב-" איכות מלאה" כי האמנתי בעקשנות ש-PNG פירושו פריך. הקובץ האחד הזה היה 1.4 מגה-בייט. באנדרואיד בטווח בינוני מעל 4G, זה היה אלמנט ה-Contentful Paint הגדול ביותר - והוא גרר את LCP לכ-4.1 שניות. החלפתי אותו ב-84 KB WebP ברוחב התצוגה בפועל ו-LCP ירד מתחת ל-1.9 שניות באותו אחר הצהריים. אין קוד. רק תמונה קטנה יותר.
That's הדבר המתסכל ב-SEO תמונה. It's לא אקזוטי. תמונות הן בדרך כלל הדבר הכבד ביותר בדף - לרוב קרוב למחצית מסך הבתים - ובכל זאת רובנו מתייחסים אליהן כאל מחשבה שלאחר מכן. אנחנו מפילים מצלמה מקורית לתוך ה-CMS, מקלידים "צילום מסך" לתוך שדה alt, וממשיכים הלאה. ואז אנחנו תוהים למה ה Core Web Vitals דיווח ב-Search Console מדמם באדום בנייד.
מדריך זה הוא רשימת הבדיקה שאני למעשה מפעיל על Toolz.dev ואתרי לקוחות, שנכתבו מנקודת המבט של מישהו ששולח את הדברים האלה. I'יהיה כנה לגבי מה הכלים החינמיים עושים ו - חשוב לא פחות - מה הם עושים 't. כל כלי תמונה על Toolz.dev פועל כולו בדפדפן שלך על א <canvas>, אז שום דבר שאתה נופל בו לא מועלה לשום מקום יש לזה השלכות אמיתיות על זרימת העבודה שלך, חלקן טובות, אחת מעצבנת. We'יגיע לשניהם.
TL;DR: שנה את גודל התמונה לרוחב התצוגה האמיתי שלה תחילה, לאחר מכן דחוס, ולאחר מכן שרת פורמט מודרני. בפועל that's שלוש מסירות: שינוי גודל תמונה כדי לחתוך את מידות הפיקסלים, קומפרס תמונה כדי לסחוט את הבתים, ו ממיר פורמט כדי לקבל WebP. הוסף
width/heightתכונות לעצירת שינוי פריסה, לכתוב טקסט חלופי שאדם היה אומר בקול רם, ולטעון בעצלתיים כל דבר מתחת לקפל. עשה זאת וה-LCP וה-CLS שלך משתפרים שניהם - שני ה-Core Web Vitals מונעי התמונה שגוגל למעשה מדורגת עליהם.
למה תמונות חשובות כל כך לקידום אתרים?
שניים מתוך שלושת Core Web Vitals הם בעיות תמונה בתחפושת הצבע התוכן הגדול ביותר הוא, ברוב דפי התוכן, תמונת הגיבור המסיימת את ההורדה שלה.Cumulative Layout Shift הוא לעתים קרובות מאוד תמונה שנטענת באיחור ודוחפת את הטקסט לאורך שורה. שניהם תשומות דירוג מאושרות, ושניהם דברים שאתה מתקן על ידי טיפול טוב יותר בתמונות - לא על ידי כתיבת תוכן נוסף.
There's ערוץ תנועה שני אנשים שוכחים: Google Images. עבור הרבה אתרי מסחר אלקטרוני, מתכונים, נסיעות ועיצוב, חיפוש תמונות הוא נתח משמעותי של ביקורים אורגניים, לפעמים חמישית ממנו. התנועה הזו תלויה לחלוטין בדברים שסורק יכול לקרוא - שם הקובץ, הטקסט האלטרנטיבי, העותק שמסביב, והאם התמונה אפילו קטנה מספיק כדי לקבל אינדקס מיידי.
ואז שם's המשעמם-אבל-אמיתי: רוחב פס עולה כסף וסבלנות. דף ששולח 3 מגה-בייט של תמונות מקפיץ משתמשים ניידים על חיבורים מדודים לפני שהם רואים את הכותרת שלך. דפים מהירים יותר שומרים על אנשים בסביבה, ומעורבות, איך שגוגל מודדת את זה, ' לא כואב.
באיזה פורמט תמונה כדאי להשתמש בפועל?
בחירת פורמט היא המקום שבו חיים רוב החיסכון, והכללים פשוטים יותר ממלחמות הפורמט גורמות להם להישמע.
JPEG הוא לצילומים - כל דבר עם שיפועים חלקים ואלפי צבעים.It's lossy, שזה בדיוק מה שרוצים לתמונה באיכות 75–85 הדחיסה בלתי נראית לצופה רגיל והקובץ הוא שבריר מהמקור. Don't להשתמש בו לכל דבר עם קצוות קשים, טקסט או שקיפות.
PNG הוא ללא אובדן השתמש בו לצילומי מסך, לוגו, דיאגרמות וכל דבר עם אזורי צבע שטוחים או שקיפות המלכוד: עבור צילום, PNG מייצר קובץ גדול באופן קומי בהשוואה ל-JPEG. טעות הגיבור שלי בנפח 1.4 מגה-בייט הייתה בדיוק זו - צילום מסך צילום שנאלץ להיכנס ל-PNG.
WebP הוא ברירת המחדל המעשית בשנת 2026 הוא עושה גם lossy וגם lossless, תומך בשקיפות ואנימציה, ובדרך כלל נוחת 25–34% קטן יותר מ - JPEG באיכות תואמת תמיכת דפדפן היא אוניברסלית עכשיו זהו הפורמט שאני ממיר כמעט הכל ל.
AVIF דוחס אפילו יותר חזק - לעתים קרובות קטן יותר מ-WebP - כי זה 's בנוי על ה-Codec הווידאו AV1. זה ' הוא פורמט נהדר. אבל אני חייב להיות ישר איתך כאן, כי הרבה מדריכים (כולל טיוטת המאמר הזה שהוחלפה) אומרים לך "פשוט המר ל-AVIF" עם כלי מקוון, וזה ' לא איך עובד קידוד קנבס בדפדפן.
SVG מיועד לוקטורים: אייקונים, לוגואים, איורים פשוטים. זה משתנה לאין שיעור ונשאר זעיר. It's חסר תועלת לתמונות.
האזהרה של AVIF שאף אחד לא מזכיר
Here's the honest bit. Toolz.dev's ממיר פורמט יצוא PNG, JPEG או WebP- ורק שלושת אלה. זה יכול 't פלט AVIF, וגם רוב הממירים בדפדפן לא יכולים. הסיבה היא טכנית: הכלי מצייר את התמונה שלך על א <canvas> ושיחות canvas.toBlob('image/webp', quality). הדפדפן 's מקודד קנבס ספינות JPEG, PNG, ו WebP; זה לא ספינה מקודד AVIF.אז אין דרך לסחוט AVIF מתוך קנבס, נקודה.
אתה עדיין יכול הזנה קובץ AVIF ב - הדפדפן מפענח את AVIF בשמחה באמצעות new Image(), אז ירידה ב-AVIF הופכת לקנבס בסדר. אתה פשוט יכול 't לקבל אחד בחזרה החוצה. It' הוא אסימטריה של פענוח, קידוד-אאוט, והוא מכשיל אנשים ללא הרף.
אז העצה שלי בעולם האמיתי: השתמש בממיר הפורמט לשלב ה-WebP, שהוא זה שמכסה 95% מהזכייה. אם אתה רוצה AVIF למעלה, צור אותו בצינור הבנייה שלך עם sharp, avifenc, או Squoosh's מקודד לא מקוון - that's שבו AVIF שייך בכל מקרה, כי הקידוד שלו איטי ואתה don't רוצה לעשות את זה ביד עבור כל תמונה.
| פורמט | הטוב ביותר עבור | מפסידן? | Toolz.dev ממיר יכול פלט אותו? |
|---|---|---|---|
| JPEG | תמונות | כן | כן |
| PNG | צילומי מסך, לוגו, שקיפות | לא | כן |
| WebP | כמעט כל דבר ברשת | שניהם | כן |
| AVIF | דחיסה מקסימלית על תמונות כבדות | כן | לא - השתמש בכלי בנייה |
| SVG | אייקונים, לוגואים, אמנות וקטורית | N/A | לא (וקטור, לא קנבס) |
איך דוחסים תמונות בלי להרוס איכות?
הטעות שאני רואה הכי הרבה היא לדחוס את הדבר הלא נכון בסדר הלא נכון לדחוס תמונה של 4000 פיקסלים שמוצגת ב-800 פיקסלים זה כמו לאטום בוואקום מזוודה שמעולם לא היית צריך לארוז שנה את הגודל ראשון, דחוס שני תמיד.
אז זרימת העבודה היא: פתוח שינוי גודל תמונה, הגדר את הרוחב לגודל הגדול ביותר שבו התמונה תציג בפועל (בדוק את הפריסה שלך - תמונת גוף בבלוג היא לעתים קרובות 720–800px, לא 1920). resizer מתאים לתיבת היעד שלך ולעולם לא נמתח או יבולי, כך יחס רוחב-גובה בטוח. ואז לקחת את הפלט הזה לתוך קומפרס תמונה ומשוך את האיכות למטה עד שאתה יכול רק בקושי לדעת - בדרך כלל 78–82 לתמונות. תצוגה מקדימה בזום מלא לפני שאתה מתחייב; חפצים מסתתרים בשיפועים ובגווני עור, לא בתמונה הממוזערת.
מספר אחד לעגן: עבור תוכן צילומי, איכות 80 היא התשובה המשעממת והאמינה. I've A/B'd 80 מול 90 בצילומי מוצר אמיתיים, וב-100% זום על צג טוב, רוב האנשים יכולים 't לקרוא לזה. אבל 80 הוא לעתים קרובות קטן ב-40%. מתחת ל-60 בערך אתה מתחיל לראות חפצים חסומים באזורים חלקים, כך ש-' הוא הרצפה לכל דבר מלבד תמונה ממוזערת זעירה.
שני גוטצ'ות דפדפנים שיבלבלו אתכם
שני אלה עלו לי זמן איתור באגים אמיתי, אז למד אותם בחינם.
PNG שקוף → JPEG הופך את הרקע לשחור, לא לבן. פעם המרתי לוגו שקוף לJPEG והאזורים השקופים יצאו שחור מלא הנחתי שהכלי היה שבור וביליתי עשרים דקות בוהה בו.It 's לא באג - it's מפרט הHTML.When you serialize a canvas to a format with no alpha channel (JPEG), the transparent pixels get composited onto solid black.If you need surpencency, keep PNG or use WebP, which supports alpha.If you specifically want a white background, put a white layer down first.
כל קוד מחדש מפשיט מטא נתונים של EXIF ו-GPS. מכיוון שהכלים האלה מציירים מחדש את התמונה על קנבס טרי, לפלט אין EXIF, אין מידע על מצלמה, אין קואורדינטות GPS משובצות. That's זכייה אמיתית בפרטיות - אתה 'לא מפרסמים בטעות את קו הרוחב/קו האורך שהטלפון שלך מוטבע בתמונה. אבל זה ' זה גם ברור אם הסתמכת על פרופילי צבע משובצים או מטא נתונים של זכויות יוצרים; גם אלה הולכים. לקידום אתרים זה קורה ' לא משנה, אבל יודע את זה ' קורה.
כיצד פועלות תמונות רספונסיביות ו-srcset?
טלפון מעבד תמונות ברוחב של אולי 390 פיקסלים משלוח זה קובץ 1920 פיקסלים מבזבז את רוב הבתים שרק דחסת בזהירות. srcset מתקן את זה על ידי מסירת לדפדפן תפריט בגדלים ולתת לו לבחור.
<img
src="product-800.webp"
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Matte-black wireless headphones on a walnut desk"
width="800" height="600" loading="lazy" />
כדי ליצור את שלושת הקבצים האלה, הפעל את אותו מקור שינוי גודל תמונה ב-400, 800 ו-1200 פיקסלים, ולאחר מכן המר כל אחד ל-WebP. ה sizes תכונה היא החלק שאנשים מדלגים עליו, ודילוג עליו שובר בשקט את כל העניין - בלעדיו, הדפדפן מניח שהתמונה ממלאת את נקודת התצוגה ותופס את המועמד הגדול ביותר. ספר לו כמה רחבה התמונה באמת מרנדרת והיא מורידה את התמונה הנכונה.
איך כותבים טקסט חלופי שבעצם עוזר?
טקסט Alt הוא החצי השני של קידום אתרים של תמונות וזה 's חצי המפתחים ממהרים. זה עושה שלוש עבודות בבת אחת: it's מה שקורא מסך קורא בקול למשתמש עיוור, it's איך סורק מבין מה התמונה מראה, וזה 's הטקסט החלופי אם התמונה לא מצליחה להיטען. לעשות את זה נכון זה בעיקר על כתיבה כמו אדם, לא רובוט מילות מפתח.
הכלל שאני משתמש בו: תאר את התמונה כמו שאתה 'd תאר אותה למישהו בשיחת טלפון. Specific, natural, short - under about 125 characters so screen readers don't truncate it sworkly. Skip "image of" or "photo of," because the screen reader already it's an image; leading with those wastes the listener's time. And if it does't fit, leave it out - a photo of a keyboard does't need "buy cheap wireless headphones" jammed into its alt.
כמה לפני/אחרי מביקורות אמיתיות I'עשו:
alt="image"→alt="Matte-black wireless headphones on a walnut desk"alt="chart"→alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"alt="best cheap headphones buy now free shipping sale"(ממולא במילות מפתח) →alt="Over-ear headphones with the carrying case open beside them"
ניואנסים אחד שאנשים טועים: תמונות דקורטיביות גרידא - מפריד, פריחת רקע - צריכות להיות ריק alt="", לא תיאור. alt ריק אומר לקורא המסך לדלג עליו לחלוטין, וזה בדיוק מה שאתה רוצה לקישוט. reserve טקסט alt אמיתי לתמונות הנושאות מידע.
בזמן שאתה ' נמצאים בזה, תן שם לקובץ גם באופן תיאורי. wireless-headphones-matte-black.webp פעימות IMG_4532.jpg מכיוון שמנועי חיפוש קוראים את שם הקובץ כאות, ומקפים (לא קווים תחתונים) הם המפריד שגוגל מנתח כהפסקות מילים.
עד כמה זה בעצם משנה את Core Web Vitals?
LCP (הצבע התוכן הגדול ביותר): הגיבור שלך הוא בדרך כלל אלמנט LCP.השרת אותו במידות הנכונות, ב-WebP, באיכות ~80, ובאופן קריטי - עשה זאת לא lazy-טען אותו. Lazy-טעינה הגיבור מעל-הקיפול הוא עצמי קלאסי; זה מעכב את האלמנט המדויק LCP מודד. אם זה's הגיבור, <link rel="preload" as="image"> זה במקום.
CLS (שינוי פריסה מצטבר): תמיד לשים width ו height על ה <img>. שתי התכונות הללו מאפשרות לדפדפן לשמור את המקום לפני שהתמונה מגיעה, כך שהטקסט יקפוץ 't כשהוא נטען. זהו תיקון ה-CLS הזול ביותר שיש ואני עדיין מוצא אתרים שחסרים אותו.
INP (אינטראקציה לצבע הבא): images don't drive ישירות INP, אבל דף נחנק על 3 MB של תמונות לא אופטימליות הוא להרעיב את החוט הראשי ואת הרשת של הקיבולת JavaScript שלך צריך להגיב תמונות קלות יותר, אינטראקציות snappier, בעקיפין.
כמה דברים I'למדתי את הדרך המעצבנת
ביקורת לפני שאתה מבצע אופטימיזציה הפעל את הדף דרך PageSpeed Insights ותקן תחילה את הקובץ הכבד ביותר - העבריין של 1.2 מגה-בייט חשוב יותר מגילוח 4 קילו-בייט מסמל. שם קבצים כמו אדם: wireless-headphones-matte-black.webp פעימות IMG_4532.jpg בחיפוש תמונות מכיוון שהסורק קורא את שם הקובץ כאות תוכן. Write alt text you'd למעשה אומר לתאר את התמונה למישהו בטלפון - ספציפי, טבעי, מילת מפתח-כלול רק איפה שזה מתאים, אף פעם לא ממולא במילות מפתח. ו-don't תשכח את שלך פתח גרף שתף תמונה; 1200×630 בגודל נכון שהכנת בו שינוי גודל תמונה זה מה שמופיע בתצוגה מקדימה חברתית ולפעמים בחיפוש.
שאלות נפוצות
האם אופטימיזציה של תמונות באמת משפיעה על דירוג SEO?
כן, דרך Core Web Vitals. LCP ו-CLS הם אותות דירוג מאושרים של גוגל, ושניהם מונעי תמונה בכבדות תמונות אופטימליות בדרך כלל משפרות את ציוני מהירות הדף הנייד בהפרש ניכר, ובנייד שיכולים לתרגם לתנועת דירוג זה גם פותח את Google Images כמקור תנועה נפרד.
האם אוכל להמיר תמונות ל-AVIF עם כלי מקוון בחינם?
בדרך כלל לא, ו-Toolz.dev's Format Converter can't. ממירים בדפדפן מציירים ל-a <canvas>, והדפדפן 's מקודד קנבס מוציא רק JPEG, PNG ו-WebP - שם's אין מקודד AVIF זמין עבורו. המר ל-WebP באינטרנט במשך רוב הזכייה, והפק AVIF בצינור הבנייה שלך עם כלים כמו חד או avifenc אם אתה צריך את זה.
האם עלי להשתמש ב-WebP או ב-AVIF בשנת 2026?
WebP הוא ברירת המחדל הבטוחה ומה שאני מגיע אליו קודם - תמיכה אוניברסלית, חיסכון גדול, ואתה יכול לעשות את זה בדפדפן.AVIF דוחס עוד יותר ושווה להוסיף לתמונות גיבורים וגלריות גדולות, אבל צור אותו בזמן בנייה והגש אותו באמצעות <picture> עם נפילה של WebP.
לאיזו הגדרת איכות עלי לדחוס JPEG ו-WebP?
איכות 80 היא התשובה האמינה לתמונות. It' בדרך כלל לא ניתן להבחין בין המקור בצפייה רגילה תוך שהוא קטן יותר באופן דרמטי. תצוגה מקדימה ב-100% זום לפני ביצוע, מכיוון שחפצים מופיעים בשיפועים ובגווני עור מתחת ל-60, הדחיסה הופכת גלויה.
מדוע ה-PNG השקוף שלי הפך לשחור לאחר ההמרה ל-JPEG?
כי ל-JPEG אין ערוץ אלפא מפרט קנבס HTML אומר שפיקסלים שקופים מורכבים על שחור מלא כאשר אתה מבצע סדרה לפורמט שאינו אלפא. It's התנהגות צפויה, לא באג. שמור את התמונה כ-PNG או WebP כדי לשמר שקיפות, או הרכיב אותה על רקע לבן תחילה אם אתה רוצה לבן.
האם הכלים האלה מעלים את התמונות שלי לשרת?
מס 'כלי התמונה על Toolz.dev לעבד הכל באופן מקומי על בד בדפדפן שלך - הקובץ אף פעם לא עוזב את המכשיר שלך תופעת לוואי שווה לדעת: כל רצועות re-encode EXIF ו - GPS מטא נתונים, אשר טוב לפרטיות אבל אומר משובץ נתוני מצלמה ופרופילי צבע נשמטים מדי.
What's גודל הקובץ האידיאלי עבור תמונת אינטרנט?
כמטרה גסה: תמונות גיבורים מתחת ל~200 KB, תמונות בתוכן מתחת ל~100 KB ותמונות ממוזערות מתחת ל~30 KB. אלה ניתנים להשגה מאוד ברגע שאתה משנה את הגודל לרוחב התצוגה האמיתי ומשרת את WebP. המספר המדויק חשוב פחות מההרגל לשנות גודל ואז לדחוס ואז להמיר.
קריאה וכלים קשורים:
- קומפרס תמונה- גזור את גודל הקובץ לאחר שינוי גודל
- שינוי גודל תמונה- צור גדלים מגיבים ודימויים חברתיים
- ממיר פורמט- ייצוא PNG, JPEG או WebP
- המפתח's מדריך כלי תמונה
- דחיסת תמונה מוסברת
