Introduction to Computer Science
Learn the fundamentals of programming and computational thinking in this comprehensive beginner course.
Basic Image Optimization
Automatic format conversion and size optimization
Automatic Optimization
This image is automatically optimized by Astro. It's converted to modern formats (AVIF, WebP) when supported, resized to multiple dimensions for responsive display, and lazy-loaded to improve page performance. The original 1000x667 image is served in the most efficient format for each browser.
Art-Directed Responsive Images
Different images for different screen sizes
<ResponsivePicture
src="/src/assets/images/university-campus-1.jpg"
alt="University main building"
widths={[400, 800, 1200, 1600]}
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 1200px"
formats={['avif', 'webp']}
aspectRatio="16/9"
/> Real-World Usage Example
Course cards with optimized images
Interactive Image Gallery
Click any image to view in lightbox
24/7 Library Access
Modern Dining Facilities
Historic Architecture
Celebrating Success
Image Format Comparison
See the benefits of modern image formats
Original JPEG
Traditional JPEG format
File size: ~85KB
WebP Format
Modern WebP format
File size: ~45KB (47% smaller)
AVIF Format
Cutting-edge AVIF format
File size: ~35KB (59% smaller)
Performance Benefits
Key optimization features implemented
🚀 Lazy Loading
Images load only when they're about to enter the viewport, reducing initial page load time.
📐 Responsive Sizes
Multiple image sizes generated automatically, serving the right size for each device.
🎨 Modern Formats
Automatic conversion to AVIF and WebP formats for browsers that support them.
⚡ Sharp Processing
High-performance image processing with Sharp library for fast builds.
💾 Build-time Optimization
Images optimized during build, no runtime processing needed.
🎯 Smart Loading
Above-the-fold images loaded eagerly, others lazy-loaded for optimal performance.