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