גודל תמונות שניתן להנחות: 13 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:16

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

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

לאחר מכן הציעו כי "אפשרות נוספת שעשויה לפעול היא אם תעלה תמונות שהן ביחס גובה -רוחב מסורתי יותר. כל דבר שבין 16: 9 ל -4: 3 אמור להציג יפה מאוד".

שימו לב שהם אומרים שזה "עשוי" לעבוד. הנה מה שמצאתי במאבקי כדי להציג את התמונות שלי בצורה הגונה. (שים לב שאני משתמש בתמונות מהקוביה שלי "הקוביה של רוביק קל", ומכאן כל תמונות הקובייה האלה!)

התמונה למעלה היא גודלה המקורי (600x195) שאינו נמצא בטווח זה של יחסי גובה -רוחב מסורתיים. כפי שאתה יכול לראות, Instructables מציג את התמונה הזו מוגדלת מדי מדי כשהצד השמאלי והימני מנותק. בואו נראה מה אנחנו יכולים לעשות כדי שהתמונה הזו תוצג כראוי.

שלב 1: ננסה יחס גובה -רוחב 16: 9

אז בואו ננסה את יחס הגובה -רוחב 16: 9 (רוחב: גובה). אני אשמור על הרוחב המקורי של 600 פיקסלים, 16: 9 פירושו שהגובה צריך להיות 338 פיקסלים אז נכין גודל קנבס של 600x338 ונטיל את התמונה 600x195 לתוכו.

אז בואו נראה איך התמונה הזו של 600x338 (16: 9) נראית. כל כך מעניין, כששמטתי את התמונה הזו והצגתי אותה בתצוגה מקדימה, היא התאימה בצורה מושלמת - הקצוות השמאליים והימניים לא נותקו! צילמתי את זה רק להוכחה, ראו את זה בשקופית הבאה.

אבל כשאני רואה את זה בדפדפן שלי (כרום) מה שאני רואה בתמונה למעלה, זה שהצד הימני והשמאלי שוב נחתכים! אז מהניסוי הזה נראה שהשינוי בגודל 16: 9 לא יפתור לנו את הבעיות!

הערה צדדית, 16: 9 הוא יחס הגובה -רוחב הנפוץ "החדש" המכונה "מסך רחב" ואילו 4: 3 הוא "מסך מלא" של בית הספר הישן שהיה מקובל בימי הטלוויזיה בצינורות. כן, כנראה שלמילניאל אין לך מושג על מה אני מדבר.

שלב 2: 16: 9 תמונה שהועלתה טרי כפי שנראתה בתצוגה מקדימה

תמונה זו היא צילום המסך המראה שהתמונה שלנו 16: 9 נראית מושלמת בתצוגה המקדימה. הצלחה נכון? ובכן, לא כל כך מהר - ראו מה קורה כאשר אנו צופים בדף זה בפועל בדפדפן שלנו (כרום)! הקצוות השמאליים והימניים נקטעים שוב! פשוט תחזור לתת לשקופית הקודמת ותראה בעצמך.

הלקח נלמד - אל תסמוך על התצוגה המקדימה! מה שנראה בסדר בתצוגה המקדימה יוצג אחרת בצפייה בפועל עם דפדפן!

כמו כן, כן, יש הרבה שטח לבן מתחת לתמונה שלי. זה בגלל שהורדתי תמונה בגודל 600x195 לתוך קנבס 600x338 ושמתי אותה למעלה, כך שיש את כל החלל הלבן הריק בתחתית. מה אנחנו יכולים לעשות בקשר לזה? ובכן … ננסה להתייחס לזה בשקופית מאוחרת יותר.

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

שלב 3: 16: 9 מוצג עם צידי L&R מנותקים

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

אם אתה רואה את התמונה שלי שלב 1 מוצגת בצורה מושלמת, טוב, מעולה. תיידע אותי! אבל ככה אני רואה את זה. כן, זה הרבה יותר טוב מהתמונה המקורית מדף השער, אבל זה עדיין מנותק. אז מבחינתי, למרות עצת צוות Instructables, יחס גובה -רוחב 16: 9 לא ממש חותך אותו. בואו נעבור ליחס גובה -רוחב של 4: 3.

שלב 4: בוא ננסה יחס גובה -רוחב 4: 3

אז בואו ננסה את יחס הגובה -רוחב של 4: 3. אני אשמור על הרוחב המקורי של 600 פיקסלים, 4: 3 פירושו שהגובה צריך להיות 450 פיקסלים אז נכין גודל קנבס של 600x450 ונטיל את התמונה 600x195 לתוכו.

איך נראית התמונה הזו 600x450 (יחס גובה -רוחב 4: 3)?

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

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

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

שלב 5: 4: 3 כאשר התמונה ממוקדת

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

שלב 6: 4: 3 עם התמונה בתחתית

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

• נראה כי 4: 3 הוא יחס הגובה -רוחב שבו אתה צריך להשתמש כדי שהתמונות יוצגו בשלמותן ב- Instructables.
• אל תסמוך על התצוגה המקדימה - היא עשויה להציג את התמונה שלך בצורה מושלמת, אך חלקים עלולים להיחתך בדפדפן בפועל

שלב 7: מהו הרוחב המינימלי?

עכשיו בוא נראה מה הרוחב המינימלי צריך להיות. התמונה המוצגת היא בגודל 382x206, קרוב ל -2: 1, היא נראית ממש ענקית לא? ברור ש- Instructables הגדיל את התמונה כך שיתאים לרוחב מוגדר כלשהו, כנראה 640 פיקסלים, אני לא בטוח.

אבל הוא אכן מתאים מכיוון שהוא יותר "מרובע" - כלומר, הוא אינו רחב מדי לגובהו. הו, רגע, התערוכה המקדימה הזו שוב התבלבלתי! זה בעצם לא מתאים - צדדי ה- R&L נקטעים שוב.

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

אז בואו ננסה להקטין את התמונה. נצמצם את התמונה ל -200x108, ונשמור על יחס גובה -רוחב של 2: 1.

שלב 8: כיווץ התמונה אך שמירה על יחס הגובה -רוחב

אז אני משנה את התמונה ל 200x108, ושומר על אותו יחס גובה -רוחב 2: 1.

עכשיו שוב נראה שזה מתאים בהתחלה (עם הרזולוציה (איכות התמונה) מאוד הידרדר!) אבל כמובן שאתה כנראה מסתכל על זה וזה לא מתאים בכלל, ונראה בדיוק כמו התמונה המקורית למעט המקור שיש רזולוציה טובה יותר. שוב, Instructables מרחיב את התמונה כך שהיא תתאים לרוחב מוגדר כלשהו ולכן זו התמונה הקטנה יותר (200x108) שנראית כל כך נוראית, הרבה יותר גרועה מאשר 382x206 המקורית.

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

שלב 9: הוכחה שהתמונות מעבירות כראוי בהתחלה

הנה מה שראיתי בהתחלה מיד לאחר העלאת התמונה - היא מתאימה! (שים לב שהייתי צריך להתאים את צילום המסך שלמעלה לתמונה בגודל 1600x1200 (כלומר, יחס 4: 3) כדי לגרום ל- Instructables להציג את כל צילום המסך!)

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

שלב 10: ניסיון 382x287 (יחס 4: 3)

שמרתי על הרוחב 382 ושמטתי את התמונה 382x206 המקורית לתוך קנבס 382x287 כדי להפוך אותה ליחס גובה -רוחב של 4: 3 מכיוון שגילינו בעבר ש- Instructable זקוק לתמונה שתתאים ליחס 4: 3 כדי להציג אותה בשלמותה.

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

שלב 11: הרחבת התמונה מ 300x206 ל- 600x206 כדי לראות אם היא מופיעה טוב יותר

שמטתי את התמונה המקורית 382x206 (2: 1) לתוך קנבס 600x206 (3: 1) רק כדי לראות אם הרחבתה ל -600 פיקסלים תגרום ל- Instructables להציג את התמונה כולה. שוב, בהתחלה זה קרה, אבל כפי שאתה יכול לראות זה לא קורה עכשיו.

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

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

למה או איך זה קורה? אין לי מושג. אין לי מושג מדוע המתנה של פרק זמן כלשהו לאחר העלאת תמונה תגרום ל- Instructables לעבד אותה אחרת, אך היא כן. כהוכחה, אראה את צילום המסך שלי של התמונה שלעיל מוצג בצורה מושלמת ב- oh הראשון, 10-15 דקות לאחר שהעליתי אותו בשקופית הבאה.

שלב 12: הוכחה שהתמונות מוצגות כראוי בהתחלה לאחר ההעלאה

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

שים לב שצילום המסך שלי היה למעשה בגודל 1563x766 אבל כפי שלמדתי מהניסויים שלי בתחילת המדריך הזה, ידעתי מכיוון שהוא לא מתאים ליחס גובה -רוחב 4: 3 (1563x766 הוא בערך 4: 2) אז אם הייתי בדיוק העלה את צילום המסך בגודלו המקורי Instructable יחתוך את הקצוות. אז שמטתי את התמונה הזו לתוך קנבס 4: 3 אז בגלל זה יש הרבה שטח לבן ריק מתחת לצילום המסך שלי.

שים לב שצילום מסך צולם גם לפני ששיניתי את הכותרת של שלב 11 וסיימתי להקליד את כל הטקסט הזה למקרה שאתה תוהה לגבי זה!

לקח - צפייה בתמונה שהעלית בדפדפן מיד לאחר העלאת התמונה לא בהכרח תראה כיצד היא תוצג בעתיד. מכל סיבה שהיא, נראה כי כמעט כל גודל ו/או תמונת יחס גובה-רוחב מוצגת יפה מיד לאחר ההעלאה, ואף במשך כ-10-15 דקות לאחר ההעלאה ואפילו לאחר היציאה מ- Instructables וצפייה בה טרייה מהפעלה חדשה בדפדפן וכו '..

אבל חכה כשעה או יותר, והדברים משתנים! התמונה שלך, אם היא לא מתאימה ליחס הגובה -רוחב של 4: 3, תותאם (בדרך כלל מוגדלת) על -ידי Instructable כך שהקצוות ייחתכו.

שלב 13: השורה התחתונה - מה שלמדתי

אז בשורה התחתונה - מה למדתי?

1. כדי להציג תמונה במלואה, שמירה על יחס גובה -רוחב של 4: 3 (רוחב: גובה) היא חובה!

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

3. אם התמונה שלך קטנה מדי (רוחב הרבה פחות מ- 600 פיקסלים) Instructable ירחיב את התמונה שלך ויהפוך אותה לרוחב לפחות 600ish ובכך תהפוך אותה לחדה פחות. אני אומר "ish" כי אני לא באמת יודע באיזה רוחב הוראה משתמשת אבל זה נראה קרוב ל 600. זה כנראה 640, שהיה רוחב נפוץ עוד בימי צג הצינורות הישנים של בית הספר.

600x450 ו- 640x480 הם יחסי גובה -רוחב של 4: 3. כל מסכי הצינור "מסך מלא" של בית הספר הישן היו בגודל 640x480 (רוחב x גובה).

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

למיטב ידיעתי, זוהי הפשרה שתצטרך לעשות ב- Instructables כך שהתמונות שלך יוצגו בשלמותן.

כדוגמה, התמונה לעיל היא בגודל בד 600x450 עם תמונה 382x206 שנפלה לתוכה ובמרכזה כך שיהיה לנו שטח לבן ריק שווה מעל ומתחת. התמונה מוצגת בערך בגודלה המקורי, אני חושב ש- Instructables עשוי להרחיב אותה ל- 640x480 (הרחבה זניחה) כך שזה בערך הטוב ביותר שנוכל לעשות עם התמונה המקורית.

5. אל תסמוך על התצוגה המקדימה או אל תבטח במראה התמונה שלך במשך השעות הראשונות לאחר העלאתן ל- Instructable! מכל סיבה שהיא, גודל התמונות לא נראה עקבי עד כמה שעות לאחר העלאתן.

בכל פעם, כשאתה זורק תמונה לראשונה, נראה ש- Instructables יציגו את התמונה בצורה נכונה, לא משנה מה הגודל או יחס הגובה -רוחב של אותה תמונה. הוא עשוי אפילו להישאר מוצג בצורה נכונה למשך פרק זמן אחר כך, אך אל תתבאס כי בסופו של דבר הוא ישנה את גודלם וייתן לך בעיות אלא אם תעקוב אחר חוק 4: 3!

מקווה שזה עוזר ובבקשה, אם אתה מוצא דרך טובה יותר או שיש לך רמזים אחרים, הודע לי!