Firefox가 이미지 크기 조정에 왜 그렇게 나쁜가요?

Firefox가 이미지 크기 조정에 왜 그렇게 나쁜가요?

---

왼쪽에 원래 PNG이고 오른쪽 버전을 사용하여 절반 정도는 오리지널 크기로 감소 <img width하고 height. [링크 제거됨]을 참조하십시오.

Firefox에서 크기가 조정 된 이미지가 왜 그렇게 흐릿하게 보입니다. 이미지 파일을 변경하지 않고 할 수있는 일이 있습니까? 이미지에 많은 양의 수학 또는 텍스트가 포함 된 경우 흐릿함은 특히 짜증이납니다.

---

Firefox 이미지 축소와 관련하여 Bugzilla에 오랫동안 제출 된 버그 티켓 이 있습니다 . 최종 해결 방법을 추적하기 위해 티켓을 주시하거나 가능하다면 직접 패치를 제공 할 수 있습니다.

가장 좋은 해결 방법은 Ryan Wheale의 답변에transform 자세히 설명 된대로 CSS 속성 을 사용하여 문제 이미지에 작은 회전을 적용하고 하위 픽셀 렌더링을 강제하는 것 입니다.

---

나는 이것이 늦었다는 것을 알고 있지만, 약간의 회전을 적용하여 firefox를 속여 이미지를 더 잘 렌더링하도록 할 수 있습니다. 나는 translate()같은 효과를 얻기 위해 이미지를 시도했다 .

CSS

.image-scale-hack {
    transform: rotate( .0001deg );
}

자바 스크립트

if( "MozAppearance" in document.documentElement.style ) {
    $('.logo img').addClass('image-scale-hack');
}

나는 어떤 대가를 치르더라도 브라우저 스 니프를 피합니다. 나는 yepnope.js에서이 냄새를 빌 렸고 그것에 대해 나쁘지 않다.

또한 주목할만한 점은이 동일한 트릭을 사용하여 웹킷과 파이어 폭스 모두에서 하위 픽셀 이미지 렌더링을 강제 할 수 있습니다. 이것은 매우 느린 애니메이션에 유용합니다. 예를 통해 가장 잘 설명됩니다.

http://jsfiddle.net/ryanwheale/xkxwN/

---

이미지 렌더링 문서 로부터 링크 된 파이어 폭스는 CSS 또는 인라인 스타일을 통해 스케일 이미지를 흐리게 스와 '참조 사용에 대한 지침이 포함 대답 image-rendering:optimizeQuality(FF4에 내 테스트 문제를 수정) - 예 :

---

귀하의 답변은 위의 링크에 있다고 생각합니다. https://developer.mozilla.org/En/CSS/Image-rendering : '현재 auto 및 optimizeQuality는 기본적으로 동일하며 둘 다 이중 선형 리샘플링이 발생합니다.' '기본값 IE8 + : 바이 큐빅 (고품질)'

다음 참조 : http://www.codinghorror.com/blog/2007/07/better-image-resizing.html '이미지를 작게 만들 때는 자연스러운 선명 효과가있는 바이 큐빅을 사용하십시오. 원본 이미지에서 추가 세부 사항을 모두 제거한 후 새 작은 이미지에 남아있는 데이터를 강조하고 싶습니다. '

몇 가지 가능한 해결 방법을 생각할 수 있지만 둘 다 간단하지 않습니다.

1. 서버에서 이미지 크기를 조정하십시오. 절반 크기로 제공하고 Firefox가 전체 크기로 확장하도록 허용하거나 (아마 괜찮을 것입니다) 이미지 크기에 따라 다른 URL을 사용합니다.
2. 플러그인을 사용하여 브라우저에서이 작업을 수행 할 수 있습니다 (하지만 내가 찾은 예제는 실제로 필요한 작업을 수행하지 않으므로 제거했습니다).

---

현재 (2017) 버그는 2 년 전에 닫혔습니다. 짧은 테스트 :

FF, 50 % :

FF, 25 % :

---

요약 : 이미지 스케일링은 곧 수정되지 않을 것입니다. 어디서나.

더 긴 버전 :

Eris Brasseur는 "왜 이미지 스케일링 소프트웨어가 그렇게 나쁜가요?"라는 광범위한 질문을 잘 다루는 페이지를 가지고 있습니다.

http://www.ericbrasseur.org/gamma.html

이 문제에 대한 W3C의 입장은 거의 모든 곳에서 부정확하지만 똑같이 부정확 한 구현을하는 것이 더 낫기 때문에 감마를 적절하게 다루는 것을 피합니다 (문제가 약간 복잡함). 따라서 웹 표준에 익숙한 사람은 감마를 계속 무시하고 Eric과이 스레드에 설명 된 효과로 이어집니다. 이것은 Jeff Atwood가 다른 답변에 연결된 기사에 넣었으므로 축소조차도 잘 정의되지는 않습니다.

이러한 환경에서 Lanczos와 같은 방법은 잘못 구현 된 경우에도 성능이 우수하다는 명성을 얻고 있습니다.

즉, 브라우저는 맥도날드 버거와 동등한 소프트웨어이며 그 사실은 그대로 유지됩니다. 그 의미는 필요하지 않지만 확률은 왜곡되어 있습니다.

---

이 문제에 대한 해결 방법은 이미지 편집기로 원본 이미지의 크기를 원하는 크기로 조정하고 스타일 시트에서 너비와 높이를 정의하지 않고 이미지를있는 그대로 사용하는 것입니다.

참고 URL : https://stackoverflow.com/questions/5918595/why-is-firefox-so-bad-at-resizing-images