כמפתחי אתרים, אנחנו עובדים עם תמונות כל הזמן, וברוב המקרים הדפדפנים מצליחים להתאים את התמונות למגבלות של עיצוב האתר בלי לפגוע באיכות שלהן. אבל מה קורה כשרוצים לקבוע איך הדפדפן יתאים את הגודל של התמונות בדף?
ב-Chrome 41 (גרסת בטא בינואר 2015) נוסף מאפיין CSS חדש, image-rendering: pixelated (מפרט), שמאפשר לכם לשלוט קצת יותר באופן שבו הדפדפן מרינדר תמונה מוגדלת.
מאפיין ה-CSS image-rendering והערך pixelated מעניינים כי הם משביתים את השינוי החלק הרגיל של הגודל בדפדפן (בדרך כלל אינטרפולציה לינארית דו-כיוונית) ומחליפים אותו באלגוריתם אחר של שינוי גודל (בדרך כלל 'שכנה קרובה ביותר') כשמשנים את הגודל של התמונות.
נניח שיש לכם תמונה בגודל 2×2 פיקסלים ואתם מגדילים אותה ל-100×100 פיקסלים. הדפדפן ירנדר אותה בצורה שלא תיצור מראה מרובע. משהו כזה:
יש מקרים רבים שבהם לא תרצו להשתמש בהתנהגות הזו של החלקה, ובמקום זאת תוכלו להשתמש בשיטה שמשמרת ייצוג מדויק יותר של התמונה.
כדי לקבל את האפקט הזה, פשוט מחילים את הפונקציה image-rendering: pixelated; על התמונה באופן הבא.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
לנסות את ההדגמה. כפי שאפשר לראות, לאופן שבו הנכס מיושם יש השפעה משמעותית על אופן העיבוד של התמונה.
אפשר להחיל את המאפיין הזה במקומות רבים:
<img>מרכיבים<canvas style="image-rendering: pixelated">מרכיבים- כל רכיב עם מאפיין
background-image
עדיין לא הבנתי. איפה כדאי להשתמש בזה?
אם אתם מציגים רק תמונות באתר, סביר להניח שאתם לא רוצים לעשות זאת.
דוגמה מצוינת לשימוש היא משחקים. לעיתים קרובות צריך להגדיל את הלוח כדי שיתאימו לגודל המסך בצורה נכונה. לפני הנכס הזה ב-CSS, הדפדפן היה מבצע אינטרפולציה של הלוח כך שייראה מטושטש (ראו בהמשך [sic]).
אם אתם מפתחים כלי למכירת כרטיסי טיסה או אפליקציה שמוצגים בה קודי QR, בדרך כלל המשתמש ירצה שהיא תוצג במסך מלא כדי שיהיה קל יותר לסרוק אותה. לכן, חשוב מאוד לשלוט ברינדור התמונה.
אם רוצים לראות את ההטמעה, אפשר לעיין בבעיה 317991 (היא נשארת פתוחה עד להטמעה של הערך crisp-edges). מומלץ לסמן את הבעיה בכוכב כדי לעקוב אחרי ההטמעה).