העלה תמונת נוף לפוסט באינסטגרם, תמונת טלפון גבוהה כתמונת קישור בלינקדאין, או צילום מסך ל-X, והפלטפורמה מחליטה בשקט איזה חלק ממנה אנשים רואים היא מתאימה את התמונה לאחת מכמה צורות קבועות וגזרות מה שלא מתאים, והיא גוזרת מהאמצע כלפי חוץ אם הנושא באמצע, זה עובד אם הנושא הוא פנים ליד החלק העליון של המסגרת, מוצר משמאל או כותרת לאורך התחתית, הפלטפורמה גוזלת אותו.
התיקון הוא לחתוך את התמונה בעצמך, לצורה המדויקת שהפיד רוצה, ולבחור איזה חלק שורד מדריך זה מכסה את הגדלים ויחסי הגובה-רוחב שהפלטפורמות העיקריות מציגות, הגיאומטריה של היבול, כיצד לבחור נקודת מוקד, מה חיתוך עושה לאיכות וגודל הקובץ, וכיצד להימנע מהתוצאה הרכה והגדולה שתופסת אנשים. הדוגמאות המעובדות משתמשות בחינם מדיה חברתית תמונה Cropper על Toolz, שעושה את כל העבודה בצד הלקוח.
TL;DR: כדי לחתוך תמונה עבור מדיה חברתית, בחר את יחס הגובה-רוחב היעד עבור הפלטפורמה והמיקום (לדוגמה 1080 x 1350 עבור פוסט דיוקן באינסטגרם, 1200 x 630 עבור תצוגה מקדימה של קישור, 1600 x 900 עבור תמונת פוסט X), קח את האזור הגדול ביותר של אותה צורה שמתאים לתמונה שלך, עגן אותה בחלק החשוב, ואז קנה מידה לגודל הפיקסל המדויק. תמונת טלפון בגודל 4032 x 3024 חתוכה ל-4:5 שומרת על 60% משטחה; חתוכה ל-16:9 היא שומרת על 75% חוטף תמונות במדיה חברתית עושה זאת על קנבס בדפדפן שלך עם רשת מוקד של תשע נקודות, בחינם, ללא הרשמה, ללא העלאה.
מה עושה קוצץ תמונות במדיה חברתית?
חותך תמונות במדיה חברתית חותך תמונה ליחס הגובה-רוחב שפלטפורמה מציגה ומשנה אותה לפלטפורמה זו ' גודל הפיקסלים, כך שלפלטפורמה לא נשאר מה לחתוך. שתי פעולות נפרדות קורות, וזה עוזר להפריד ביניהן:
- קרופ. בחר מלבן בתוך המקורי שיש לו את צורת המטרה פיקסלים מחוצה לו נזרקים פיקסלים בתוכו לא נגעו.
- סקאלה. שנה את גודל המלבן הזה לממדי היעד, כגון 1080 x 1350. זה המקום שבו האיכות יכולה להשתנות, מכיוון שהתמונה נדגמת מחדש.
עורך תמונות גנרי יכול לעשות את שניהם, אבל זה גורם לך למצוא את היחס, לצייר את התיבה ביד, ולזכור את גודל הפלט. cropper ייעודי מכיר את הגדלים, מצייר את התיבה החוקית הגדולה ביותר באופן אוטומטי, ומאפשר לך להזיז אותה בלחיצה אחת. גרסת Toolz גם אומרת לך מה עלות היבול לפני ההורדה: כמה מהשטח המקורי שורד והאם התוצאה הוקטנה או עלתה.
באילו גדלי תמונה משתמשות הפלטפורמות העיקריות?
כל רשת מציגה תמונות הזנה בסט קטן של יחסי גובה-רוחב, וכל דבר אחר מותאם לקרוב ביותר. הטבלה מפרטת את 15 גדלי היעד המובנים בחותך, המשקפים את מה שכל פלטפורמה מציגה כעת מבלי לחתוך מחדש. פלטפורמות משנות את אלה מעת לעת, אז התייחסו אליהן כהנחיה עדכנית ולא כמפרט קבוע.
| פלטפורמה | השמה | גודל פיקסל | יחס גובה-רוחב | איפה משתמשים בו |
|---|---|---|---|---|
| אינסטגרם | פוסט מרובע | 1080 x 1080 | 1:1 | פוסט הפיד הקלאסי |
| אינסטגרם | פוסט דיוקן | 1080 x 1350 | 4:5 | הגבוה ביותר שההזנה מאפשרת, רוב שטח המסך |
| אינסטגרם | פוסט נוף | 1080 x 566 | 1.91:1 | הרחב ביותר שהפיד מקבל |
| אינסטגרם | סיפור או סליל | 1080 x 1920 | 9:16 | מסך מלא; שמור על טקסט נקי מהחלק העליון והתחתון 250 פיקסלים |
| חוטים | פוסט מרובע | 1080 x 1080 | 1:1 | מוצג ללא גזירה בציר הזמן |
| חוטים | פוסט דיוקן | 1080 x 1350 | 4:5 | התילים הגבוהים ביותר מוצגים ללא חיתוך |
| בלוסקי | תמונת הזנה | 1200 x 630 | 1.90:1 | תמונות רחבות נמשכות לכיוון 1.91:1 |
| בלוסקי | תמונה מרובעת | 1080 x 1080 | 1:1 | מוצג ללא חתכים |
| X | תמונת פוסט | 1600 x 900 | 16:9 | מוצג במלואו ללא הקשה |
| X | כרטיס סיכום | 1200 x 628 | 1.91:1 | כרטיס תצוגה מקדימה של קישור גדול |
| פייסבוק | פוסט הזנה | 1200 x 630 | 1.90:1 | גם גודל Open Graph |
| לינקדאין | פוסט הזנה | 1200 x 627 | 1.91:1 | תקן הזנה של לינקדאין |
| Youtube | תמונה ממוזערת | 1280 x 720 | 16:9 | רוחב מינימום 1280 לנגן HD |
| פינטרסט | פין סטנדרטי | 1000 x 1500 | 2:3 | סיכות גבוהות יותר יורדות |
| Open Graph | תצוגה מקדימה של קישור | 1200 x 630 | 1.90:1 | כרטיס ברירת מחדל רוב האתרים ואפליקציות הצ'אט מעבדים |
שני דברים בולטים. ה-"1.91:1" משפחה (1200 x 630, 1200 x 628, 1200 x 627, 1080 x 566) היא צורה אחת עם עיגול מעט שונה, והיא הצורה של כמעט כל תצוגה מקדימה של קישור באינטרנט. זה חוזר ל- Open Graph פרוטוקול, המגדיר את og:image אתרי תגיות משתמשים כדי לספק תמונת תצוגה מקדימה. והפורמטים הגבוהים שונים: אינסטגרם ו-Threads עוצרים ב-4:5, פינטרסט עובר ל-2:3, ו-Stories משתמשים ב-9:16. יבול אחד לא משרת את כולם.
אם אתה גם מגדיר את תמונת התצוגה המקדימה עבור דף אינטרנט, ה כלי תצוגה מקדימה של Open Graph מראה כיצד התמונה בגודל 1200 x 630 תיראה לאחר שיתוף.
כיצד מחושב מלבן היבול?
היבול הוא המלבן הגדול ביותר של צורת המטרה שמתאים בתוך התמונה המקורית אם התמונה רחבה יותר מצורת המטרה היבול שומר על מלוא הגובה ומקצץ את הצדדים אם הוא גבוה יותר היבול שומר על מלוא הרוחב ומקצץ את החלק העליון והתחתון.
במספרים, עבור מקור רוחב W וגובה H ויחס יעד R (רוחב חלקי גובה):
if W / H > R: crop width = H x R, crop height = H (trim the sides)
else: crop width = W, crop height = W / R (trim top and bottom)
דוגמה מעובדת 1: תמונת טלפון בגודל 4032 x 3024 לפוסט דיוקן באינסטגרם.
- יחס מקור: 4032 / 3024 = 1.333. יחס יעד: 1080 / 1350 = 0.8.
- המקור רחב יותר, כך שהיבול שומר על גובה 3024 פיקסלים המלא.
- רוחב יבול: 3024 x 0.8 = 2419.2 פיקסלים.
- שטח שמור: 2419.2 / 4032 = 0.60, כך ש-60% מהתמונה שורדת ו-40% נחתכים מהצדדים.
- לאחר מכן, היבול מוגדל מכ-2419 x 3024 ל-1080 x 1350.
דוגמה מעובדת 2: אותה תמונה לתמונת פוסט X.
- יחס יעד: 1600 / 900 = 1.778. יחס המקור 1.333 קטן יותר, כך שהיבול שומר על רוחב 4032 פיקסלים המלא.
- גובה יבול: 4032 / 1.778 = 2268 פיקסלים.
- שטח שמור: 2268 / 3024 = 0.75, כך ש-75% שורדים, כאשר 756 פיקסלים גזוזים מהגובה.
דוגמה מעובדת 3: אותה תמונה לסיכת פינטרסט.
- יחס יעד: 1000 / 1500 = 0.667. רוחב יבול: 3024 x 0.667 = 2016 פיקסלים.
- שטח שמור: 2016 / 4032 = 50%. חצי מהתמונה הולכת.
אחוזים אלה הם מה הכלי מדווח כמו " שמירה על 60% של המקורי", והם שווים לקרוא לפני שאתה להתחייב יבול ששומר על חצי המסגרת היא החלטה הרכב, לא שלב עיצוב.
איך בוחרים איזה חלק מהתמונה לשמור?
בחר את נקודת המוקד שמחזיקה את הנושא, וזכור שזה משנה רק לאורך הציר הנחתך.The cropper's רשת תשע נקודות קובעת מוקד של 0, 0.5 או 1 על פני כל ציר, אשר מעגן את היבול לקצה השמאלי, למרכז או לקצה הימני אופקית, ולמעלה, לאמצע או למטה אנכית.
המיקום מעובד כך, ואז מהדק כך שהיבול לעולם לא יברח מהתמונה:
crop x = focusX x W - cropWidth / 2 (clamped between 0 and W - cropWidth)
crop y = focusY x H - cropHeight / 2 (clamped between 0 and H - cropHeight)
בדוגמה מעובדת 1, רק הצדדים נחתכים, כך שרק הבחירה האופקית משנה משהו:
| עמוד עוגן | יבול x | שמר טורים של התמונה |
|---|---|---|
| שמאל | 0 | 0 עד 2419 |
| מרכז | 806.4 | 806 עד 3226 |
| נכון | 1612.8 | 1613 עד 4032 |
השורות העליונות, האמצעיות והתחתונות נותנות תוצאות זהות עבור אותו יבול, מכיוון שהגובה המלא כבר נשמר. זוהי בדיקה שימושית כאשר נראה כי קליק לא עושה דבר: היבול חופשי לנוע רק בכיוון אחד.
דוגמה עובדת 4: תמונת טלפון דיוקן כתמונת לינקדאין. תמונה בגודל 3024 x 4032 חתוכה ל-1200 x 627 (יחס 1.914) שומרת על הרוחב המלא ורצועה בגובה 3024 / 1.914 = 1580 פיקסלים. כלומר 1580 / 4032 = 39% מהתמונה. עם העוגן המרכזי המוגדר כברירת מחדל, הרצועה עוברת מ-y = 1226 ל-y = 2806, שבדיוקן ראש וכתפיים טיפוסי הוא החזה, לא הפנים. לחיצה על מרכז עליון מזיזה את הרצועה ל-y = 0 עד 1580 ושומרת על הראש. מקרה זה הוא הסיבה לכך שרשת המוקד קיימת: ריכוז הוא ברירת מחדל סבירה והתשובה השגויה עבור רוב הדיוקנאות הופכת לכרזות.
כמה כללי אצבע לבחירת עוגן:
- אנשים: שורה עליונה, מכיוון שפנים בדרך כלל יושבות בשליש העליון של פריים.
- כותרות או כיתובים אפויים בגרפיקה: השורה או העמודה שבה יושב הטקסט.
- מוצרים ונושאים מחוץ למרכז: הפינה או הצד התואמים.
- סצנות סימטריות ולוגו ממורכז: השאירו אותו במרכז.
האם חיתוך יפחית את איכות התמונה?
חיתוך לבד אינו מפחית איכות, אבל שלב קנה המידה יכול. השלכת פיקסלים מחוץ למסגרת משאירה את הפיקסלים הנותרים בדיוק כפי שהיו. שינוי הגודל לגודל היעד הוא המקום שבו התוצאה יכולה להשתפר או להתדרדר.
ההקטנה בטוחה ולעיתים קרובות גורמת לתמונה להיראות חדה יותר, מכיוון שמספר פיקסלים מקור ממוצעים לכל פיקסל פלט. הקוצץ מצייר עם הקנבס ' הגדרת איכות החלקה גבוהה, באמצעות ה drawImage שיטה המוגדרת ב מפרט קנבס WHATWG HTML. הגדלה לא יכולה להוסיף פרטים שמעולם לא נלכדו הפלט נעשה גדול יותר אך לא חד יותר, והקצוות נראים רכים.
דוגמה מעובדת 5: צילום מסך מוגדל. צילום מסך בגודל 800 על 600 שנחתך עבור תמונת פוסט X שומר על רוחב 800 פיקסלים המלא ורצועה בגובה 450 פיקסלים, 75% מהשטח. אזור 800 על 450 זה מוגדל לאחר מכן ל-1600 על 900, פי שניים מגודלו לכל כיוון. הכלי אומר זאת תחת התצוגה המקדימה: " מוגדל - המקור קטן מהמטרה, כך שהוא ייראה רך."
הבדיקה המהירה היא להשוות את רוחב היבול לרוחב היעד אם היבול רחב יותר מהיעד התמונה מוקטנת ותיראה בסדר אם היא צרה יותר היא מוגדלת לתמונות כמעט תמיד יש למצלמת טלפון פיקסלים פנויים צילומי מסך תמונות ישנות ותמונות שנשמרו מפוסטים אחרים הם מקרי העלאת קנה המידה הרגילים והתיקון האמיתי היחיד הוא מקור גדול יותר.
האם לייצא PNG, JPEG או WebP?
ייצוא JPEG עבור תצלומים, PNG עבור צילומי מסך, טקסט וגרפיקה עם קצוות קשיחים, ו - WebP כאשר אתה רוצה את הקובץ הקטן ביותר ולדעת את היעד מקבל את זה.Cropper ברירת המחדל ל - PNG כי הוא ללא אובדן, ומציע את כל שלוש.
| פורמט | דחיסה | הטוב ביותר עבור | להיזהר מ |
|---|---|---|---|
| PNG | ללא הפסדים, כפי שצוין על ידי תקן W3C PNG | צילומי מסך, ממשק משתמש, טקסט, לוגו, שקיפות | קבצים גדולים לצילומים |
| JPEG | Lossy, השיטה ב ITU-T T.81 | צילומים | הילות סביב טקסט ושורות חדים; אין שקיפות |
| WebP | אובדן או אובדן, המתואר ב תיעוד WebP של Google's | הקבצים הקטנים ביותר באיכות דומה | כמה כלים ישנים יותר לא יכולים לפתוח אותו |
יצוא JPEG ו-WebP משתמש בהגדרת איכות של 0.92 על מקודד הקנבס, שהיא גבוהה מספיק כדי שקשה לראות חפצי דחיסה בתמונות. הקובץ שהורד נקרא על שם המקור בתוספת ההגדרה מראש, אז team.jpg נחתך לפוסט דיוקן באינסטגרם כמו ש-JPEG שומר כמו team-ig-portrait.jpeg.
רוב הפלטפורמות מקודדות מחדש את מה שאתה מעלה בכל מקרה, כך ש-PNG ללא הפסדים של תמונה לא שורד כ-PNG לאחר פרסום. זה בעיקר מוסיף גודל העלאה לבחירת פורמטים יותר לעומק, ה מדריך ממיר פורמט תמונה משווה אותם על פני מקרי שימוש נוספים.
שלב אחר שלב: חיתוך תמונה עם הכלי
ה חותך תמונות עבור מדיה חברתית יש ארבעה שלבים, וקנבס התצוגה המקדימה הוא אותו קנבס שמייצר את הקובץ, אז מה שאתה מאשר זה מה שאתה מוריד.
- הוסף את התמונה. זרוק קובץ, לחץ כדי לבחור אחד, או הדבק תמונה מהלוח עם Cmd+V או Ctrl+V. מאזין הדבק נמצא בכל העמוד, כך שצילום מסך שהועתק ללוח נכנס ישר פנימה מבלי להישמר קודם. אזור הירידה מקבל PNG, JPEG, WebP, GIF או AVIF, או כל דבר אחר שהדפדפן שלך יכול לפענח.
- בחר את גודל היעד. תפריט גודל היעד מקבץ את 15 ההגדרות המוגדרות מראש לפי פלטפורמה, כל אחת מסומנת בגודל הפיקסלים והיחס שלה, ומציג הערה בשורה אחת היכן נעשה שימוש בגודל. ברירת המחדל היא פוסט הדיוקן באינסטגרם.
- בחר מה לשמור. לחץ על אחת מתשע הנקודות ברשת Keep. התצוגה המקדימה מציירת מחדש מיד.
- תבדוק את המספרים ותוריד. תחת התצוגה המקדימה, קרא את השורה המציינת את האחוז השמור, את ממדי היבול והאם התוצאה מוקטנת או מוגדלת. בחר PNG, JPEG או WebP ולחץ על הורד.
הכל פועל על קנבס HTML בכרטיסייה דפדפן התמונה אינה מועלית, מאוחסנת או רשומה, והדף ממשיך לעבוד עם הרשת כבוי כמו כל כלי באתר, שלב ההורדה בודק מגבלת שימוש יומית.
באילו שגיאות אתה יכול להיתקל?
רוב הבעיות מגיעות מפורמט הקובץ או מגודל המקור ההודעות הן ספציפיות.
- " הקובץ הזה אינו תמונה." הקובץ's סוג לא מתחיל ב
image/, למשל PDF או סרטון. ההודעה נותנת שם לקובץ. - " לא ניתן היה לקרוא את התמונה הזו. זה עלול להיות פגום או בפורמט שהדפדפן הזה לא מפענח." הקובץ טוען שהוא תמונה אבל הדפדפן לא יכול לפענח אותה המקרה הנפוץ הוא צילום אייפון HEIC בדפדפן ללא תמיכה ב-HEIC המר אותו ל-JPG תחילה עם ה ממיר פורמט תמונה.
- " מוגדל - המקור קטן יותר מהמטרה, ולכן הוא ייראה רך." לא שגיאה, אזהרה השתמש במקור גדול יותר אם יש לך.
- נראה שרשת המוקד לא עושה כלום. היבול נחתך רק לאורך ציר אחד, כך שרק העוגנים לאורך הציר מזיזים אותו.
- הגבלה יומית הגיעה. נעשה שימוש בקצבת השימוש היומית בחינם.
עוד אפקט אחד שווה לדעת בגלל הפלט מקודד מחדש מפיקסלים קנבס, הקובץ שהורד אינו נושא מטא נתונים EXIF: אין הגדרות מצלמה, תאריך לכידת או מיקום GPS עבור תמונות שפורסמו בפומבי כי הוא בדרך כלל רווח פרטיות. ה מדריך מסיר EXIF מסביר מה המטא נתונים האלה מכילים ומדוע זה חשוב בעת שיתוף תמונות.
לחתוך, לשנות גודל או להתאים על רקע?
חיתוך הוא אחת משלוש דרכים להכניס תמונה לצורה קבועה, והנכונה תלויה בשאלה אם אתה יכול להרשות לעצמך לאבד כל אחת מהתמונה.
| גישה | מה קורה | מתי להשתמש בו | כלי |
|---|---|---|---|
| יבול ליחס | חותך את הקצוות, שומר על הצורה מדויקת | הנושא הוא חלק מהמסגרת והקצוות יכולים ללכת | מדיה חברתית תמונה Cropper |
| להתאים למט | מכווץ את כל התמונה על רקע צבעוני או מטושטש | אסור לחתוך שום דבר, כגון יצירות אמנות או תמונה קבוצתית | מחולל מט |
| שנה גודל בלבד | משנה את מידות הפיקסלים, שומר על היחס המקורי | היחס כבר נכון, או שהפלטפורמה מקבלת כל צורה | שינוי גודל תמונה |
| התפצלו לשקופיות | חותך תמונה רחבה לשקופיות קרוסלה עוקבות | פנורמה רחבה מדי לפוסט אחד | מחולל גלילות קרוסלה |
אם הבעיה היא גודל הקובץ ולא הצורה, ה מדריך לשינוי גודל תמונה מכסה שינוי ממדים ללא עיוות כאשר תמונה חתוכה יוצאת בפומבי וצריכה לשאת את שמך, ה ווטרמרקר מוסיף לוגו או חתימה בפינה או אריחים על פני המסגרת. הסט המלא של כלי תמונה לפרסום חי ב רכזת כלי מדיה חברתית.
למה לחתוך לפני שמעלים בכלל?
כי יבול הפלטפורמה נקבע על ידי תוכנה שאינה יכולה לראות את הנושא שלך כל עדכון מעבד ביחסים קבועים, והעלאה בכל צורה אחרת מותאמת אוטומטית, בדרך כלל על ידי חיתוך שווה משני צידי הממד הארוך. כמה פלטפורמות, Bluesky ביניהן, מיישמות את היבול הזה רק בתצוגה בציר הזמן, כך שהתמונה המלאה קיימת אבל רוב האנשים אף פעם לא רואים אותה.
חיתוך קודם מעביר שלוש החלטות בחזרה אליך: איזה חלק של המסגרת נראה, כמה חדה התוצאה בגודל התצוגה המדויק, וכמה גדול הקובץ. זה לוקח כמה שניות לכל תמונה, וזה הכי חשוב בדיוק לתמונות שאכפת לאנשים מהן: פורטרטים, צילומי מוצר וגרפיקה עם טקסט ליד קצה. בשביל אלה, חותכים את התמונה לגודל הפלטפורמה עם המוקד בנושא, חינם, ללא הרשמה, ולהעלות קובץ לפיד אין סיבה לשנות.
