Image Guidelines

This article will provide general Image Guidelines for use


Background

This article will provide some guidelines and general information as it related to the usage and implementation of images.


File Formats
For the best results, images should only be used if the are in the following formats: .png or .jpg


Dimensions

General image width is based on usage and the purpose of the image. Below are some general examples:

  • If you are using images as responses, you may not want the images to be over 200px wide
  • If you have had a large concept image, you may not want the images to be over 800px wide
  • Image height is generally less important since a little bit of vertical scrolling is usually okay, and specifying the width only will allow the proportional height to automatically be utilized
  • If the original image you have is 2000px wide and you are really going to use this image as a 150px wide image, you should use a 150px size image and not try to use the 2000px image as you will experience some distortion or blurring. If your image is the size which you want to use, it will be the crispest and cleanest since its closest to the original. 

Accounting for Smaller Screens

Depending on the size of your image, you may need to specify a minimum width so it can still be seen as needed on smaller devices. In order for this to work, you need to make sure that the general width is a percentage, usually 100%. Within the html code, you will want to add a 'style' and this is where you will be able to add any css for the image directly. In general, you want to have a 'width=100%;'. This will allow the image to scale to each device automatically. By adding the additional 'min-width:150px;'. This min width will be the smallest the will appear on any device. Below is an example:

<img src="https://cdn2.cmix.com/brand1.png" style="width:100%; min-width:150px;">

Depending on the image usage, you may even want to set a 'max-width'. This will be the widest the image would appear on any screen. 


Enhancements

Images can be used with enhancements such as 'Hover to Enlarge' or 'Click to Enlarge'. These options will allow a respondent to see additional information or and enlarged version of the image. The main thing to remember here, is that 'Hover to Enlarge' will NOT work on mobile devices while 'Click to Enlarge' will. See the corresponding articles for more details:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us