במשך כשישה חודשים, כל תמונה ממוזערת בבלוג הזה הייתה מעט רכה. לא שבור. לא ברור שלא בסדר. רַק... מְטוּמטָם, באופן שבו אתה מבחין בזווית העין ואז מדבר על עצמך שלא לשים לב.
בפריסה היה כתוב שחריץ התמונות הממוזערות היה ברוחב של 600 פיקסלים אז ייצאתי תמונות ממוזערות ברוחב של 600 פיקסלים זה בדיוק הדבר הלא נכון לעשות, ולקח לי הרבה זמן מביך להבין למה, כי בצג שלי זה נראה בסדר ובטלפון שלי זה נראה כמו צילום של צילום.
הסיבה היא שפיקסל CSS אינו פיקסל התקן. טלפון מודרני או מחשב נייד רשתית אורזים שניים או שלושה פיקסלים פיזיים בכל פיקסל CSS - זה' מה window.devicePixelRatio דיווחים אז התמונה שלי בת 600 פיקסלים נמתחה על פני 1,200 פיקסלים פיזיים של זכוכית, והדפדפן המציא את ההבדל. אינך יכול להמציא פרטים ש-isn't בקובץ. התיקון היה לייצא ב-1,200 ולתת ל-CSS להציג אותו ב-600.
That's הטעות שהמדריך הזה בנוי מסביב, יחד עם שלושת או ארבעת האחרים שגורמים לתמונות בגודל שונה להיראות גרוע יותר ממה שהן צריכות. ה כלי לשינוי גודל תמונה בToolz.dev עושה את העבודה בדפדפן שלך - הקובץ אף פעם לא עוזב את המכונה שלך - אבל הכלי הוא החלק הקל לדעת אילו מספרים להקליד לתוכו הוא החלק שחשוב למעשה.
TL;DR: ייצוא ב 2× גודל התצוגה עבור מסכי רשתית (חריץ 600px צריך קובץ 1,200px), ולעולם לא קנה מידה למעלה- אתה יכול't להוסיף פרטים שמעולם לא נלכדו נעל את יחס הגובה-רוחב אלא אם כן אתה באמת רוצה לעוות את התמונה. שנה גודל לפני אתה דוחס, לא אחרי השתמש ב כלי לשינוי גודל תמונה כדי לקבוע מידות, ה מחשבון יחס גובה-רוחב כדי לפתור את הצד החסר, ואת מדחס תמונה כדי להקטין את גודל הקובץ לאחר מכן הכל פועל בצד הלקוח אזהרה אחת שכדאי לדעת מראש: שינוי גודל מקודד מחדש את התמונה, אז כל המטא נתונים של EXIF מופשטים- נהדר לפרטיות, מפתיע מדי פעם.
מדוע התמונות שלי נראות מטושטשות לאחר שינוי גודל?
תשע פעמים מתוך עשרה it's אחד משלושה דברים, והם' כולם ניתנים לתיקון.
אתה הגדלת. הגדלת תמונה של 400×300 ל-1600×1200 מבקשת מהתוכנה לייצר שנים עשר פיקסלים של מידע עבור כל אחד שיש לה היא עושה זאת על ידי אינטרפולציה - ממוצע שכנים כדי לנחש מה שייך ביניהם - והתוצאה רכה, כי הפרט באמת לא קיים שום דבר פחות ממודל גנרטיבי ממציא אותו בחזרה. התחל תמיד מהמקור הגדול ביותר שיש לך והקטן. למטה כמעט ללא הפסדים; למעלה זה ניחוש.
התעלמת מיחס הפיקסלים. הטעות שתיארתי למעלה אם תיבת CSS היא 600×400 והמשתמש' מסך s הוא 2×, הדפדפן צריך 1200×800 פיקסלים אמיתיים כדי להפוך אותו crisply.ייצוא ב 2× ולתת את קנה המידה של הדפדפן למטה - downscaling בדפדפן נראה נהדר; upscaling נראה כמו בוץ.
משהו אחר דחס אותו אחריך. אתה שינוי גודל בזהירות, ואז העלה לפלטפורמה שקודד מחדש את התמונה שלך בהגדרת האיכות שלה כל פלטפורמה חברתית עושה את זה אתה יכול & #39;t לעצור את זה, אבל אתה יכול לצמצם את זה: להעלות קרוב לפלטפורמה & #39;s ממדי יעד כך שהוא עושה כמה שפחות עבודה, ולמסור לו קובץ ש & #39;s כבר נקי ולא אחד שהוא צריך לתקן.
מה בעצם קורה כאשר אתה משנה גודל של תמונה?
שווה להבין, כי זה מסביר את רוב ההפתעות.
תמונת רסטר היא רשת של פיקסלים. להפוך את הרשת הזו לקטנה יותר פירושו להחליט מה א חדש פיקסל צריך להיות כשהוא יושב בין כמה ישנים ההחלטה הזו נקראת דגימה מחדש, והאלגוריתם חשוב:
- השכן הקרוב ביותר- תפוס את הפיקסל המקורי הקרוב ביותר קצוות מהירים, חסומים ומשוננים. נכון רק לאמנות פיקסלים, כאשר החסימות היא הנקודה.
- ביליניארי- ממוצע ארבעת הפיקסלים הקרובים ביותר חלק, קצת רך.
- דו-קובי- שקלו שישה עשר פיקסלים מסביב עם עקומה מעוקבת. חד יותר מבילינארית; ברירת המחדל ההגיונית ברוב תוכנות שולחן העבודה.
- לנצ'וס- מסנן סינק עם חלונות מעל שכונה גדולה יותר. האיכות הטובה ביותר להקטנת קנה מידה, האיטית ביותר, יכולה לייצר צלצולים חלשים בקצוות בעלי ניגודיות גבוהה.
שינוי גודל בד הדפדפן יושב בטווח הבילינארי לביקובי ועושה ' נותן לך לבחור במדויק - אתה יכול לבקש רק איכות החלקה, ומפרט HTML' ברירת המחדל של רמז זה היא "low". That' בסדר עבור הרוב המכריע של עבודת האינטרנט ו-it's מדוע הכלי Toolz.dev מרגיש מיידי.
יש טריק אחד של משתמש כוח שכדאי לדעת כאשר אתה מקטין את קנה המידה בגורם גדול בצעד בודד - נניח 4000px עד 400px, הפחתה של 10× - חלק מיישומי הדפדפן מדגימים בדלילות מדי ואתה מקבל כינוי: קצוות מנצנצים, דפוסי מוירה בבד או לבנים, ואיבד פרטים עדינים. הפתרון הוא ירד מהקנה מידה: צמצם שוב ושוב בחצי (4000 → 2000 → 1000 → 500 → 400) כך שכל שלב יזרוק רק חצי מהפיקסלים. אם הפחתה גדולה אי פעם תצא פריכה יותר ממה שציפית, זה ' הסיבה, ולעשות זאת בשני מעברים יתקן זאת.
מה בעצם עושה הכלי Toolz.dev Resize?
I' מעדיף לספר לך בדיוק מאשר שתגלה מאוחר יותר. It's resizer מבוסס קנבס:
- הקובץ שלך נקרא בדפדפן באמצעות כתובת אתר של אובייקט. זה מעולם לא הועלה- there's אין שרת להעלות אותו אליו.
- It's מצויר על קנבס HTML בממדי היעד.
- הבד מקודד מחדש ל PNG, JPEG, או WebP (ברירת המחדל של האיכות היא 0.9 עבור הפורמטים האבודים).
- אתה מוריד את התוצאה.
שלוש השלכות נובעות מכך, ורק אחת מהן נמצאת ברוב הכלים' עותק שיווקי:
מטא נתונים של EXIF מופשטים. קידוד מחדש של קנבס מייצר קובץ חדש לגמרי. דגם מצלמה, עדשה, זמן לכידה, וחשוב מכך - קואורדינטות GPS אל תשרוד. לשום דבר שאתה 're מפרסם, that's תכונת פרטיות, ואחת אמיתית: תמונות ישירות מטלפון נושאות באופן שגרתי את הקואורדינטות המדויקות של המקום שבו הן צולמו. אם אתה צורך ה-EXIF (עבור תיק צילום, נניח), שנה את גודלו עם כלי שמשמר אותו במפורש. אם המקור יצא ישר מגלגול מצלמה, הציץ בכיוון הפלט לפני שתפרסם.
קובצי GIF מונפשים יוצאים כמסגרת אחת. קנבס מצייר פריים אחד אין דרך כנה לתאר את זה כמשהו אחר מלבד מגבלה - אם אתה צריך לשנות את גודל האנימציה ולהמשיך לנוע, זה לא הכלי. (I' מעדיף לומר זאת בצורה ברורה מאשר לתת לך לגלות זאת לאחר ההורדה.)
נעילת יחס הגובה-רוחב פירושה "fit inside", לא "מתח למילוי". אם אתה מזין גם רוחב וגם גובה כשהיחס נעול, התמונה מותאמת להתאמה בתוך התיבה הזאת תוך שמירה על הפרופורציות שלה אז תמונה 16:9 עם יעד 1000×1000 יוצא 1000×563, לא 1000×1000. זה לעולם לא יעוות את התמונה שלך - אבל זה גם won't לחתוך אותו כדי למלא את הריבוע אם אתה צריך ריבוע מדויק מלבן, אתה צריך יבול, לא שינוי גודל ההבחנה הזאת מבלבלת אנשים ללא הרף וזה 's שווה להיות מדויק על.
איך בעצם עובדים יחסי היבט?
יחס רוחב-גובה הוא רק רוחב ÷ גובה, מבוטא כזוג המתמטיקה היא פשוטה ואתה אמור להיות מסוגל לעשות את זה בראש שלך, כי זה מונע את השגיאה הנפוצה ביותר שינוי גודל: מעיכה.
כדי למצוא את הצד החסר, שמור על היחס קבוע:
new_height = new_width × (original_height ÷ original_width)
תמונה בגודל 4000×3000 (4:3) שגודלה שונה ל-1200 רוחב הופכת ל-1200 × (3000/4000) = 900 גָבוֹהַ. סוג 1200 ו-800 במקום זאת, ואתה ' מעכת תמונה של 4:3 ל-3:2 - הפנים מצטמצמות, עיגולים הופכים לאליפסות, וכל אחד יכול לדעת משהו ' כבוי גם אם הם יכולים 't תגיד מה. ה מחשבון יחס גובה-רוחב עושה זאת עבורכם ומקטין את היחס גם עבורכם.
הנה היחסים שממשיכים לעלות, כשהמתמטיקה נבדקת ולא מועתקת:
| יחס | עשרוני | שימוש אופייני | גודל דוגמה |
|---|---|---|---|
| 1:1 | 1,000 | פוסטים מרובעים, תמונות פרופיל, לוגואים | 1080×1080 |
| 4:5 | 0.800 | פוסטים חברתיים של פורטרט (מקסימום רווח אנכי בפיד) | 1080×1350 |
| 9:16 | 0.563 | סיפורים, סלילים, מכנסיים קצרים, TikTok - אנכי במסך מלא | 1080×1920 |
| 16:9 | 1.778 | תמונות ממוזערות של וידאו, תמונות גיבורים במסך רחב, שקופיות | 1280×720 |
| ~1.91:1 | 1.911 | כרטיסי תצוגה מקדימה של קישור (צורת OpenGraph) | 1200×628 |
| 3:1 | 3,000 | באנרים פרופיל רחב | 1500×500 |
| 4:1 | 4,000 | באנרים בפרופיל רחב במיוחד | 1584×396 |
הערה כנה אחת על זה "1.91:1" שורה, מכיוון שזה מציק לי בכל פעם: 1200×628 הוא לא בעצם 1.91:1. מופחת כראוי 's 300:157, או 1.911. התעשייה מקיפה את זה וכולם מושכים בכתפיים. זה ' לא משנה בפועל - אבל אם אתה ' תהיתם אי פעם למה 1200×628 does't מתחלקים לכל דבר נקי, that's למה.
מפרט פיקסל הפלטפורמה משתנה; יחסים כמעט אף פעם לא עושים זאת. במקום לסמוך על טבלת מידות בפוסט בבלוג (כולל זה) עבור קמפיין שחשוב, בדוק את הפלטפורמה ' המפרט הנוכחי של עצמו ולאחר מכן השתמש ביחס שלמעלה כדי לפגוע בו. הצורה יציבה גם כשהמספרים נסחפים.
איזה גודל באמת צריכות להיות תמונות אינטרנט?
עבור אתר אינטרנט שאתה שולט בו - שבו אתה ' מבצעים אופטימיזציה עבור הצבע התוכן הגדול ביותר ולא עבור מישהו אחר 's מעלה - ההיגיון שונה וטוב יותר.
התחל מתיבת ה-CSS, לא מהתמונה. מצא כמה רחב התמונה באמת מציגה בפריסה שלך. לא המיכל's רוחב מקסימלי - ה תמונה's רוחב, בנקודת השבירה שאכפת לך ממנה ואז תכפיל את זה עבור רשתית. That's גודל הייצוא שלך. כל מה שמעבר לזה הוא בתים שאתה ' משלמים למשלוח והמשתמש משלם להורדה, תמורת אפס תועלת גלויה.
מגישים יותר מגודל אחד. קובץ בודד של 2400 פיקסלים בזבזני עבור טלפון שיעבד אותו ב-380 פיקסלים CSS. srcset קיים בדיוק בשביל זה:
<img
src="hero-1200.webp"
srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
sizes="(max-width: 768px) 100vw, 1200px"
width="1200" height="675"
alt="..."
/>
הדפדפן בוחר את הקובץ הקטן ביותר שעדיין ייראה חד במכשיר זה. ותמיד להגדיר width ו height תכונות - הם נותנים לדפדפן לשמור את המקום לפני טעינת התמונה, וזה מה שעוצר את הדף מלקפוץ ולהרוס את ציון ה-Cumulative Layout Shift שלך.
שנה את הגודל ראשון, דחוס שני. זה הסדר שאנשים מקבלים לאחור דחיסת תמונה של 4000 פיקסלים ו ואז שינוי גודלו ל-800 פיקסלים פירושו שהשקעת מאמץ באופטימיזציה של פיקסלים שעמדת לזרוק - וסביר להניח שאפית חפצי דחיסה לתוך הפיקסלים ששמרת. חתוך תחילה את הממדים, ולאחר מכן דחוס את מה ' נשאר עם מדחס תמונה. מידות הן כמעט תמיד הניצחון הגדול יותר בכל מקרה: חציית שני הצדדים של תמונה מסירה 75% של הפיקסלים שלו לפני שמדחס נוגע בו אני מעמיק על זה ב מדריך דחיסת תמונה.
לאחר מכן בחר את הפורמט הנכון. בערך: JPEG לצילומים, PNG כאשר אתה צריך שקיפות או טקסט ושורות חדים, WebP עבור בעצם כל מה באינטרנט כי זה מנצח את שניהם באיכות שווה. ה ממיר פורמט תמונה מטפל בצעד הזה, וה סקירת כלי תמונה מכסה את האופן שבו החלקים משתלבים זה בזה.
כיצד אוכל לשנות גודל של תמונה ב-Toolz.dev?
- פתח את כלי לשינוי גודל תמונה. אין חשבון, אין מה להתקין.
- זרוק את התמונה שלך פנימה. זה נטען ישר לתוך הדפדפן צפה בכרטיסייה רשת אם אתה רוצה הוכחה כלום's נשלחת לכל מקום - that's בדיקה ששווה להפעיל על כל כלי תמונה שאתה מדביק בו תמונות פרטיות.
- הזן את ממדי היעד שלך. הקלד את הרוחב; כשהיחס נעול, הגובה עוקב. זכור להכפיל עבור הרשתית אם זה עבור מסך.
- בחר את פורמט הפלט שלך- PNG, JPEG או WebP.
- להורדה Download. נוצר בדפדפן שלך, ישר לדיסק שלך.
אם אתה & #39;re הפקת אותה תמונה בכמה גדלים, לעבוד מן המקור הגדול ביותר בכל פעם. Don't לשנות את גודל הייצוא 1200px עד 600px - לחזור למקור ולייצא 600 מזה כל קידוד מחדש של קובץ כבר אבד תרכובות הנזק, באותו אופן צילום של צילום degreases.It & #39;s משמעת קטנה שמופיעה בתוצאה הסופית.
שאלות נפוצות
האם אוכל לשנות את גודל התמונה מבלי לאבד איכות?
הקטנת קנה מידה לא מאבדת כמעט שום דבר מורגש - אתה & #39;re השלכת נתוני פיקסלים שאינך צריך עוד, והתוצאה על המסך נראית חדה. העלאת קנה המידה תמיד מאבדת איכות, מכיוון שהתוכנה צריכה לבצע אינטרפולציה של פיקסלים שמעולם לא נלכדו, לייצר רכות או חפצים גלויים. תמיד שנה את הגודל מהמקור הגדול ביותר שיש לך ולא למעלה ממקור קטן.
באיזה גודל כדאי לי לייצא תמונות למסכי רשתית?
ייצוא ב 2× הגודל התמונה מוצגת ב.If הפריסה שלך renders תמונה בתיבה 600×400, לייצא אותו ב 1200×800 כך שהוא נשאר חד על מכשירים עם א devicePixelRatio של 2. מעבר ל-2× שווה רק לעתים נדירות את הבתים הנוספים, מאחר והתועלת הנראית לעין היא מינימלית אפילו בתצוגות 3×.
האם שינוי גודל תמונה מסיר נתוני EXIF?
כן, כאשר שינוי גודל מתרחש באמצעות קנבס HTML - כפי שקורה ב-Toolz.dev - הכלי מקודד מחדש את התמונה לקובץ חדש ומטא נתונים של EXIF אינם מועברים. זה אומר שפרטי המצלמה, זמן הצילום וקואורדינטות ה-GPS מופשטים כולם לפרסום, זוהי יתרון פרטיות; אם אתה צריך EXIF שמור, השתמש בכלי שתומך בו במפורש.
האם אוכל לשנות את גודל ה-GIF המונפש ולשמור על האנימציה?
לא עם resizer מבוסס קנבס.Canvas לוכדת מסגרת בודדת, כך שהפלט הוא תמונת סטילס בפורמט PNG, JPEG או WebP. שינוי גודל אנימציה תוך שמירה על כל הפריימים שלה דורש כלי עיבוד GIF ייעודי.
כיצד אוכל לשנות גודל של תמונה לגודל קובץ ספציפי ב-KB?
גודל הקובץ הוא לא משהו שאתה מגדיר ישירות - הוא נופל מממדים, פורמט ואיכות דחיסה. עבודה לאחור: צמצם את הממדים למה שהתמונה מוצגת בו בפועל, ייצא כ-WebP או JPEG ולא כ-PNG עבור תמונות, ולאחר מכן הורד את האיכות ובדוק מחדש את גודל הפלט. פגיעה ביעד קשה כמו " מתחת ל-100 KB" הוא בדרך כלל שניים או שלושה מעברים של הלולאה הזו, לא אחד.
כיצד אוכל לשנות את גודל התמונה מבלי לחתוך אותה?
שמור על יחס הגובה-רוחב נעול כאשר הרוחב והגובה נשארים בפרופורציה המקורית שלהם, כל פיקסל של המסגרת נשמר ורק קנה המידה משתנה חיתוך הופך לבלתי נמנע רק כאשר צורת המטרה שונה מצורת המקור - התאמת תמונה של 3:2 לתוך חריץ אווטאר של 1:1 פירושו או תיבת מכתבים של החלל הריק או חיתוך חלק מהתמונה.
האם עלי לשנות את גודל התמונות שלי או לדחוס אותן תחילה?
שנה גודל תחילה, ולאחר מכן דחיסה הקטנת מידות מסירה פיקסלים על הסף - חציית הרוחב והגובה מבטלת 75% מהם - שזה כמעט תמיד ניצחון גדול יותר בגודל הקובץ מאשר דחיסה בלבד דחיסה לפני שינוי גודל מבזבזת מאמץ על פיקסלים שאתה עומד להשליך ויכולה לאפות חפצים לתוך אלה שאתה שומר.
מה ההבדל בין שינוי גודל לחיתוך?
שינוי גודל משנה את הממדים של התמונה כולה, שמירה על כל התוכן שלה חיתוך חותך חלק מהתמונה כדי לשנות את המסגור או יחס הגובה-רוחב שלה אם אתה צריך ריבוע מתמונה מלבנית, שינוי גודל עם יחס הגובה-רוחב נעול יתאים לתמונה בתוך הריבוע במקום למלא אותו - אתה צריך חיתוך כדי למלא את המסגרת.
האם יש מגבלת גודל קובץ לשינוי גודל תמונות בדפדפן?
אין מגבלה שהוטלה על ידי השרת, מכיוון ששום דבר לא מועלה - התקרה המעשית היא המכשיר שלך' זיכרון זמין. תמונות טיפוסיות, כולל קבצי מצלמה גדולים, משתנות באופן מיידי. תמונות גדולות במיוחד (סריקות ברזולוציה גבוהה מאוד, למשל) עשויות להימשך רגע או, בטלפון מוגבל בזיכרון, לא לטעון.
מדוע התמונה שלי עדיין נראית מטושטשת לאחר שינוי גודל למידות הנכונות?
בדוק שלושה דברים לפי הסדר: האם הגדלה ממקור קטן יותר (לא ניתן לתיקון - מצא מקור גדול יותר), האם התחשבת ביחס פיקסלים של המכשיר (קובץ של 600 פיקסלים במסך של 2× צריך להיות 1200 פיקסלים), והאם הפלטפורמה שהעלית לדחוס מחדש את התמונה לאחר מכן השלישית נפוצה במדיה החברתית ומומלץ למתן על ידי העלאה בפלטפורמה' מידות מומלצות.
