כמפתחי אתרים, אנחנו כל הזמן עובדים עם תמונות, וברוב המקרים הדפדפנים מצליחים לשנות את הגודל של התמונות כך שיתאימו לגבולות העיצוב של האתרים שלנו, בלי לפגוע באיכות שלהן. אבל מה קורה כשרוצים לקבוע איך הדפדפן יתאים את הגודל של התמונות בדף?
ב-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). אפשר לסמן את הבעיה בכוכב כדי לעקוב אחרי ההטמעה).