Quick Start Guide

Get started with OPTIMAGE in just 5 minutes. Learn how to create an account, upload images, and integrate optimized images into your website.

Introduction

Welcome to OPTIMAGE! This quick start guide will help you get up and running in about 5 minutes. You'll learn how to create your account, upload your first image, and integrate optimized images into your website.

Prerequisites

  • ✓A free OPTIMAGE account (we'll create this in step 1)
  • ✓Images in supported formats: JPEG, PNG, WebP, or GIF
  • ✓Basic knowledge of HTML (for integration)

Step 1: Create Your Account

Start by creating your free OPTIMAGE account. You'll get 500 images per month on the free tier.

  1. Navigate to the Sign Up page
  2. Enter your email address and create a secure password
  3. Click "Create Account" to complete registration
  4. You'll be automatically signed in to your dashboard

Step 2: Create Your First Collection

Collections help you organize your images by project, client, or category. Let's create your first collection.

  1. From your dashboard, click "New Collection"
  2. Enter a name (minimum 3 characters, e.g., "My Website")
  3. Optionally add a description
  4. Click "Create" to save your collection

Tip: Use meaningful collection names that reflect your project structure. You can create unlimited collections on all plans.

Step 3: Upload Your First Image

Now let's upload an image to your collection. OPTIMAGE will automatically optimize it and generate multiple sizes.

  1. Click on your newly created collection
  2. Drag and drop an image file onto the upload area, or click to browse
  3. Wait for the upload to complete (usually takes 2-5 seconds)
  4. Your image will be processed and optimized automatically

Tip: OPTIMAGE generates 11 different sizes for each image (from 320px to 1280px wide) plus an original WebP conversion, ensuring perfect display on any device.

Step 4: Use Your Optimized Images

Once your image is processed, you can copy the HTML code and use it in your website. OPTIMAGE provides a complete srcset with all sizes for responsive images.

Here's an example of the HTML you'll use: 

<img
  src="https://cdn.optimage.com/collection-id/768/image-slug.webp"
  srcset="
    https://cdn.optimage.com/collection-id/320/image-slug.webp 320w,
    https://cdn.optimage.com/collection-id/384/image-slug.webp 384w,
    https://cdn.optimage.com/collection-id/448/image-slug.webp 448w,
    https://cdn.optimage.com/collection-id/512/image-slug.webp 512w,
    https://cdn.optimage.com/collection-id/576/image-slug.webp 576w,
    https://cdn.optimage.com/collection-id/672/image-slug.webp 672w,
    https://cdn.optimage.com/collection-id/768/image-slug.webp 768w,
    https://cdn.optimage.com/collection-id/896/image-slug.webp 896w,
    https://cdn.optimage.com/collection-id/1024/image-slug.webp 1024w,
    https://cdn.optimage.com/collection-id/1152/image-slug.webp 1152w,
    https://cdn.optimage.com/collection-id/1280/image-slug.webp 1280w
  "
  alt="Your image description"
  loading="lazy"
/>

The browser will automatically select the best image size based on the user's screen size and resolution.

Next Steps

Congratulations! You've successfully uploaded and integrated your first optimized image. Here are some resources to help you get the most out of OPTIMAGE: