Picz

Image tools for ASP.NET MVC Applications

Why Picz?

There are several benefits to Picz:

• Low resolution image placeholders for speed
• Higher quality images loaded asynchronously for larger views
• Disk-caching of replacement images
• Improved the perceived load time of your pages
• Reduce the weight of your pages for smaller devices

The goal of Picz is to...

Enable resposive images in return for the smallest possible investment

Because responsive images can be a drag to set up and maintain, adoption rates are worse than they could be. Picz aims to give developers the opportunity to get all the benefits of responsive images, without the complexity and maintenence issues.

• The HTML helper needs to be as simple as the image tag it replaces.

• You shouldn't have to pre-generate loads of images, or keep a set of images in sync to use responsive images.

• Your website should appear to be faster, not slower, to the end user.

Acknowledgements

new-york.jpg used in the examples, by Terabass london.jpg used in the examples, by Daniel Chapma paris.jpg used in the examples, by Simon Reinhardt

Quick Start

Grab the engine from NuGet:

PM> Install-Package Fenton.Picz

Add the following configuration (example shows 48 hour caching, in a directory on the E drive, cache duration is ignored if you supply image hashes).

<add key="PiczCacheDurationHours" value="48" />
<add key="PiczCachePath" value="E:\Temp\ImageCache\" />

Add a three line controller action to handle the image requests:

using Fenton.Picz.Engine;
using System;
using System.Web.Mvc;

public class PiczController : Controller
{
    private readonly ImageResizer _imageResizer = new ImageResizer();

    [Route("picz")]
    public ActionResult Picz(int s, string p, string h = "")
    {
        var originalUrl = new Uri(Request.Url, p).AbsoluteUri;
        var replacement = _imageResizer.GetReplacementImage(s, originalUrl, h);
        return File(replacement.Path, replacement.MimeType);
    }
}