mirror of https://github.com/compiler-explorer/compiler-explorer.git synced 2025-12-27 10:33:59 -05:00

Files

Matt Godbolt 0eee48a0fb Optimize logo file sizes to reduce webpack bundle size (#7979 )

## Summary
- Optimized 13 logo files, reducing total size by ~560KB
- Converted hylo.svg (321KB) and nim.svg (126KB) to optimized PNGs
(27KB, 13KB)
- Resized oversized images to max 256×256 while preserving aspect ratios
- Optimized SVGs with SVGO where beneficial
- Fixed file permissions (removed execute bits from image files)
- Added comprehensive README.md with optimization guidelines

## Files Changed
- `lib/languages.ts`: Updated references from hylo.svg → hylo.png,
nim.svg → nim.png
- `public/logos/`: Optimized multiple logo files
- `public/logos/README.md`: New optimization guidelines for future logo
additions

## Size Reductions
- hylo.svg → hylo.png: 321KB → 27KB (92% reduction)
- nim.svg → nim.png: 126KB → 13KB (90% reduction)  
- scala.png: 79KB → 14KB (82% reduction)
- haskell.png: 19KB → 6.5KB (66% reduction)
- pony.svg: 53KB → 35KB (34% reduction)
- odin.png: 48KB → 27KB (44% reduction)
- nix.svg: 26KB → 5KB (81% reduction)
- gimple.svg: 21KB → 11KB (48% reduction)
- spice.png: 16KB → 9.3KB (42% reduction)
- hook.png: 14KB → 9.3KB (34% reduction)
- hook-dark.png: 13KB → 9.3KB (28% reduction)

## Test plan
- [x] Verify all logos display correctly in the language selection UI
- [x] Confirm no broken image references
- [x] Check that webpack bundle size warnings are reduced
- [x] Ensure visual quality is acceptable at small icon sizes

🤖 Generated with [Claude Code](https://claude.ai/code)

---------

Co-authored-by: Claude <noreply@anthropic.com>

2025-07-31 16:07:04 -05:00

1.6 KiB

Raw Blame History

Logo Optimization Guidelines

This directory contains logos for programming languages displayed in Compiler Explorer. To maintain fast loading times and reasonable bundle sizes, logos should be optimized before adding them.

Size Guidelines

Target size: Keep individual logos under 20KB when possible
Maximum dimensions: 256×256 pixels (preserving aspect ratio)
File formats: SVG preferred for simple graphics, PNG for complex images

Optimization Tools & Commands

PNG Images

# Resize and optimize (preserves aspect ratio)
convert input.png -resize 256x256> -quality 85 output.png

# Alternative with pngquant for better compression
pngquant --quality=65-80 --output output.png input.png

SVG Images

# Optimize with SVGO (install with: npm install -g svgo)
npx svgo input.svg --output output.svg

# For SVGs with embedded raster data, convert to PNG instead
convert input.svg -resize 256x256 -quality 85 output.png

Common Issues

Embedded Base64 data in SVGs: These are usually very large (300KB+). Convert to PNG instead.
Oversized PNGs: Images over 1000px wide/tall should be resized to 256×256 or smaller.
16-bit PNGs: Convert to 8-bit with convert input.png -depth 8 output.png

Recent Optimizations

Examples of successful optimizations:

hylo.svg (321KB) → hylo.png (27KB) - 92% reduction
nim.svg (126KB) → nim.png (13KB) - 90% reduction
scala.png (79KB) → optimized (14KB) - 82% reduction

Always test that optimized logos look good at small icon sizes (16-32px) in the UI.

1.6 KiB Raw Blame History Unescape Escape