Directory
Loading speed matters: optimise images so recruiters never bounce from your site
Two extra seconds of loading time can cost you a casting call. This guide shows you how to optimise images so your portfolio pages open instantly, impress recruiters and climb search results—all without sacrificing visual quality.
Why page speed determines who gets shortlisted
Recruiters have tight deadlines. When a gallery drags, they leave and click on a faster competitor. Studies from Google report that bounce probability rises from 10 % at a one-second load to almost 50 % at five seconds. Fast sites also score higher in Core Web Vitals, giving you an SEO boost and pushing your profile above slower rivals.
Fast, accessible pages win twice: they keep humans engaged and satisfy algorithms. By mastering image optimisation, you address both.
Step-by-step image optimisation workflow
1. Audit current image weight
Start with an inventory. Tools like Lighthouse or WebPageTest list every image, its file size and load contribution. Flag any file above 250 KB for compression or replacement.
2. Pick the ideal format for each visual
| Format | Typical size drop vs JPEG | Browser support | Best use |
|---|---|---|---|
| WebP | -30 % | 97 % modern browsers | General photography |
| AVIF | -50 % | 75 % and rising | High-detail stills |
| SVG | Scales lossless | All major | Logos & icons |
| JPEG 2000/XL | -25 % | Safari, Chrome test | Fallback when AVIF unsupported |
3. Compress smartly, not brutally
Use a quality setting between 70 and 80 for WebP or 40 for AVIF. Modern encoders like Squoosh or ImageMagick's libaom-av1 preserve visual fidelity while halving weight. Always compare thumbnails at 200 % zoom before publishing.
4. Serve responsive images
Add srcset and sizes attributes so each device downloads only the required resolution. For example, a hero image might offer 320 px, 640 px and 1280 px widths. Mobile visitors save data; desktops get crisp detail.
5. Lazy-load below-the-fold visuals
Implement the native loading="lazy" attribute or Intersection Observer. Above-the-fold content becomes interactive sooner, reducing perceived load time.
Benchmark: faster pages, lower bounce
Source : Think with Google
Quick wins you can apply today
- Convert all PNG photos to WebP; keep PNG only for transparency-heavy graphics.
- Add
widthandheightattributes to prevent layout shift. - Use a CDN that supports on-the-fly image resizing.
- Bundle optimisation with broader UX tweaks like mobile-first portfolio design (article available soon) for compound gains.
- Pair speed with accessibility—ARIA labels and semantic HTML—by referencing accessibility best practices (article available soon).
- Refresh thumbnails following the guidance in thumbnail optimisation tactics.
Case study: 1-second makeover inspires more callbacks
After switching hero shots from 1.8 MB JPEGs to 320 KB WebP, a voice-actor saw page speed jump from 4.2 s to 1.9 s on 4G. Recruiter dwell time doubled, enquiries rose 27 % and the profile climbed two positions in directory search results. You can see similar lightning-fast showcases in Artfolio's newest blazing-fast portfolios.
FAQ
- How small should my hero image be?
- Aim for under 500 KB on desktop and under 200 KB for the mobile variant. Use responsive srcset to serve the right version automatically.
- Will compression ruin my colours?
- Modern codecs are perceptually tuned. At quality 80 (WebP) or 40 (AVIF) most users see no difference. Always compare side by side before publishing.
- Can I optimise existing images without re-uploading?
- Yes. Many CDNs (Cloudflare, Bunny, ImageKit) offer real-time re-encoding and resizing. Activate the feature, purge cache and your existing URLs serve lighter files instantly.
Test your image optimisation IQ
Next steps: lock in faster pages now
Optimise five heaviest images tonight, retest with PageSpeed Insights and watch your score—and recruiter engagement—climb. Need a deeper audit? Book a 30-minute call and let's supercharge your entire portfolio.
