Carregamento progressivo de imagens com ASP.NET MVC e JQuery

Muito provavelmente você já teve ter percebido, principalmente se sua conexão não for das melhores, que ao abrir algumas Imagens do Facebook é carregado uma imagem em baixa resolução e depois de um tempo a imagem melhora, o Google também utiliza esse artifício na sua busca de imagem:

Como vamos fazer?

1. Converter a imagem, ainda no servidor, em uma imagem de baixa resolução.
2. Exibir essa imagem em baixa definição assim que a página for carregada.
3. Fazer uma chamada Ajax para buscar a imagem em maior resolução.
4. "Trocar" a imagem de baixa resolução, que está sendo exibida na tela, pela imagem de maior resolução.

Obter imagem em baixa resolução

private Image ObterImagemBaixaResolucao()
        {
            Image retorno = null;

            using (var image = ObterImagem())
            {
                retorno = image.GetThumbnailImage((image.Width / 16), (image.Height / 16), () => false, IntPtr.Zero);
            }

            return retorno;
        }

Assim obtemos a imagem em menor resolução, nesse caso 16x menor.

GetThumbnailImage é o método responsável por nos dar uma imagem em resolução menor.

Logo após eu converto a imagem em base 64:

public static string ImageToBase64(this Image image,ImageFormat format)
        {
            using (MemoryStream ms = new MemoryStream())
            {
                image.Save(ms, format);
                byte[] imageBytes = ms.ToArray();

                return Convert.ToBase64String(imageBytes);
            }
        }

Quem tiver alguma dúvida sobre base 64 sugiro que dê uma lida aqui: http://inchoo.net/ecommerce/magento/what-is-base64-encoding-and-how-can-we-benefit-from-it/

E exibo na View:

<img id="imageCarregar" src="data:image/jpg;base64,@Model.ImagemBase64" />

Obter a imagem em resolução maior

Uma chamada Ajax busca a imagem em maior resolução:

function obterImagemAltaResolucao() {

            $.ajax({
                type: "POST",
                url: "/Home/ObterImagemResolucaoNormal",
                success: function (base64Data) {
                    $('#imageCarregar').attr('src', "data:image/jpg;base64," + base64Data);
                },
                error: function (xhr) {
                    alert("Occoreu um erro ao carregar a imagem. " + xhr.responseText);
                }
            });
        } 

Coloque a função JavaScript para executar assim que a página estiver carregada:

$(document).ready(function () {
            obterImagemAltaResolucao();
        });

Essa função carrega a imagem assincronicamente a quando termina substitui a imagem de baixa definição pela imagem retornada.

Essa é o método no controller responsável por retornar a imagem:

[HttpPost]
        public string ObterImagemResolucaoNormal()
        {
            var imageBase64 = String.Empty;

            using (Image image = ObterImagem())
            {
                using (Image newImage = new Bitmap(image))
                {
                    imageBase64 = newImage.ImageToBase64(ImageFormat.Jpeg);
                }
            }

            return imageBase64;
        }

O código pode ser baixado aqui: https://github.com/rafaelguinho/ProgressiveLoadImage