Уменьшение потери качества изображения

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

Проблема, с которой вы сталкиваетесь, заключается в том, что вы не масштабируете изображение вообще, вы говорите веб-браузеру, чтобы взять изображение полного размера и сделать его меньше. Браузеры, к сожалению, не очень хороши в этом, и я думаю, что просто используйте очень простой алгоритм для этого.

Решение заключается в масштабировании изображений на сервере. Я хотел бы предложить иметь обработчик страницы, который каким-то образом получает ссылку на изображение (имя файла, идентификатор и т. Д.) И выполняет изменение размера перед выдачей клиенту. Следующий вопрос касается масштабирования в C#.

High Quality Image Scaling Library

Answer 2

Это лучше, если вы уменьшите сторону изображения сервера, have a look at this documentation. Это позволит сэкономить сетевой трафик и создать более качественные изображения.