Skip to main content

FAQ: Image Preparation

Image assets are a crucial part of any e-commerce store. Preparation of images is a crucial step in the process of a store management. This FAQ will help you understand the steps involved in the process.

Image asset lifecycle includes the following phases:

  1. Image Sourcing: Image can be sourced from art team, stock images or from the internet.
  2. Processing Image for Publishing
    • Image Optimization for Web: Images should be optimized for web to reduce the load time of the website.
    • Image Naming: Images should be named properly for SEO purposes (e.g. in order to rank on Google Images).
    • Image Alt Text: Alt text should be added to images for SEO purposes (e.g. in order to rank on Google Images) and for accessibility (e.g. screen readers).
    • Image Size: Images should comply with the size requirements of the platform.
    • Image Format: Images should comply with the format requirements of the platform. (e.g. WebP)
  3. Storing Images: Images should be stored in a unified location for future reference and reusability.
  4. Publishing Images: At this phase, image can be published on the website.

Let's discuss each phase in detail.

1. Image Sourcing​

Image sourcing is the process of collecting images from various sources. The sources can be art team, stock images or from the internet.

Source: Art Team​

Steps

  • Brief and provide the followings to the art team.
    • Resolution of the image (e.g. 1920x1080px)
    • Format of the image: JPG or PNG
    • Background transparency (if required)
    • Upload location: Must be a designated folder in the "Halio Sonic" shared drive.

Source: Stock Images or Internet​

Steps

  • Collect stock images / icons from websites like Unsplash, Pexels, Flaticon, etc.
  • Ensure that the images are free to use for commercial purposes and do not require attribution. (Learn more)

2. Processing Image for Publishing​

Once the image is sourced, it needs to be processed for publishing and storing purposes. The following steps are involved in the process:

Image Optimization for Web​

  • This involves converting the image to WebP format and compressing it to reduce the load time of the website.
  • Use Squoosh to compress the image and to convert it to WebP format.
    • Conversion specification
      • Format: WebP
      • Quality: 70
      • Effort: 6
      • Preserve transparent data: Yes

Image Naming​

  • Rename the image with a meaningful name that describes the image. (e.g. halio-red-light-therapy-device.webp)
  • Use hyphens and lowercase letters only

Image Alt (alternative) Text​

  • Describe the image in a few words.
  • Alt text should be descriptive and concise.
    • If the image contains a product, the product and brand name should be included in the alt text.
    • If the image contains text, the text should be included in the alt text.
    • In case there is no text in the image, the alt text should describe the image in a few words.
  • Examples
    • Halio Red Light Therapy Device (for an image that contains the product's image only)
    • Halio Red Light Therapy Device - Special Christmas Deal - 50% Off (for an image that contains text)
    • A young girl using Halio Red Light Therapy Device (for an image without text)
    tip

    Alt Text Generator can be used to simplify the process of generating alt text.

    warning

    Alt text generator may provide suggestions without considering the context of the image. Please review the suggestions and modify them as needed.

Image Size​

  • Ensure that the image size complies with the requirements of the specific feature or platform.

Image Format​

  • Processed images should be in WebP format for web publishing.

3. Storing Images​

Once the images are processed, they should be stored alongside the raw images within the "Halio Sonic" shared drive for future reference and reusability.

Following is a recommended folder structure for storing images:

4. Publishing Images​

Processed images can be published on the website as is.