PNLdev
Tutorial
Front-end
HTML
reference
CSS
reference
JavaScript
reference
En
English
فارسی
En
English
فارسی
Tutorial
Front-end
HTML
reference
CSS
reference
JavaScript
reference
Run
<!DOCTYPE html> <html> <head> <style> .image { height: 150px; width: 150px; image-rendering: auto; } .crisp-edges { image-rendering: -webkit-optimize-contrast; /* Chrome, Edge, Opera, and Safari */ image-rendering: crisp-edges; } .pixelated { image-rendering: pixelated; } .smooth { image-rendering: smooth; } .high-quality { image-rendering: high-quality; } </style> </head> <body> <h1>image-rendering property example</h1> <p>image-rendering: auto;</p> <img class="image" src="/pic.jpg" alt="nature" width="50" height="50"> <p>image-rendering: crisp-edges;</p> <img class="image crisp-edges" src="/pic.jpg" alt="nature" width="50" height="50"> <p>image-rendering: pixelated;</p> <img class="image pixelated" src="/pic.jpg" alt="nature" width="50" height="50"> <p>image-rendering: smooth;</p> <img class="image smooth" src="/pic.jpg" alt="nature" width="50" height="50"> <p>image-rendering: high-quality;</p> <img class="image high-quality" src="/pic.jpg" alt="nature" width="50" height="50"> <p>Original image: <img src="/pic.jpg" alt="nature" width="50" height="50"></p> </body> </html>
