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