בעיה ברזלוצית תצוגת תמונה באתר

[רחל חסיד]

1. האם תבנית שאינה תומכת ב-high reselusion זו בעיה?
(פתאום בבדיקה חוזרת של התבנית ב-themeforest גיליתי שאינה תומכת ברזלוציה גבוהה)
2. האם בגלל זה תמונות נראות מפוקסלות ומטושטשות?
(הן למעשה במקור וקטור של צבע חלק + כיתוב) עלי להדגיש שהבעיה אינה בגודל התמונות. נסיון שמירה בגדלים שונים לא עזר.
3. מה הפתרון אחרי בניית חלק משמעותי באתר?
האם צריך לחפש תבנית אחרת, דומה? (הלקוח אישר את המבנה)

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

 

[שמואל גרינשטיין]

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

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

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


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

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


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

 

[תמנתי ווב דיזיין]

תודה שמואל על ההסבר המפורט. תהיתי באמת למה הכוונה.

 

[נוכחות לעסקים]

מצטרף לקודמי תודה לשמואל על הסבר מפורט
ישבתי היום על theme forest לחקור קצת את הנושא וראיתי שיש תבניות שנמכורתות יותר מ10,000 פעמים והם לא תומכים ב high resolution וניסתי לחפש מידע על זה באתר או ביוצרי תבניות ולא מצאתי

עכשיו אחרי הסבר של שמואל זה מובן

 

[Shia]

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

למיטב הבנתי, התכונה High Resolution מתייחסת למה שמכונה בפי אחרים "Retina Ready" - הווי אומר - התאמה למסכים שצפיפותם גבוהה יותר, כגון מסכים של סמארטפונים וטאבלטים חדישים. במסכים אלה, צפיפות הפיקסלים גבוהה מאוד ונעה לפעמים בסביבות 400 פיקסל/אינץ'. במסכים אלה, ניתן להגיע לחדות גבוהה יותר, ותמונות ברזולוציה "רגילה", עלולות להיראות לא חדות.

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

לקריאה נוספת:

http://designmodo.com/responsive-retina-images/

http://www.presscoders.com/2012/10/how-to-make-your-wordpress-theme-retina-ready/

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

http://www.mrgeek.me/technology/tut...ina-ready-graphics-in-photoshop-cs6-tutorial/

 

[שמואל גרינשטיין]

שייע, אני שמח להיות ידידך, ושמח עוד יותר ללמוד ממך.

תודה.


נ.ב.
בכל מקרה הבעיה שלה לא נובעת מזה, אלא מהגדרות חיתוך התמונה (מוקטנת) ככל הנראה...


ועוד נ.ב. אחד,
לגבי ה-Retina יש לי כמה שאלות על הדבר הזה, אבל זה כבר עניין לאשכול נפרד. אולי אפתח, אבל רק מחר בבוקר.

 

[תמנתי ווב דיזיין]

תודה על ההסברים לשניכם.

 

[רחל חסיד]

בעזרתו האדיבה של שמואל גרינשטיין, הגענו למקור הבעיה.
התמונות המוצגות באיזור זה הן מוצרים. השליטה עליהם היא דרך woocommerce.
הבעיה היתה שבגודל תמונת קטלוג לא הוגדר גודל נכון, אלא קטן.
יש ללכת ל-woocommerce > הגדרות > מוצרים (בכותרת) והגדיר גודל תמונת קטלוג בהתאם לגודל הנכון.