Skip to main content

Image Blocks

Images make your tags more engaging and informative. tagd-ai supports single images and multi-image galleries.

Adding Images​

Upload from Device​

  1. Click + → Image
  2. Click Upload or drag and drop
  3. Select an image from your device
  4. Image uploads and appears in your tag

Paste from Clipboard​

  1. Copy an image (from anywhere)
  2. Click in the editor
  3. Press Ctrl/Cmd + V
  4. Image is pasted as a new block

Drag and Drop​

  1. Drag an image file from your computer
  2. Drop it into the editor
  3. Image block is created automatically

From URL​

  1. Click + → Image
  2. Click From URL
  3. Paste the image URL
  4. Click Insert

Supported Formats​

FormatExtensionBest For
JPEG.jpg, .jpegPhotos
PNG.pngGraphics with transparency
GIF.gifSimple animations
WebP.webpOptimized web images
SVG.svgVector graphics, logos

Image Size Limits​

PlanMax SizeTotal Storage
Free5 MB per image100 MB
Pro25 MB per image1 GB
Optimize Before Uploading

Resize and compress images before uploading for better performance. Tools like TinyPNG or Squoosh can reduce file size without visible quality loss.

Image Options​

Click on an image to select it, then use the toolbar:

Sizing​

  • Small - 25% width
  • Medium - 50% width
  • Large - 75% width
  • Full - 100% width

Alignment​

  • Left - Align to left edge
  • Center - Center in container
  • Right - Align to right edge
  1. Click the link icon
  2. Enter a URL
  3. Clicking the image opens the link

Alt Text​

  1. Click ⋮ → Edit Alt Text
  2. Enter a description
  3. Important for accessibility and SEO

Captions​

Add captions below images:

  1. Click on the image
  2. Click Add Caption (or the caption area)
  3. Type your caption
  4. Click outside to save

Captions support basic formatting (bold, italic, links).

By default, clicking an image opens it in a lightbox:

  • Full-screen view
  • Zoom capability
  • Navigation for galleries
  • Close with X or click outside

Disable lightbox:

  1. Click ⋮ on the image
  2. Toggle off Enable Lightbox

Galleries​

Group multiple images together:

  1. Click + → Gallery
  2. Upload or select multiple images
  3. Images display in a grid layout

From Existing Images​

  1. Click ⋮ on an image
  2. Select Turn into Gallery
  3. Add more images to the gallery
  • Grid - Equal-sized thumbnails
  • Masonry - Variable height, flowing layout
  • Carousel - Swipeable slideshow
  1. Click on the gallery
  2. Drag images to reorder
  3. Click outside to save

Each image in a gallery can have its own caption, visible in lightbox view.

Image Editing​

Basic editing available within tagd-ai:

Crop​

  1. Click image → ⋮ → Crop
  2. Adjust the crop area
  3. Click Apply

Rotate​

  1. Click image → ⋮ → Rotate
  2. Choose rotation (90°, 180°, 270°)

Replace​

  1. Click image → ⋮ → Replace
  2. Upload or select new image
  3. Replaces while keeping settings

Image Performance​

Automatic Optimization​

tagd-ai automatically:

  • Converts large images to efficient formats
  • Creates multiple sizes for different devices
  • Lazy loads images (loads as user scrolls)
  • Caches images for faster repeat views

Best Practices​

  1. Start with quality - Upload high-res originals
  2. Use appropriate formats - JPEG for photos, PNG for graphics
  3. Consider mobile - Most viewers are on phones
  4. Limit gallery size - 10-20 images max for performance

Downloading Images​

Viewers can download images:

  1. Click the image to open lightbox
  2. Click the download icon
  3. Image saves to their device

Disable downloads:

  1. Click ⋮ → Settings
  2. Toggle off Allow Download

Troubleshooting​

Image Won't Upload​

  • Check file size (within limits)
  • Verify format is supported
  • Try a different browser
  • Check internet connection

Image Appears Blurry​

  • Original may be low resolution
  • Try uploading a higher quality version
  • Check sizing settings

Image Not Displaying​

  • Wait for upload to complete
  • Refresh the page
  • Check if storage limit reached

Slow Loading​

  • Optimize images before uploading
  • Reduce image dimensions
  • Use WebP format
  • Limit number of images per tag

Accessibility​

Make images accessible:

  1. Always add alt text - Describe the image content
  2. Use captions - Provide context
  3. Avoid text in images - Use real text blocks instead
  4. Consider color contrast - Don't rely solely on color

Next Steps​