GFS Design System — Photo Resizer — Product Photo Management

Developer Tools

Brand System v10.0 -- Photo Resizer

Photo
Resizer

Browser-based product photo resizing. No server, no installs, no uploads.

Replicates the Python resize.py tool entirely in the browser using the Canvas API. Upload a product photo, select a brand, and generate all 4 standard variants in seconds. Everything stays local.

4 Variants 8 Brands Client-Side Canvas API

Document ID GFS-2026-PHOTORESIZER

Region Global
Status Active
Version 1.0
Date 05 / 19 / 2026
Classification Developer Tool
Output Variants 4
Brands Supported 8
Owner Global Food Solutions, Inc.

02Photo Resizer ToolUpload / Configure / Resize / Download

Upload a product photo, select the brand and item code, then resize to generate all 4 standard variants. All processing happens in-browser using the Canvas API. No files leave your machine.

Drop product photo here or click to browse

JPG, PNG, WebP, TIFF, BMP -- any resolution

Brand

Item Code

Quality 85

Auto white background

Replaces transparent/dark areas with #FFFFFF

Target: <200KB per file

All processing runs client-side via Canvas API. No images are uploaded to any server.

03Batch UploadMultiple Photos / Queue / Bulk Processing

Upload multiple product photos at once. Each photo will be queued and processed with the selected brand and quality settings. Item codes are derived from filenames.

Drop multiple photos or click to browse

Select multiple files at once -- all formats supported

Batch processing uses the same brand and quality settings from Section 02. Item codes are derived from filenames.

04Output Specifications4 Variants / Dimensions / Naming Conventions

Every product photo generates exactly 4 variants. These match the output of the Python resize.py tool and cover all standard use cases across the GFS marketing and operations pipeline.

Variant	Dimensions	Aspect	Use Case	File Naming
1x1	`1800 x 1800`	Square	Instagram, social media posts, product thumbnails	`{itemcode}_1x1.jpg`
4x3	`1800 x 1350`	Standard	Product catalog, brochures, print materials	`{itemcode}_4x3.jpg`
3x2	`1800 x 1200`	Landscape	Website hero banners, email headers	`{itemcode}_3x2.jpg`
spec	`1200 x 800`	Spec sheet	Spec sheets, documents, internal records	`{itemcode}_spec.jpg`

Naming Example

        Input: product_photo.png + Item Code: 110393

        Output: 110393_1x1.jpg 110393_4x3.jpg 110393_3x2.jpg 110393_spec.jpg

05Brand Photo GuidelinesPhotography Standards / Per-Brand Rules

All product photography follows a shared standard. These guidelines ensure visual consistency across all 8 GFS brands, whether photos are shot in-house or by third-party studios.

Background

Pure white (#FFFFFF) for all product shots. No gradients, no textured surfaces, no colored backdrops. The resizer enforces this with the auto white background option.

Lighting

Even, diffused lighting from multiple sources. No harsh shadows, no hot spots, no visible reflections on packaging. Aim for flat, consistent illumination across the product surface.

Angle

Front-facing with a slight elevation (10-15 degrees). Product label must be fully readable. For bags and pouches, a slight tilt to show depth is acceptable.

Fill

Product should fill 85-98% of the frame. Minimal padding around edges. The resizer handles cropping and positioning -- shoot tight.

Props

No props for standard product shots. Exception: Alfresco Italian may include plated food in lifestyle variants. All other brands use isolated product-only images.

Source File Naming

Original files should be named {ITEMCODE}_original.{ext} before processing. This ensures clean output naming when batch processing through the resizer.

Supported Brands

Global Food Solutions

Right Start Foods

Power Up Foods

Melt Mates

Alfresco Italian

Branson's Roadhouse

Harvest Promise

Tijuana Tortilla

All brands share the same 4-variant output structure. Brand-specific rules apply to photography setup, not resizer output.

06Quality SettingsCompression / Format / Output Constraints

Every output image follows these specifications. The resizer enforces these constraints automatically. Adjusting the quality slider changes JPEG compression but the other parameters are fixed.

Parameter	Value	Notes
Maximum File Size	`200KB`	Per image. Quality is reduced automatically if output exceeds this threshold.
Format	`JPEG`	All inputs (PNG, WebP, TIFF, BMP) are converted to JPEG on output.
Color Space	`sRGB`	Canvas API renders in sRGB by default. No color profile conversion needed.
Resolution	`72 DPI`	Web-optimized. Print materials should use the original high-resolution source.
Compression	`Progressive JPEG`	Browser Canvas API outputs baseline JPEG. Progressive encoding requires the Python tool.
Default Quality	`85`	Range: 60-95. Lower values reduce file size at the cost of visible artifacts.
Background	`#FFFFFF`	White fill applied before compositing when auto white background is enabled.

SIZE ENFORCEMENT

If a variant exceeds 200KB at the selected quality, the resizer automatically reduces quality in steps of 5 until the file fits. The actual quality used is shown on each variant card. If quality drops below 60, the file is output at 60 with a warning.

07Integration with Design SystemFile Structure / Workflow / Brand Pages

Resized photos feed directly into the GFS design system brand pages. This section documents the file structure, naming conventions, and workflow for adding new product photos to the system.

File Structure

brand-assets/ right-start-foods/ photos/ 110393_1x1.jpg 110393_4x3.jpg 110393_3x2.jpg 110393_spec.jpg power-up-foods/ photos/ ... same structure per brand melt-mates/ photos/ global-food-solutions/ photos/ alfresco-italian/ photos/ bransons-roadhouse/ photos/ harvest-promise/ photos/ tijuana-tortilla/ photos/

Workflow: Adding New Product Photos

Step	Action	Tool
1	Photograph product against white background per brand guidelines	Camera / Studio
2	Name source file as {ITEMCODE}_original.{ext}	File system
3	Upload to this Photo Resizer tool or run Python resize.py	This page or CLI
4	Download all 4 variants	This page
5	Place files in brand-assets/{brand}/photos/	File system / Dropbox
6	Reference in brand page HTML using standard image paths	Code editor

Naming Convention

All filenames use lowercase, hyphens for brand folder names, underscores for file variants. Item codes are always uppercase alphanumeric. No spaces, no special characters.

The Python resize.py tool and this browser tool produce identical output for the same input and settings.

08Python Tool ReferenceCLI Alternative / resize.py / Pillow

The browser tool above replicates the Python CLI tool. For batch processing large volumes or automated pipelines, use the Python version directly. Both tools produce identical output.

Property	Detail
Location	`Dropbox/GFS x Claude AI/Claude_Photo Resizer/`
Requirements	Python 3 + Pillow (`pip install Pillow`)
Usage	Drop photos in `input/{brand}/`, run `python resize.py`
Output	4 variants per photo in `output/{brand}/{itemcode}/`
Supported Formats	JPG, PNG, TIFF, BMP, WebP
Features	Auto-trim whitespace, background replacement, center-crop vs fit-on-canvas, brand-specific rules
Brand Folders	8 brand folders pre-configured in both input/ and output/ directories

Python Tool File Structure

Claude_Photo Resizer/ resize.py -- main script input/ right-start-foods/ -- drop source photos here power-up-foods/ melt-mates/ global-food-solutions/ alfresco-italian/ bransons-roadhouse/ harvest-promise/ tijuana-tortilla/ output/ right-start-foods/ -- resized variants appear here power-up-foods/ ... (mirrors input structure)

See tools-ecosystem.html for the full tool catalog entry. The Python tool handles progressive JPEG encoding that the browser Canvas API cannot.