Client Guide

How to Prepare Images

Handbook to prepare image for website development

Table of Contents

Image Rename & Resize

In stock

RM240
Usage Right Any usage rights not transferred entirely are reserved for the Designer. Usage beyond that granted to the Client hereof shall require an extra licensing cost of 300% of total project fee, subject to all terms. The right to release digital files is granted upon receipt of full payment.

Non-Exclusive

Step 1: Rename image file

To a descriptive name that can identify the image without viewing it. Renaming enhances the SEO ranking of a website by making it simple to organize and assign files without waiting for thumbnails to generate.

  • Rename to a descriptive title (can be according to page title too!)
  • Replace space with underscores (_), dash (-)
  • DO NOT use special characters.
  • Use number (0123456789) for multiple pictures.

Example: (name - type - number)
e.g. missyano-logo-01.png

image file name

Step 2: Resize image

WordPress creates 4-6 resizes by default for every image you upload to your site. Your theme, or other plugins you have installed, may add additional sizes to be created for each upload. So while you might look at the Media Library and think you only have 100 images, it is likely that you have at least 500. 

Background Ideal File Size
White < 100KB in .jpg
Transparent < 300KB in .png

 

Type Image Size
Favicon 512 x 512
Product Image 800 x 800 Square
800 x 1200 Portrait
Featured image 1024 x 720
Page Title Bg. 1200 x 600

 

Download Canva Template for Free

A template for your images that is already the right size.

  • Product Image - Square 800 x 800
  • Product Image - Portrait 800 x 1200
  • Blog Featured Image

Step 3: Compress Image

If your image is larger than 300KB, compressing it can help reduce the file size and speed up page loading. Use free image optimizer online below:

  • TinyPNG Compress WebP, PNG and JPEG images
  • Kraken.io Image Optimizer

Related Posts