This tutorial walks you through preparing product photos for an e-commerce site. You will resize images to consistent dimensions, strip metadata that leaks location and device info, add a watermark, convert to WebP for smaller files, and combine everything into a single reusable command. By the end, you will have a batch script that processes an entire folder of photos in one run.Documentation Index
Fetch the complete documentation index at: https://hackmamba-3f164318.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
This tutorial assumes you have ImageMagick installed and have run basic commands. If you haven’t, start with Getting started.
Set up your working directory
Create a folder for this tutorial and add some test images:originals/. If not, create three test images at different sizes to simulate real-world input:
Step 1: Resize to consistent dimensions
E-commerce platforms typically need images at a fixed maximum size. Resize a single image to fit within 800x800 pixels:Example The third column
identify line (dimensions in field 3; yours may differ slightly by build):800x600 confirms your 2400×1800 source was shrunk to fit inside 800×800 (aspect ratio preserved). The resize step uses a trailing greater-than on the geometry so ImageMagick only shrinks: fit inside 800×800, keep aspect ratio, and never upscale a small source. Try the same resize on the other two images to see how portrait and square inputs behave.The Geometry syntax reference covers every modifier in detail.Step 2: Strip metadata
Photos from cameras and phones carry metadata that can include GPS coordinates, device info, and timestamps. For a public storefront, strip it:You should still see the same geometry as the source (e.g.
800x600 after the earlier resize). Metadata is gone from the file; use magick identify -verbose step-stripped.jpg | head if you want to confirm profile/EXIF fields disappeared.Step 3: Add a watermark
Watermarking has two parts: creating the watermark image and compositing it onto the product photo.Create the watermark. This makes a transparent PNG with white text:You now have a Use your own font name (see Example (geometry should match your resized photo; JPEG because this step still writes The
watermark.png with SAMPLE on a transparent canvas. PNG: writes a normal PNG; because the image still has an alpha channel from xc:none, transparency is kept. Use PNG32:watermark.png instead if you ever need to force a 32-bit RGBA file on disk (some older tools expect that explicit depth).Tweak the label: change the string in quotes, or adjust color, size, and font:magick -list font) and point size so the watermark fits your product frame.Apply the watermark. Composite it onto a product photo, positioned in the bottom-right corner:.jpg):-gravity SouthEast -geometry +20+20 places the watermark 20 pixels from the bottom-right edges.Step 4: Convert to WebP
WebP produces smaller files than JPEG at comparable visual quality. Convert an image and set the compression level:Example (this step reads the original full-size JPEG, so dimensions stay large until Step 5):ImageMagick determines the output format from the
.webp extension. The -quality value controls lossy compression for that write; see -quality for how to choose numbers across JPEG and WebP.Step 5: Combine everything into one command
Each step you have learned so far is an operation that ImageMagick processes left to right. You can combine them all into a single Walk the combined command (read in order):Example line:The WEBP token and
magick call. In bash, \ must be the last character on a line; do not put inline # comments after a continuation backslash.Full pipeline (copy-paste):- Load:
magick originals/input.jpgwith a line continuation (backslash as the last character on the line) so the pipeline can span multiple lines. - Resize (operator):
-resize '800x800>'runs here: it shrinks large photos to fit inside the box while preserving aspect ratio, and it does not upscale smaller sources. - Strip (operator):
-stripremoves EXIF, comments, and color profiles you usually do not want on public web assets, applied as soon as it is reached. - Second input:
watermark.pngpushes a second image onto the stack so the next operators can composite it onto the base photo. - Position:
-gravity SouthEast -geometry +20+20anchors the watermark 20px from the bottom-right edges of the resized photo. - Composite (operator):
-compositemerges the overlay with the base image using the current gravity and geometry at this point in the command. - Quality (setting):
-quality 85sets WebP compression for the next lossy write (this repo uses 85 as a shared default in examples; tune as needed; see -quality). - Write:
processed/input.webpis the output path; ImageMagick determines the encoder from the.webpextension.
800x600 (or your aspect-correct size) confirm the pipeline wrote a WebP at the expected dimensions. One command turns a raw product photo into a web-ready, watermarked, metadata-free WebP.Clean up
Remove the intermediate test files you created during the tutorial:watermark.png, originals/, and processed/ folders. The watermark and the batch script are reusable for future product photo batches.
Next steps
This tutorial covered resizing with only-shrink geometry, stripping metadata with-strip, building a simple watermark with xc:none and -annotate, compositing with -gravity / -geometry / -composite, writing WebP with -quality, and chaining those pieces into one magick line. Here is where to go next:
- Batch resize and optimize for web for subdirectory trees, JPEG file-size ceilings, and more resize modes in production scripts.
- Geometry syntax reference for every resize modifier on dimension strings.
- Common options reference for
-strip,-quality,-composite, and related flags in one place. - Install and first commands if you need to revisit operators vs. settings or installation checks.