Google 크롬에서 이미지 보간 대 김프

Question

크기가 500px (및 높이 263) 인 CSS를 사용하여 축소 한 대형 png 이미지 (950x500px)가 있습니다. 이 웹 페이지를 온라인 상태로 만들기 전에 김프를 사용하여 이미지 크기를 조정하기로 결정했습니다. CSS로 이미지 크기를 조정하는 것은 나쁜 습관입니다. 그러나 두 이미지가 png이고 크기가 같더라도 Google 크롬에서 CSS 대신 김프를 사용하여 이미지를 스케일 할 때 이미지 품질이 눈에 띄게 감소합니다. GIMP (None, Linear, Cubic 및)가 제공하는 4 가지 압축 방법을 모두 사용해 보았습니다. 그 중 어느 것도 Google 크롬이 제공하는 이미지 품질과 일치하지 않습니다.

Google 크롬이 고품질 이미지 배율을 제공하기 위해 사용하는 압축 방법은 무엇이며 어떻게 오프라인에서이 방법을 사용할 수 있습니까?

Answer 1

당신은 여기에 귀하의 질문에 대한 답변을 얻을 수 있습니다 How web browsers resize images

크롬은 여러 스케일링 팩터에 따라 알고리즘을 사용하는 것으로 보인다 아주 약간의 다운 스케일 (557 555 픽셀)와

을, 크롬은 업 스케일링과 동일한 선형 보간법을 사용합니다 ( ). (이 그래프의 연결이 끊어 이라는 사실은 ResampleScope 작동 방식의 유물이며, 크롬과는 아무 상관이 없습니다.)

하지만 우리는 조금 더 다운 스케일 경우 543 픽셀, 무슨 찾습니다 를 [ ...] 우리는 완전히 다른 결과를 얻었습니다 : 명확하게 3 개 Lanczos 필터. Chrome의 전략은 이미지 을 2.5 % 이상 축소 할 때 Lanczos를 사용하는 것일 수 있습니다.

당신이 (결과에 대한 제어를 얻기 위해) 스스로를해야 할 경우

는 Cubic은 일반적으로 아래로 확장하기위한 최선의 수직 확장 내기와 Sinc (Lanczos3)입니다.
이미지 크기를 직접 조절하면 모든 브라우저에서 이미지가 어떻게 표시되는지 알 수 있습니다.

참고 :고해상도 디스플레이 (고전적인 디스플레이의 픽셀 밀도의 약 4 배)가 장착 된 컴퓨터가 점점 늘어나고 있습니다. 해당 컴퓨터에서 이미지가 어떻게 보이는지 확인할 수 있습니다. 브라우저로 확장 할 가능성이 큽니다.