이미지 품질 손실 줄임

Question

이미지를 JS 슬라이드 쇼에 표시하고 있습니다. 이미지는 매우 큰 크기이므로 HTML에서 축소합니다. 종횡비를 유지하기 위해 몇 가지 수학을 수행합니다. 결국 큰 이미지는 품질이 떨어지게됩니다. 이 이미지는 서버에 이미 존재하며 원본 파일의 크기를 변경하지 않아야합니다.

품질 저하의 원인은 무엇입니까? 작은 크기의 이미지를 고집해야하며, 최종 크기를 늘려야합니까? 도움이되는 코드는 최대 너비와 높이가 현재 각각 270과 180입니다. 이 모든 것은 C#입니다.

// srcccccc is the image file. Can be any kind of extension jpg, png, etc. 
if (srcccccc != "") 
{ 
    Globals.NavigateURL(); 
    string path = PortalSettings.HomeDirectory + srcccccc; 
    using (System.Drawing.Image img = System.Drawing.Image.FromFile(@Server.MapPath(path))) 
    { 
     int[] newSizes = ResizeWithRatio(img); 
     contentsall += "<img src=\"" + PortalSettings.HomeDirectory + srcccccc + "\" alt=\"Image " 
      + folderidddin + "\" height=\"" + newSizes[1] + "px\"" + "\" width=\"" + newSizes[0] + "px\" />"; 
    } 
} 

// HTML is dynamically added later.... 

private int[] ResizeWithRatio(System.Drawing.Image img) 
{ 
      int[] sizes = new int[2]; 
      if (img.Width > maxWidth || img.Height > maxHeight) 
      { 
       float ri = (float)img.Width/(float)img.Height; 
       float rs = (float)maxWidth/(float)maxHeight; 
       if (rs > ri) 
       { 
        sizes[0] = (int)((float)img.Width * (float)maxHeight/(float)img.Height); 
        sizes[1] = maxHeight; 
       } 
       else 
       { 
        sizes[0] = maxWidth; 
        sizes[1] = (int)((float)img.Height * (float)maxWidth/(float)img.Width); 
       } 
      } 
      else 
      { 
       sizes[0] = img.Width; 
       sizes[1] = img.Height; 
      } 
      return sizes; 
} 

Answer 1

당신이 가지고있는 문제는 이미지를 전혀 크기 조정하지 않는다는 것입니다. 웹 브라우저가 전체 크기의 이미지를 가져 와서 크기를 줄이라는 말입니다. 브라우저는 슬프게도이 점을별로 잘 이해하지 못하고 있으며, 이것을 수행하는 데 아주 간단한 알고리즘 만 사용한다고 생각합니다.

해결책은 서버의 이미지 크기를 조정하는 것입니다. 어떤 방법 (파일 이름, id 등)으로 이미지 참조를받는 페이지 핸들러를 사용하고 클라이언트에 출력하기 전에 크기 조정을 수행 할 것을 제안합니다. 다음 질문은 C#의 크기 조정을 다룹니다.

이 방법

High Quality Image Scaling Library

Answer 2

이미지 서버 쪽을 축소하면 더 좋을 것입니다. have a look at this documentation 이렇게하면 네트워크 트래픽을 줄이고 더 좋은 품질의 사진을 만들 수 있습니다.