כמפתחי אתרים, אנחנו כל הזמן עובדים עם תמונות, וברוב המקרים הדפדפנים מצליחים לשנות את הגודל של התמונות כך שיתאים לגבולות העיצוב של האתרים שלנו, בלי לפגוע באיכות שלהן. אבל מה קורה כשאתם רוצים לשלוט באופן שבו הדפדפן משנה את גודל התמונות בדף?
Chrome 41 (גרסת בטא בינואר 2015) כולל מאפיין CSS חדש image-rendering: pixelated (מפרט) שנותן לכם יותר שליטה באופן שבו הדפדפן מעבד תמונה מוגדלת.
מאפיין ה-CSS image-rendering והערך pixelated מעניינים כי הם משביתים את ההתאמה לעומס (scaling) הרגיל של הדפדפן (אינטרפולציה דו-לינארית בדרך כלל) ומחליפים אותו באלגוריתם אחר להתאמה לעומס (scaling) שברוב המקרים, כשמשנים את הגודל של התמונות.
נניח שיש לכם תמונה בגודל 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). מומלץ לסמן את הבעיה בכוכב כדי לעקוב אחרי ההטמעה).