![\"Description\"](\"image.jpg\")
\n<\/picture>\n“`<\/p>\n## Lazy Loading<\/p>\n
Defer loading images until they’re needed:<\/p>\n
“`html
\n
\n<\/p>\n
\n![\"\"](\"hero.jpg\")
\n“`<\/p>\n
### WordPress Lazy Loading<\/p>\n
“`php
\n\/\/ WordPress adds loading=”lazy” by default
\n\/\/ Disable for specific images
\nadd_filter(‘wp_img_tag_add_loading_attr’, function($value, $image, $context) {
\n \/\/ Don’t lazy load featured images
\n if ($context === ‘the_content’ && strpos($image, ‘wp-post-image’) !== false) {
\n return false;
\n }
\n return $value;
\n}, 10, 3);<\/p>\n
\/\/ Or use fetchpriority for LCP images
\nadd_filter(‘wp_get_attachment_image_attributes’, function($attr, $attachment) {
\n if (is_singular() && has_post_thumbnail() && get_post_thumbnail_id() == $attachment->ID) {
\n $attr[‘fetchpriority’] = ‘high’;
\n $attr[‘loading’] = ‘eager’;
\n }
\n return $attr;
\n}, 10, 2);
\n“`<\/p>\n
## Responsive Images<\/p>\n
Serve appropriate sizes for each device:<\/p>\n
“`html
\n
\n![\"Description\"\n](\"image-800.jpg\"\n)
\n“`<\/p>\n
### WordPress Responsive Images<\/p>\n
WordPress generates srcset automatically. Customize sizes:<\/p>\n
“`php
\n\/\/ Add custom image sizes
\nadd_image_size(‘card-thumbnail’, 400, 300, true);
\nadd_image_size(‘hero-large’, 1600, 900, true);<\/p>\n
\/\/ Customize srcset sizes
\nadd_filter(‘wp_calculate_image_sizes’, function($sizes, $size, $image_src, $image_meta) {
\n \/\/ For full-width images
\n if ($size[0] >= 1200) {
\n return ‘100vw’;
\n }
\n return $sizes;
\n}, 10, 4);
\n“`<\/p>\n
## Image Compression<\/p>\n
### Recommended Tools<\/p>\n
| Tool | Type | Compression |
\n|——|——|————-|
\n| ShortPixel | Plugin | Lossy\/Lossless |
\n| Imagify | Plugin | Lossy\/Lossless |
\n| Smush | Plugin | Lossless |
\n| Squoosh | Web app | Manual |
\n| ImageOptim | Mac app | Lossless |<\/p>\n
### Command Line Compression<\/p>\n
“`bash
\n# WebP conversion with cwebp
\ncwebp -q 80 input.jpg -o output.webp<\/p>\n
# Batch conversion
\nfor file in *.jpg; do
\n cwebp -q 80 “$file” -o “${file%.jpg}.webp”
\ndone<\/p>\n
# AVIF conversion
\navifenc –speed 6 –quality 70 input.jpg output.avif<\/p>\n
# Optimize existing JPEGs
\njpegoptim –strip-all –max=85 *.jpg<\/p>\n
# Optimize PNGs
\noptipng -o5 *.png
\n“`<\/p>\n
## SVG Optimization<\/p>\n
“`bash
\n# Install SVGO
\nnpm install -g svgo<\/p>\n
# Optimize SVG
\nsvgo input.svg -o output.svg<\/p>\n
# Batch optimize
\nsvgo -f .\/icons\/ -o .\/icons-optimized\/
\n“`<\/p>\n
### Safe SVG Upload<\/p>\n
“`php
\n\/\/ Allow SVG uploads (with sanitization)
\nadd_filter(‘upload_mimes’, function($mimes) {
\n $mimes[‘svg’] = ‘image\/svg+xml’;
\n return $mimes;
\n});<\/p>\n
\/\/ Sanitize SVG content
\nadd_filter(‘wp_handle_upload_prefilter’, function($file) {
\n if ($file[‘type’] === ‘image\/svg+xml’) {
\n \/\/ Use a library like SVG Sanitizer
\n $sanitizer = new enshrinedsvgSanitizeSanitizer();
\n $content = file_get_contents($file[‘tmp_name’]);
\n $clean = $sanitizer->sanitize($content);
\n file_put_contents($file[‘tmp_name’], $clean);
\n }
\n return $file;
\n});
\n“`<\/p>\n
## Preventing Layout Shift<\/p>\n
“`css
\n\/* Aspect ratio boxes *\/
\n.image-container {
\n aspect-ratio: 16 \/ 9;
\n overflow: hidden;
\n}<\/p>\n
.image-container img {
\n width: 100%;
\n height: 100%;
\n object-fit: cover;
\n}<\/p>\n
\/* Progressive loading placeholder *\/
\n.image-placeholder {
\n background: linear-gradient(135deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
\n background-size: 200% 100%;
\n animation: shimmer 1.5s infinite;
\n}<\/p>\n
@keyframes shimmer {
\n 0% { background-position: 200% 0; }
\n 100% { background-position: -200% 0; }
\n}
\n“`<\/p>\n
## CDN Image Optimization<\/p>\n
Many CDNs offer automatic image optimization:<\/p>\n
“`php
\n\/\/ Cloudflare Polish (automatic)
\n\/\/ BunnyCDN Image Processing
\n\/\/ Imgix\/Cloudinary URLs<\/p>\n
\/\/ Example: Dynamic resizing via CDN
\nfunction cdn_image_url($url, $width, $height = null) {
\n $base = ‘https:\/\/cdn.example.com\/’;
\n $params = “w={$width}”;
\n if ($height) {
\n $params .= “&h={$height}&fit=crop”;
\n }
\n return “{$base}{$url}?{$params}&format=auto&quality=80”;
\n}
\n“`<\/p>\n
## Next Steps<\/p>\n
In the next lesson, we’ll optimize database queries and clean up bloat.<\/p>\n
Optimize images with modern formats, lazy loading, responsive images, and compression.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":[],"tutorial_series":[],"lesson_level":[],"class_list":["post-318","lesson","type-lesson","status-publish","hentry"],"yoast_head":"\n