This puzzle may seem easy to some, but it's been quite challenging for me. I've encountered a discrepancy in how Firefox and Chrome render images (specifically technical drawings). Despite my attempts to use
image-rendering: -webkit-optimize-contrast;image-rendering: pixelated;, the issue persists with jagged images.
I typically save my images using Photoshop and Illustrator.
Thank you in advance for any assistance.
Firefox
https://i.sstatic.net/h1L25.jpg
Chrome
https://i.sstatic.net/xF9JD.jpg
My CSS
File
.img-responsive-select {
height: auto;
width: auto;
max-width: 300px;
max-height: 300px;
image-rendering: -webkit-optimize-contrast;
}<tr>
<td width="30%"><label>Technical drawing:</label></td>
<td width="70%"><img src="http://via.placeholder.com/360x120" class="img-responsive img-responsive-select" /></td>
</tr>