הפעם הראשונה שבה לקוח's דף הבית נכשל א Core Web Vitals ביקורת בגללי, האשם היה תמונת גיבור יחיד: PNG 4.2 מגה-בייט שמעצב ייצא ישר מפיגמה ונפל לספריית המדיה של וורדפרס. זה הוצג ברוחב 1200 פיקסלים ומאוחסן ב-3800 פיקסלים. לדף לקח אחת עשרה שניות לצייר על חיבור נייד עם מצערת. I'd שלח אותו.
זה היה בימי WP Adminify שלי, וזה לימד אותי משהו שעיצב כל כלי תמונה שבניתי עבורו מאוחר יותר Toolz.dev: רוב בעיות התמונה הן 't בעיות עריכה, they're אינסטלציה בעיותמימדים שגוייםפורמט שגויאין לעבור דחיסהאתה don' t צריך Photoshop כדי לתקן כל זה אתה צריך שלושה או ארבעה כלים קטנים שעושים דבר אחד טוב ופועלים מהר.
מדריך זה עובר על כל פעולת תמונה יומיומית - שינוי גודל, דחיסה, המרת פורמט והסרת רקע - עם ההיגיון מאחורי כל אחת והטעויות I' עשו כדי שתוכל לדלג עליהן. כל כלי ב-Toolz.dev מעבד תמונות לחלוטין בדפדפן שלך התמונות שלך אף פעם לא נוגעות בשרת, מה שחשוב יותר ממה שאנשים מבינים ברגע שהם ' מטפלים בעבודת לקוח או בתמונות אישיות.
TL;DR: עבור העבודות הנפוצות אתה יכול להישאר 100% בדפדפן: שינוי גודל תמונה לתיקון מידות, קומפרס תמונה כדי לחתוך את גודל הקובץ, ממיר פורמט למעבר בין PNG/JPEG/WebP/AVIF, ו מסיר רקע עבור מוצר נקי צילומי פרופיל שום דבר לא מעלה - הקובץ עובר מהדיסק שלך לתוך הכרטיסייה דפדפן ונשאר שם סדר האופטימיזציה הנכון הוא כמעט תמיד לשנות את הגודל, ואז להמיר, ואז לדחוס.
מדוע לעבד תמונות בדפדפן במקום להעלות אותן?
ביותר "כלי תמונה מקוונים בחינם" לעבוד באותו אופן מתחת: אתה מעלה את הקובץ, שרת מעבד אותו, אתה מוריד את התוצאה דף האינטרנט הוא עור דק מעל מכונה שכורה איפשהו לדגם הזה יש שלוש בעיות, והפרטיות היא רק הקולנית ביותר.
פרטיות היא הדאגה הברורה. צילומי מוצר תחת אמברגו, תמונות זהות, צילומי מסך של לוחות מחוונים פנימיים, תמונות אישיות - התמונות שאנשים צריכים לרוב לשנות גודל או לדחוס הן בדיוק אלה שצריכות ' לשבת בספריית זמני של stranger's. "קבצים נמחקים לאחר שעה אחת" היא הבטחה שאתה יכול 't ביקורת.
חביון הוא העלות השקטה יותר העלאת אצווה של תמונות מצלמה של 20 מגה-בייט דרך Wi-Fi משרדי לוקחת יותר זמן משינוי הגודל עצמו כלי מבוסס דפדפן מדלג על הנסיעה הלוך ושוב - ה-"upload" הוא מיידי מכיוון שהקובץ פשוט עובר לזיכרון כאשר I'm מעבד תיקייה של תמונות מוצר, ההבדל הזה הוא ההבדל בין הפסקת קפה לזרימה מתמשכת.
ואז יש את הקירות שאף אחד לא מזכיר עד שהם מגיעים לאחד: מכסים בגודל קובץ, מגבלות יומיות, "שדרג ל-Pro כדי לעבד תמונות מעל 10 MB," סימני מים בשכבה החינמית. לכלי בצד הלקוח יש בדיוק מגבלה אחת, והוא 's המכונה שלך #39;s RAM.
הטכנולוגיה לעשות את כל זה בכרטיסייה היא סטנדרטית כבר שנים הHTML <canvas> אלמנט והקשר 2D שלו יכולים לפענח, לדגום מחדש ולקודד מחדש תמונות רסטר ללא כל שרת. the browser's own Image המפענח מטפל ב-JPEG, PNG, WebP, ויותר ויותר AVIF. There' זה כבר לא סיבה טכנית לשלוח תמונה ברחבי האינטרנט רק כדי להפוך אותה לרוחב של 800 פיקסלים.
כיצד משנים את גודל התמונה למידות הנכונות?
שינוי גודל הוא הפעולה אליה אני מגיע לרוב, וקבלת הממדים ממש במעלה הזרם מונעת את רוב בעיות הביצועים במורד הזרם הכלל שהלוואי I' d הפנים קודם לכן: לעולם אל תאחסן תמונה גדולה בהרבה מהגודל הגדול ביותר שהיא תציג אי פעם.
זרימת העבודה על שינוי גודל תמונה כַּל:
- גרור את התמונה שלך אל הכלי או לחץ כדי לגלוש.
- הזן את רוחב וגובה היעד בפיקסלים.
- שמור על נעילת יחס היבט אלא אם כן אתה רוצה להתמתח בכוונה - עם זה דולק, שינוי רוחב מכוון אוטומטית את הגובה כך ששום דבר לא יעוות.
- בחר את שיטת הדגימה מחדש (bicubic היא ברירת המחדל הבטוחה לתמונות; השכן הקרוב ביותר לאמנות פיקסלים שברצונך לשמור על פריכות).
- לעבד ולהוריד.
המספר האחד ששווה לשנן הוא מכפיל ה-Retina.חריץ שמוצג ב-800 פיקסלים אמור להחזיק תמונה בערך ב-1600 פיקסלים כך שהיא תישאר חדה במסכי 2× - לא המפלצת של 3800 פיקסלים ששלחתי בפעם הראשונה. להכפיל את גודל התצוגה, לא פי חמישה.
Here's גיליון רמאות של מקרה שימוש שאני שומר מוצמד, כי " באיזה רוחב זה צריך להיות" היא השאלה שעולה על כל פרויקט:
| השתמש במקרה | רוחב יעד | יחס גובה-רוחב | פורמט |
|---|---|---|---|
| גיבור אתר | 1920 פיקסלים | 16:9 | WebP |
| בלוג / תמונת תוכן | 1200 פיקסלים | 3:2 או 16:9 | WebP |
| תמונה ממוזערת | 320–400 פיקסלים | 1:1 או 4:3 | WebP |
| פוסט באינסטגרם | 1080 פיקסלים | 1:1 | JPEG |
| X / טוויטר בפיד | 1200 פיקסלים | 16:9 | JPEG |
| כותרת דואל | 600 פיקסלים | 3:1 | JPEG |
| מוצר מסחר אלקטרוני | 1000–1500 פיקסלים | 1:1 | WebP או PNG |
![]()
טעות אחת שאני עדיין רואה בסקירת קוד כל הזמן: העלאת קנה מידה. making an image גדול יותר מאשר המקור שלו יכול' t להמציא פרטים שמעולם לא נלכדו - הכלי פשוט משלב פיקסלים חדשים, ובעבר כ-200% אתה מקבל תוצאה רכה ועיסה. אם לקוח שולח לוגו של 500 פיקסלים וזקוק לו ב-2000 פיקסלים, התשובה הכנה היא "ייצא אותו מחדש מהמקור הווקטור," לא "הגדל אותו ותקווה."
איך דוחסים תמונה מבלי להרוס אותה?
דחיסה היא המקום שבו חי החיסכון האמיתי במשקל הדף. תמונות הן בדרך כלל הדבר הכבד ביותר בדף אינטרנט, כך שכיווץ שלהן הוא עבודת הביצועים בעלת המינוף הגבוה ביותר שרוב האתרים יכולים לעשות.
ישנם שני סוגים, וההבחנה מחליטה הכל:
דחיסה מאבדת זורק נתונים שהעין האנושית לא צפויה לפספס - וריאציה עדינה בצבע, מרקם בתדר גבוה. JPEG באיכות של 80% הוא לרוב קטן ב-60–70% מאותה תמונה באיכות מקסימלית ללא הבדל נראה לעין בגודל צפייה רגיל. זה מה שאתה רוצה לצילומים.
דחיסה ללא הפסדים מסדר מחדש את הנתונים בצורה יעילה יותר מבלי להשליך אף אחד מהם; התמונה המפורקת זהה לפיקסל לפיקסל. PNG עובד כך. השתמש בו כאשר כל פיקסל חשוב - לוגו, צילומי מסך, דיאגרמות, כל דבר עם טקסט חד או קצוות קשים.
ה קומפרס תמונה כלי מאפשר לך להגדיר רמת איכות, תצוגה מקדימה של התוצאה, ולהשוות גדלי קבצים זה לצד זה לפני שאתה מתחייב ברירת המחדל הכנה שלי עבור תמונות אינטרנט היא 80% איכות - I' בדקתי נמוך יותר ויותר על פני הרבה דפים, ו 80 היא הנקודה שבה אני מפסיק להיות מסוגל להבחין בין הגרסה הדחוסה למקור בגודל צפייה אמיתי אם אתה רוצה את ההיגיון המלא, ה מדריך דחיסת תמונה מעמיק מדוע המספר הזה מחזיק מעמד.

הטעות שעשיתי במשך זמן רב עד כדי מבוכה: דחיסה לפני שינוי גודל אם אתה דוחס תמונה של 3800 פיקסלים ולאחר מכן משנה את גודלה ל-1200 פיקסלים, השקעת את כל מאמץ הדחיסה הזה על פיקסלים שאתה ' עומדים לזרוק, והקובץ הסופי גדול וגרוע יותר מאשר אם אתה 'd עשה את זה בדרך אחרת. שנה את הגודל תחילה, ולאחר מכן דחוס את התמונה הקטנה יותר תמיד.
באיזה פורמט תמונה אתה באמת צריך להשתמש?
לנוף הפורמטים יש יותר אפשרויות טובות ממה שהיה פעם, וזו בעיה נחמדה שיש. Here's איך אני מחליט, בלי הברק השיווקי.
JPEG האם הפורמט האובדני האוניברסלי - נתמך בכל מקום, נהדר לתמונות, ללא שקיפות. It' היא החזרה הבטוחה ועדיין הקריאה הנכונה לדואל, כאשר תמיכת הלקוח בפורמטים חדשים יותר היא היפוך מטבע.
PNG הוא חסר אובדן עם שקיפות מלאה. It's הבחירה הנכונה עבור צילומי מסך, לוגו, וכל דבר עם טקסט או קצוות חדים. It is the טועה בחירה לתמונות - תמונה שנשמרה כ-PNG יכולה להיות גדולה פי כמה מאותה תמונה כמו JPEG ללא תועלת נראית לעין.
WebP האם ברירת המחדל שלי לאינטרנט בשנת 2026. הוא עושה גם אובדן וגם ללא אובדן, תומך בשקיפות ופועל בערך ב-25–35% קטן יותר מ-JPEG באיכות דומה. תמיכת דפדפן היא למעשה אוניברסלית בשלב זה. אם הייתי צריך לבחור פורמט אחד עבור אתר חדש 's תמונות, זהו זה.
AVIF דוחס חזק יותר - בדרך כלל קטן בכ-50% מ-JPEG - עם טיפול מצוין בשיפועים ומרקם עדין. הפשרות הן קידוד איטי יותר ותומכות בכך ' טוב מאוד אבל לא ממש בכל מקום. אני משתמש בו כבחירה המובילה ב-a <picture> אלמנט עם WebP מתחת.
SVG isn't פורמט רסטר בכלל - זה 's וקטור, כך שהוא קנה מידה לכל גודל ללא פיקסל מטושטש אחד השתמש בו עבור לוגו, סמלים, ואיורים. Don't לנסות להמיר צילום אליו.
המרה בין אלה היא עבודה של שני קליקים על ממיר פורמט: שחרר את התמונה, בחר את פורמט היעד, התאם איכות אם זה 's lossy, הורד. הדפוס שאני שולח באתרים אמיתיים משתמש בדפדפן 's משא ומתן על פורמט משלו:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Description" width="1200" height="675" loading="lazy">
</picture>
הדפדפן בוחר את הפורמט הראשון שהוא מבין, כך שטלפון מודרני מקבל AVIF, טלפון ישן יותר מקבל WebP, וכל דבר עתיק עדיין מקבל JPEG עובד. שימו לב למפורש width ו height- אלה הם ' קישוט, הם שומרים מקום פריסה ועוצרים מהדף לקפוץ עם טעינת התמונות, וזה ניצחון מצטבר ב-Layout Shift.
כיצד ניתן להסיר רקע תמונה בדפדפן?
הסרת רקע פירושה בעבר כלי מנוי או עשרים דקות עם כלי העט בפוטושופ. כעת מודל למידת מכונה קטן מספיק כדי לפעול בכרטיסייה של דפדפן מטפל במקרים הנפוצים תוך מספר שניות.
ה מסיר רקע מנתח את התמונה, בונה מסכת פיקסלים המפרידה בין נושא לרקע, ומוציא PNG עם ערוץ אלפא שקוף העלה, חכה רגע, בדוק את הקצוות, הורד כל העניין נשאר מקומי - הדגם פועל על המכונה שלך, כך שאפילו צילומי מוצר רגישים לעולם לא עוזבים אותו.
זה עובד הכי טוב כשאתה נותן לזה סיכוי לחימה: אפילו תאורה, ניגודיות הגונה בין הנושא לבין מה 's מאחוריו, ומקור ברזולוציה גבוהה למדי. שיער, פרווה וקצוות עצבניים הם עדיין המקום שבו הדגמים האלה נאבקים - אם לתוצאה יש הילה סביב מישהו 's ראש, זה 's מצב הכישלון לצפות, לא באג שאתה יכול להגדיר משם. נושאים בעלי קצוות נקיים כמו מוצרים ארוזים יוצאים כמעט מושלמים.

מה ' הסדר הנכון לאופטימיזציה של תמונות לאינטרנט?
בכל פעם ש-I' דילגת על הזמנה זו או עשיתי אותה מחוץ לרצף, I' שילמת עליה. עשה זאת בסדר הזה והפלט קטן יותר ונראה טוב יותר:
שלב 1 - שנה את הגודל כדי להציג מידות. גלה את הגודל הגדול ביותר שבו התמונה תציג, הכפיל אותה עבור Retina, ו לשנות גודל לזה. שלב בודד זה בדרך כלל עושה יותר עבור גודל הקובץ מכל דבר אחר, כי אתה & #39; מוחקים פיקסלים שלעולם לא היו נראים.
שלב 2 - המר לפורמט הנכון. לְהַ תמונות ל-WebP (או AVIF עם נפילה). שמור לוגו וצילומי מסך כ-PNG. שמור על אמנות וקטורית אמיתית בתור SVG.
שלב 3 - דחוס לאיכות היעד. לִדחוֹס בסביבות 80% עבור תמונות אינטרנט אובדות, ואז גלגל העין את התוצאה בגודל בפועל.
שלב 4 - שרת באחריות ב-HTML. להשתמש srcset אז דפדפנים מורידים גודל המתאים למכשיר, ומוסיפים loading="lazy" לכל דבר מתחת לקפל כך שהוא יחסום 't את הצבע הראשוני.
תקציב ביצועים רופף שכדאי לשמור: תמונות גיבורים מתחת ל-200 KB (הם נוהגים ב-Largest Contentful Paint, אז הם הכי חשובים), תמונות תוכן רגילות מתחת ל-100 KB, תמונות ממוזערות מתחת ל-30 KB ולוגו מתחת ל-10 KB - השתמש ב-SVG וב-You'בדרך כלל ינצח את זה בלי לנסות. אלה הם 't חוקים, הם ' הם מבחן ריח. אם תמונה בודדת חולפת על פני הדלי שלה, זה ' שווה מבט שני.
שאלות נפוצות
מהו כלי התמונה המקוון החינמי הטוב ביותר?
זה תלוי בעבודה, וזו הסיבה Toolz.dev מפצל אותם לכלים ממוקדים ולא עורך אחד נפוח.למידות, להשתמש שינוי גודל תמונה. לגודל הקובץ, השתמש קומפרס תמונה. לשינוי פורמטים, השתמש ב ממיר פורמט. לבידוד נבדקים, השתמש ב מסיר רקע. כל הארבעה הם בחינם, אינם זקוקים להרשמה ומעבדים תמונות במלואן בדפדפן שלך.
כיצד אוכל לשנות גודל של תמונה מבלי לאבד איכות?
הקטנת קנה מידה - הפיכת תמונה לקטנה יותר - בקושי עולה איכות כלשהי מכיוון שלמקור יש יותר פרטים מאשר לצרכי הגודל הקטן יותר השתמש בדגימה מחדש דו-קובית לתוצאה החלקה ביותר העלאת קנה מידה היא הכיוון המסוכן: הכלי צריך להמציא פיקסלים, כך שהאיכות יורדת, ומעבר לכ-200% מהגודל המקורי הרכות הופכת ברורה כאשר אתה צריך גרסה הרבה יותר גדולה, חזור לקובץ המקור המקורי במקום להגדיל עותק קטן.
באיזה פורמט תמונה עלי להשתמש עבור האתר שלי?
השתמש ב-WebP עבור תמונות ורוב תמונות התוכן - it' קטן בערך ב-25–35% מ-JPEG עם תמיכה כמעט אוניברסלית בשנת 2026. השתמש ב-SVG עבור לוגו ואייקונים כך שהם יישארו חדים בכל גודל. השתמש ב-PNG רק כאשר אתה צריך איכות ללא הפסדים עם שקיפות. להגיע ל-AVIF כאשר אתה רוצה דחיסה מקסימלית ויכול להתאים אותו עם החזרה של WebP ב-a <picture> אלמנט.
האם עלי לשנות את גודל לפני או אחרי הדחיסה?
שנה גודל תחילה, ולאחר מכן דחיסה דחיסה של תמונה גדולה ולאחר מכן כיווץ שלה מבזבז מאמץ על פיקסלים שנזרקים במהלך שינוי הגודל, והקובץ הסופי בסופו של דבר גדול ואיכותי יותר מאשר אם אתה & #39;d עשה את זה בסדר הנכון שינוי גודל תחילה אומר המדחס עובד על התמונה הקטנה יותר, מייצר את התוצאה הקטנה ביותר, הנקייה ביותר.
האם זה בטוח להשתמש בכלי תמונה מקוונים עם תמונות אישיות או לקוחות?
רוב כלי התמונות המקוונים מעלים את התמונות שלך לשרתים שלהם כדי לעבד אותן, וזה דאגה אמיתית לכל דבר פרטי או תחת NDA. כלי התמונה ב-Toolz.dev מעבדים הכל בצד הלקוח בדפדפן שלך באמצעות ה-API של canvas, ולהסרת רקע, דגם ML בדפדפן. התמונות שלך לעולם אינן עוזבות את המכשיר שלך, אז הן ' בטוחות לתמונות אישיות, עבודת לקוח וצילומי מוצר חסויים.
מה ההבדל בין WebP ל-AVIF?
שניהם מנצחים JPEG ו PNG על דחיסה.WebP הוא בסביבות 25–35% קטן יותר JPEG עם תמיכה בדפדפן אוניברסלי ביעילות, מה שהופך אותו ברירת המחדל המעשית.AVIF דוחף דחיסה עוד יותר - בדרך כלל כ 50% קטן יותר JPEG - ומטפל gradients ומרקם טוב יותר, אבל זה מקודד לאט יותר ותמיכה is & #39;t די בכל מקום עדיין הגישה הנפוצה היא לשרת AVIF ראשון עם WebP כמו fallback כך כל דפדפן מקבל את הפורמט הטוב ביותר שהוא יכול לפענח.
כיצד אוכל להסיר את הרקע מתמונה בחינם?
פתח את מסיר רקע, זרוק את התמונה שלך פנימה, ודגם בדפדפן מזהה את הנושא ומחליף את הרקע בשקיפות, נותן לך PNG עם ערוץ אלפא. זה עובד הכי טוב עם תאורה אחידה וניגודיות ברורה בין נושא לרקע. פרטים עדינים כמו שיער מעופף הם עדיין המקרה הקשה לכל כלי אוטומטי, אז בדוק את הקצוות לפני שאתה מסתמך על התוצאה.
מדוע תמונות האתר שלי מאטות את הדף?
כמעט תמיד זה 's אחד משלושה דברים: התמונה מאוחסנת הרבה יותר גדולה ממה שהיא מציגה, זה 's בפורמט ישן כמו תמונת PNG לא דחוסה, או שהיא מעולם לא הועברה דרך מעבר דחיסה. תקן אותם לפי הסדר - שנה את הגודל כדי להציג מידות, המר ל-WebP, ואז דחוס לכ-80% איכות - ו-you' בדרך כלל יקצץ את משקל התמונה הכולל ביותר ממחצית, מה שמופיע ישירות בציון הצבע התוכן הגדול ביותר שלך.
איך אני מקבל תמונה מתחת ל-100 KB?
עבוד בסדר הזה והפסק ברגע שאתה ' נמצאים מתחת למגבלה: שנה את הגודל לממדים שבהם התמונה מוצגת בפועל, המר ל-WebP, ואז דחוס באיכות של 80%. לתמונה טיפוסית ברוחב 1600 פיקסלים שהשילוב נוחת איפשהו בין 60 ל-120 KB. אם אתה ' עדיין נגמר, הורד את האיכות ל-70% לפני שתכווץ את הממדים עוד יותר - אובדן איכות ב-70% בולט הרבה פחות מתמונה קטנה יותר בעליל.
האם אוכל להמיר תמונות HEIC מהאייפון שלי ל-JPG?
כן. זרוק את קובץ ה-.heic לתוך ממיר פורמט ולייצא אותו כ-JPG, PNG או WebP. HEIC הוא הפורמט אליו שומרים מכשירי האייפון כברירת מחדל, ולמרות שהוא נדחס היטב, רוב אפליקציות Windows, דפדפנים ישנים ומערכות ניהול תוכן עדיין מסרבות לפתוח אותו - וזו הסיבה שהמרה ל-JPG או WebP לפני העלאה לכל מקום היא בדרך כלל המהלך הבטוח.



