Có cách nào để làm cho hình ảnh lớn hơn trong HTML5 mà không bị mờ.Chia tỷ lệ hình ảnh trong HTML5 mà không bị mờ
Ví dụ, hình ảnh này là 24x24: 
Nếu bạn thay vì tải nó có chiều rộng 150, nó được mờ. Tôi muốn được pixelated!
http://png-1.findicons.com/files/icons/734/phuzion/24/bug.png
Thay vào đó tôi muốn thay đổi công cụ vẽ để hiển thị giống như những gì bạn sẽ thấy trong photoshop. Một cái gì đó như thế này:
Tôi chỉ quan tâm đến các trình duyệt hiện đại.
Sau một số nghiên cứu: tiếc là những gì bạn muốn làm bị giới hạn bởi các giới hạn cụ thể của trình duyệt. Firefox có mã thử nghiệm giới hạn (image-rendering) có thể buộc trình duyệt ngừng nội suy các pixel và do đó gây ra sự mờ nhạt.
Rất tiếc, hiện tại không có cách nào khác được hỗ trợ để thực hiện việc này. Đề xuất của tôi sẽ là để bạn chỉ đơn giản là quy mô hình ảnh như tôi đã làm trong bản chỉnh sửa cho bài đăng gốc của bạn.
Như thế này: 
trang tài liệu của Mozilla: https://developer.mozilla.org/en-US/docs/CSS/image-rendering
Nếu bạn chỉ cần để nó vào trình duyệt, họ sẽ cố gắng làm cho nó trơn tru nhất có thể hiện nay (phiên bản IE cũ không). Vì vậy, đặt cược tốt nhất của bạn là để tải nó vào một khung và làm (gần nhất hàng xóm) upscaling mình. Tôi không nói rằng đây là một ý tưởng lành mạnh, chỉ cần đặt nó ra khỏi đó. :)
Điều đó, hoặc có nhiều phiên bản của hình ảnh và chuyển đổi chúng xung quanh bằng cách nào đó. Có một vài kỹ thuật bạn có thể thử, như cửa trượt css.
tôi đề xuất một sửa bài của bạn với hình ảnh khác thể hiện những gì bạn muốn. Hy vọng rằng điều này sẽ giúp bạn minh họa những gì bạn muốn mọi người tốt hơn. Xin vui lòng cho tôi biết nếu tôi giải thích những gì bạn đang yêu cầu là không chính xác. – Michael
cảm ơn bạn @Michael –
http://stackoverflow.com/questions/388492/firefox-blurs-an-image-when-scaled-through-css-or-inline-style –