How To, Images

Make images easy.

To help you out, depending on your template, between seven and 15 versions of each uploaded image is created to ensure perfect display on any screen size. Still, creating various sizes on an image can only take you so far. So, it’s important to upload a quality photo.

Follow these recommendations on how to format your images before uploading them.

Image (File) Size and Dimensions
Try to use less than 500 KB for best results per image. Even though you can upload files with sizes up to 20 MB, bigger isn’t better; it’s slower. Find the size and dimensions of your original image before you upload it to your site:

  • PC – Right click on the image file and select Properties.
  • Mac – Press Option while clicking on the image file, then select Get Info.

The dimensions of the original image you upload to your site can have a big impact on how it displays. We recommend using images that are between 1500 and 2500 pixels wide. If an image’s dimensions are too small it can look pixelated as your template tries to fit an image into a space requiring a larger width.

You can use design software to change your images’ file sizes and dimensions. If your original image is too small however, we don’t recommend enlarging it. This can make it appear pixelated. Instead, start with an image that is at least 1500 pixels wide. We love to use Unsplash for royalty and credit free images.

Format
Save images in .jpg, .gif, or .png format only. (.psd, .tff, and .doc files aren’t web-compatible for images. See our guide on documents and attachments instead.)

File name
Only use letters, numbers, underscores, and hyphens in file names. To change the file name, re-upload the image or file with the new name. An image’s name is the alt (alternative) text if you don’t specify any alt text. It also tells search engines what the image is about, which can help your SEO efforts.

When creating your images, use readable names that will make sense to people who use assistive screen readers or who’ve disabled images in their browser. For example, if your image name is IMG_0178.jpg, change it to something that describes the image, like blue-ceramic-glazed-planter.jpg.

Your image file name should be short, descriptive and helpful.

  • Eight for few words
  • Separate each word with a hyphen or underscore.
  • Incorporate one or two keywords.

We hope these quick tips help get you on your way. Happy designing!

Leave a Reply

Connect with: