Снижение качества изображения

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#.

Высококачественная библиотека масштабирования изображений

Answer 2

Лучше, если вы сократите изображения на стороне сервера, посмотрите на эту документацию. Это сэкономит сетевой трафик и создаст изображения лучшего качества.