Skymage

Appearance

Examples ​

This page demonstrates various examples of using Skymage for image transformations.

Feature Highlights ​

Before & After Comparison ​

See the difference our image transformations can make:

Blur Effect Comparison

Code Examples ​

Common Transformation Recipes ​

Social Media Cover Image ​

https://demo.skymage.net/v1/daudau.cc/images/landscape.jpg?w=1200&h=630&fit=cover&p=top

E-commerce Product Thumbnail ​

https://demo.skymage.net/v1/daudau.cc/images/product.jpg?w=300&h=300&fit=contain&bg=white
https://demo.skymage.net/v1/daudau.cc/images/blog.jpg?w=800&h=450&fit=cover&filt=grayscale

Profile Picture with Face Detection ​

https://demo.skymage.net/v1/daudau.cc/images/person.jpg?w=200&h=200&fit=crop&p=face

External Storage Examples ​

Transform images directly from your S3 bucket:

https://demo.skymage.net/v1/ex/my-s3-bucket/gallery/photo.jpg?w=1200&h=800&fit=cover&q=85

BunnyCDN Product Catalog ​

Resize product images from BunnyCDN storage:

https://demo.skymage.net/v1/ex/bunny-storage/products/item-001.jpg?w=400&h=400&fit=contain&bg=white

DigitalOcean Spaces Blog Images ​

Apply filters to blog images stored in DigitalOcean Spaces:

https://demo.skymage.net/v1/ex/do-spaces/blog/featured.jpg?w=800&h=450&fit=cover&filt=vintage

MinIO Private Cloud Storage ​

Transform images from your private MinIO instance:

https://demo.skymage.net/v1/ex/minio-storage/uploads/user-content.jpg?w=600&h=400&fit=crop&p=center

Real-World Use Cases ​

E-commerce Platform ​

html
<!-- Product listing page -->
<img src="https://demo.skymage.net/v1/ex/s3-products/catalog/item-123.jpg?w=300&h=300&fit=contain&bg=white"
     alt="Product thumbnail">

<!-- Product detail page -->
<img src="https://demo.skymage.net/v1/ex/s3-products/catalog/item-123.jpg?w=800&h=600&fit=cover"
     alt="Product detail">

<!-- Mobile responsive -->
<picture>
  <source media="(max-width: 768px)"
          srcset="https://demo.skymage.net/v1/ex/s3-products/catalog/item-123.jpg?w=400&h=300&fit=cover">
  <img src="https://demo.skymage.net/v1/ex/s3-products/catalog/item-123.jpg?w=800&h=600&fit=cover"
       alt="Product image">
</picture>

Content Management System ​

html
<!-- Blog featured image -->
<img src="https://demo.skymage.net/v1/ex/cms-storage/blog/article-456.jpg?w=1200&h=630&fit=cover&p=top"
     alt="Article featured image">

<!-- Author avatar -->
<img src="https://demo.skymage.net/v1/ex/cms-storage/avatars/author-789.jpg?w=64&h=64&fit=crop&p=face"
     alt="Author avatar" class="rounded-full">

<!-- Gallery thumbnails -->
<div class="gallery-grid">
  <img src="https://demo.skymage.net/v1/ex/cms-storage/gallery/img-001.jpg?w=200&h=200&fit=crop">
  <img src="https://demo.skymage.net/v1/ex/cms-storage/gallery/img-002.jpg?w=200&h=200&fit=crop">
  <img src="https://demo.skymage.net/v1/ex/cms-storage/gallery/img-003.jpg?w=200&h=200&fit=crop">
</div>

Social Media Application ​

javascript
// Generate different sizes for social sharing
const generateSocialImages = (imagePath) => {
  const baseUrl = `https://demo.skymage.net/v1/ex/social-storage/${imagePath}`;

  return {
    facebook: `${baseUrl}?w=1200&h=630&fit=cover`,
    twitter: `${baseUrl}?w=1200&h=600&fit=cover`,
    instagram: `${baseUrl}?w=1080&h=1080&fit=crop&p=center`,
    linkedin: `${baseUrl}?w=1200&h=627&fit=cover`
  };
};

// Usage
const socialImages = generateSocialImages('posts/user-post-123.jpg');

Copyright © 2025 Skymage