Mobile-First Design: Where to Start
Why designing for small screens first makes the entire process easier. Covers the philosophy and practical steps to get started.
Performance and Responsive Images
Serving the right image size to each device speeds up loading times. Learn srcset, picture elements, and practical optimization techniques.
Why Image Optimization Matters
Images make up about 80% of a webpage’s total file size. That’s huge. If you’re not optimizing images for different devices, you’re making mobile visitors wait unnecessarily while desktop users download oversized files they don’t need.
The good news? Modern HTML gives us tools to serve exactly the right image to each device. We’re not talking about complex server-side solutions here — just smart markup that works today.
01
Understanding srcset and sizes
The srcset attribute lets you provide multiple image versions. You’re essentially telling the browser: “Here’s a small version for phones, a medium version for tablets, and a large version for desktops. Pick the one that makes sense.”
It’s actually simpler than it sounds. You list your images with their widths, and the browser handles the rest. No JavaScript, no guessing games. A phone gets the 480px version. A desktop gets the 1200px version. Everyone’s happy.
The sizes attribute tells the browser how wide the image will be displayed. If you say the image takes up 100% of the viewport on mobile but only 50% on desktop, the browser can make a smarter choice about which version to load.
02
The picture element approach
Sometimes srcset isn’t enough. Maybe you want to show a completely different image on mobile — cropped differently, or even a different subject altogether. That’s where the picture element comes in.
Picture gives you control. You can serve an art-directed image for tablets, a different one for mobile, and a fallback for older browsers. It’s like having multiple images and saying “use this one when the screen is small, that one when it’s medium, and this other one for desktop.”
The syntax takes a minute to learn, but once you’ve done it a few times it becomes automatic. And the browser support is solid now — we’re not dealing with edge cases anymore.
03
File format selection and compression
You’ve probably heard about WebP. It’s smaller than JPEG but browsers were slow to adopt it. Now? Most modern browsers support it, so you should too. You can use picture with a WebP source and fall back to JPEG for older browsers.
But here’s the thing — even the best format won’t help if you’re starting with a massive file. Compress first, format second. We’re talking about tools like TinyPNG, ImageOptim, or even Squoosh (Google’s free web tool). A 5MB photo becomes 200KB. The difference is noticeable, especially for people on slower connections.
SVGs for icons and logos. JPEG for photos. PNG when you need transparency. WebP as a modern alternative with fallbacks. This simple rule covers 95% of what you’ll encounter on real projects.
Putting it all together
Responsive images aren’t complicated once you break them down. You’re doing three things: providing multiple sizes via srcset, offering different crops or formats via picture, and compressing aggressively before you even start.
Start with srcset on your most important images. Then add picture elements where art direction makes a difference. Compress everything. Run your site through a tool like GTmetrix to see what’s actually happening with your images. You’ll probably be surprised by the improvement you can make in just an hour or two.
Quick checklist
- Create 2-3 image versions for each photo (small, medium, large)
- Add srcset and sizes to all major images
- Use picture element for art direction when needed
- Compress every image before uploading
- Test on real devices to see actual load times
Educational content
This article is provided for educational purposes to help you understand responsive image techniques. Implementation details may vary based on your specific project requirements, server setup, and target audience. Always test your implementation across multiple devices and browsers to ensure it works as intended for your particular use case.
Continue learning
