Best practice when displaying values of Sitecore fields in your markup is currently to use FieldRenderer. When using FieldRenderer, Sitecore renders the fields as they are intended, and adds all the goody stuff like page edit functionality and tags that should be rendered.

When using the FieldRenderer on an image tag, you will get an html <img /> tag rendered with its src set. The FieldRenderer also renderes width and height attributes. These are rendered from the image dimensions in the media library. If you have set any transform parameters, they will be set to these. The feature is made to implement the best practice for rendering <img /> tags to a page. It tells the browser what dimension it should reserve for rendering the image, and the browser doesn’t have to process the image itself.

Now a day we are using responsive web designs, the idea is that the markup should fit the device that is showing the webpage, i.e. on phones the available width is much smaller than on a desktop screen. When designing like this, we usually don’t set the width and height attributes on the <img /> tag, instead, we are using css to control the width and height of the images, usually by giving the images max-width:100% and controlling the parent containers dimensions.

Out of the box, it’s not possible to get the FieldRenderer or sc:Image to render the <img /> tag without the width and height attributes, so we created a simple solution for this.

We are creating a renderField processor that hooks into the field being rendered, just after Sitecore is done processing its image values. The code looks like the following:

namespace SitecoreCustomization.Pipelines.RenderField
{
    public class GetImageFieldValueResponsive
    {
        public void Process(RenderFieldArgs args)
        {
            if (args.FieldTypeKey != "image")
                return;
            if (args.Parameters.ContainsKey("responsive"))
            {
                string imageTag = args.Result.FirstPart;
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+height\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+width\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+responsive\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
                args.Result.FirstPart = imageTag;
            }

        }
    }
}

in the args.Result.FiestPart is the processed image tag, this could be something like "<img src='~/media/image.ashx' width=100 height=100 />"

The first two Regex.Repace removes the height and width tags, and the third one removes a parameter called responsive. This is the one I’ve added when using the FieldRenderer control to render the image. This means that the FieldRenderer can be used like the following when the width and height tags shouldn’t be present in the markup:

<sc:FieldRenderer runat="server" FieldName="My best image" Parameters="responsive=1"/>

If we just want normal Sitecore processing, we just omit the "reponsive=1" parameter, and our renderField processor won't be utilized.

The processor is added in a simple .config file in the app_include folder that looks like this:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <pipelines>
      <renderField>
        <processor 
            patch:after="*[@type='Sitecore.Pipelines.RenderField.GetImageFieldValue, Sitecore.Kernel']" 
            type="SitecoreCustomization.Pipelines.RenderField.GetImageFieldValueResponsive, SitecoreCustomization"/>
      </renderField>
    </pipelines>
  </sitecore>
</configuration>

That’s it, simple solution. If you want to go all in, you could replace the ImageRenderer Sitecore is utilizing, this will give you full control over what is rendered when rendering an image, but for this project, this was the simple solution, which got the job done.