CSS Imagerendering Property

The image-rendering property sets an image scaling algorithm.

By default, each browser will apply to aliasing to the scaled image to prevent distortion, but a problem can arise if you want to keep the original pixelated form of the image.

Sometimes, you can combine the crisp-edges a pixelated values of the image-rendering property, for providing them some fallback for each other.

Initial Value auto Applies to All elements. Inherited Yes. Animatable Discrete. Version CSS3 DOM Syntax object.style.imageRendering = “pixelated”; Syntax
image-rendering: auto | crisp-edges | pixelated | initial | inherit;

Example of the image-rendering property:
html>


Title of the documenttitle></p> <style> .pixelated { image-rendering: pixelated; } .resize { width: 45%; clear: none; float: left; } .resize:last-of-type { float: right; } .resize img { width: 100%; } img { margin-bottom: 20px; width: 100%; } .original img { width: 20%; } body { background-color: #ccc; padding: 20px; }<br /> style><br /> head><br /> <body></p> <h2>Image-rendering property exampleh2></p> <div class="original"> <p>Original image size:p> <img decoding="async" src="/uploads/media/default/0001/02/ df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" /><br /> div></p> <div class="resize"> <p><code>image-rendering: autocode>p> <img decoding="async" src="/uploads/media/default/0001/02/ df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" /><br /> div></p> <div class="resize"> <p><code>image-rendering: pixelatedcode>p> <img decoding="async" class="pixelated" src="/uploads/media/default/0001/02/ df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" /><br /> div><br /> body><br /> html> Result<br /> Values<br /> Value Description auto A standard algorithm maximizing the appearance of an image. This is the default value of this property. crisp-edges The values of the image is preserved without smoothing or blurring. pixelated The browser preserves its pixelated style by using nearest-neighbour scaling. initial Makes the property use its default value. inherit Inherits the property from its parents element.</p> </div> </div> </article> </div><!-- #content --> <ul class="default-wp-page clearfix"> <li class="previous"><a href="https://www.javasuperstore.com/daftar-hp-oppo-yang-ada-infrared/" rel="prev"><span class="meta-nav">←</span> Daftar Hp Oppo Yang Ada Infrared</a></li> <li class="next"><a href="https://www.javasuperstore.com/dua-gerai-sicepat-di-kelapa-dua-tangerang-tutup-ada-apa-dengan-sicepat/" rel="next">Dua Gerai SiCepat Di Kelapa Dua Tangerang Tutup Ada Apa Dengan SiCepat <span class="meta-nav">→</span></a></li> </ul> </div><!-- #primary --> <div id="secondary"> <aside id="block-2" class="widget widget_block widget_search clearfix"><form role="search" method="get" action="https://www.javasuperstore.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search"><label for="wp-block-search__input-1" class="wp-block-search__label" >Cari</label><div class="wp-block-search__inside-wrapper " ><input type="search" id="wp-block-search__input-1" class="wp-block-search__input wp-block-search__input" name="s" value="" placeholder="" required /><button type="submit" class="wp-block-search__button wp-element-button" >Cari</button></div></form></aside><aside id="block-3" class="widget widget_block clearfix"> <div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container"> <h2>Recent Posts</h2> <ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://www.javasuperstore.com/membangun-kebiasaan-membaca-kunci-menuju-pemahaman-luas-dan-kreativitas-tak-terbatas/">Membangun Kebiasaan Membaca: Kunci Menuju Pemahaman Luas dan Kreativitas Tak Terbatas</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://www.javasuperstore.com/xiaomi-12s-price-in-malaysia-specs/">Xiaomi 12S Price In Malaysia Specs</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://www.javasuperstore.com/x8-speeder-download-apk-update-terbaru-untuk-2022/">X8 Speeder Download Apk Update Terbaru Untuk 2022</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://www.javasuperstore.com/x8-speeder-apk-download-x8-speeder-domino-terbaru-2022/">X8 Speeder Apk Download X8 Speeder Domino Terbaru 2022</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://www.javasuperstore.com/your-trusted-and-actual-news-channel-internet-explorer-channel-network/">Your Trusted And Actual News Channel Internet Explorer Channel Network</a></li> </ul></div></div> </aside><aside id="block-4" class="widget widget_block clearfix"> <div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container"> <h2>Recent Comments</h2> <div class="no-comments wp-block-latest-comments">Tidak ada komentar untuk ditampilkan.</div></div></div> </aside><aside id="block-7" class="widget widget_block clearfix"> <h2 class="has-x-large-font-size">Untung99 Group</h2> </aside><aside id="block-9" class="widget widget_block clearfix"> <hr class="wp-block-separator has-text-color has-black-color has-alpha-channel-opacity has-black-background-color has-background is-style-wide"/> </aside><aside id="block-10" class="widget widget_block widget_media_image clearfix"> <figure class="wp-block-image size-large"><a href="https://untung99.net/"><img decoding="async" loading="lazy" width="1024" height="250" src="https://www.javasuperstore.com/wp-content/uploads/2022/11/LOGO-8-1-1024x250.png" alt="Untung99" class="wp-image-2612" srcset="https://www.javasuperstore.com/wp-content/uploads/2022/11/LOGO-8-1-1024x250.png 1024w, https://www.javasuperstore.com/wp-content/uploads/2022/11/LOGO-8-1-300x73.png 300w, https://www.javasuperstore.com/wp-content/uploads/2022/11/LOGO-8-1-768x188.png 768w, https://www.javasuperstore.com/wp-content/uploads/2022/11/LOGO-8-1-1536x376.png 1536w, https://www.javasuperstore.com/wp-content/uploads/2022/11/LOGO-8-1.png 1795w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure> </aside><aside id="block-11" class="widget widget_block clearfix"> <hr class="wp-block-separator has-text-color has-black-color has-alpha-channel-opacity has-black-background-color has-background is-style-wide"/> </aside><aside id="block-13" class="widget widget_block clearfix"> <hr class="wp-block-separator has-text-color has-black-color has-alpha-channel-opacity has-black-background-color has-background is-style-wide"/> </aside><aside id="block-35" class="widget widget_block widget_text clearfix"> <p><strong><a href="https://holochaincitizen.com/" data-type="URL" data-id="https://holochaincitizen.com/">holochaincitizen.com</a></strong></p> </aside><aside id="block-37" class="widget widget_block widget_text clearfix"> <p><strong><a href="https://semar99.com/" data-type="URL" data-id="https://semar99.com/">semar99</a></strong></p> </aside><aside id="block-39" class="widget widget_block widget_text clearfix"> <p><strong><a href="https://www.treesforfree.org/" data-type="URL" data-id="https://www.treesforfree.org/">rtp live</a></strong></p> </aside><aside id="block-41" class="widget widget_block widget_text clearfix"> <p><a href="https://semar99.net/" data-type="URL" data-id="https://semar99.net/">semar99</a></p> </aside><aside id="block-45" class="widget widget_block widget_text clearfix"> <p><a href="https://www.anothersunnyday.net/">https://www.anothersunnyday.net/</a></p> </aside> </div> </div><!-- .inner-wrap --> </div><!-- #main --> <footer id="colophon" class="clearfix "> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-section"> <div class="copyright">Hak Cipta © 2024 <a href="https://www.javasuperstore.com/" title="Cara Menang Main Slot Pragmatic Olympus Bet Receh" ><span>Cara Menang Main Slot Pragmatic Olympus Bet Receh</span></a>. Keseluruhan Hak Cipta.<br>Tema: <a href="https://themegrill.com/themes/colormag" target="_blank" title="ColorMag" rel="nofollow"><span>ColorMag</span></a> oleh ThemeGrill. Dipersembahkan oleh <a href="https://wordpress.org" target="_blank" title="WordPress" rel="nofollow"><span>WordPress</span></a>.</div> </div> </div><!-- .footer-socket-area --> </div><!-- .inner-wrap --> </div><!-- .footer-socket-wrapper --> </footer><!-- #colophon --> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div><!-- #page --> <script type='text/javascript' src='https://www.javasuperstore.com/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=2.1.5' id='colormag-bxslider-js'></script> <script type='text/javascript' src='https://www.javasuperstore.com/wp-content/themes/colormag/js/navigation.min.js?ver=2.1.5' id='colormag-navigation-js'></script> <script type='text/javascript' src='https://www.javasuperstore.com/wp-content/themes/colormag/js/fitvids/jquery.fitvids.min.js?ver=2.1.5' id='colormag-fitvids-js'></script> <script type='text/javascript' src='https://www.javasuperstore.com/wp-content/themes/colormag/js/skip-link-focus-fix.min.js?ver=2.1.5' id='colormag-skip-link-focus-fix-js'></script> <script type='text/javascript' src='https://www.javasuperstore.com/wp-content/themes/colormag/js/colormag-custom.min.js?ver=2.1.5' id='colormag-custom-js'></script> </body> </html> <!-- Page cached by LiteSpeed Cache 5.7.0.1 on 2024-05-16 17:55:44 -->