Where I've Worked
Wishlist

2007 - 2025

17 Years Work Experience

Across The African Continent

Kenya Flag South Africa Flag Uganda Flag Rwanda Flag Ethiopia Flag Namibia Flag Ghana Flag Senegal Flag Gambia Flag Guinea Bissau Flag

I have been blessed to have worked in 10 different countries, interact with extremely talented individuals from various cultures and lead brilliant teams (both remotely and in-person). Some of the roles I have played over the years are:

  • Network Administrator
  • Webmaster
  • Interactive Software Designer
  • Senior Frontend Developer
  • User Experience Designer
  • Project & Product Manager
  • Business Intelligence
  • Digital Brand Strategist
  • Head of Technology
  • Marketing & Communications Consultant
  • Solutions Architect

Can 1 Image Cater To All These Devices

Technology 2025 Content Creation Managers
Modern Day Imagery
The Universal Asset Myth

An average user accesses the internet from an estimated 3 different devices, and technology is keeping up with how to present content to them. Those devices namely are TV, PC and Mobile. Each of these devices has a different resolution size despite all being HD/FHD/QHD, and those pixels are also contained in different housing sizes (21 inch - 80+ inches). The same applies to your workstation where you are most likely reading this from and your mobile phone as well, is it realistic to expect 1 image to cater to all these devices?

The Devices

When it comes to screens, size really does matter. From the cozy 5-inch mobile device glued to your hand, up to sprawling 80-inch TVs dominating living rooms, each device screams for images tailored to its unique pixel playground. Resolutions like HD, FHD, or QHD might sound fancy, but squeezed into screens of wildly varying dimensions, the same image can end up looking like either a masterpiece or a pixelated mess. Understanding your users’ devices—TV, PC, mobile—is the first crucial step toward smart image delivery that doesn’t make them squint or zoom frantically. Did you know that as of mid-2025, roughly 62% of global web traffic comes from mobile devices, while desktops account for just about 36%?

Range of devices
Tablets and laptops fill in the gaps between mobile and PC monitors here, but the important thing to focus on is the actual dimensions available on each device e.g. an 8inch tablet might have the same resolution as a 16" laptop.

See the Pen Device Media Query Strategy by Stig Njiru (@Stig-Njiru) on CodePen.

Modern Imagery

Gone are the days when a single static image could survive in the wild. Modern web design mimics a diverse digital ecosystem, requiring content that acts like an adaptive organism—shifting forms to thrive in the varying climates of screen real estate, connection speeds, and color schemes. To enable this adaptation, technologies like the `picture` element and `srcset` attributes empower browsers to fetch the best fitting image from a family of assets, cutting down on wasted pixels and bandwidth. Plus, formats like WebP and AVIF bring snappy load times and razor-sharp clarity, ensuring images flex effortlessly from your phone to your giant smart TV without breaking a sweat.

See the Pen Picture Element by Stig Njiru (@Stig-Njiru) on CodePen.

File Size Comparisons
For those curious on the potential file size saving vis-a-vis load time savings have a look at this chart and give a shoutout to Google for the WebP format (realistically averaging up to 4x faster loads times for similar if not better image quality over traditional jpegs).

Solutions (The High-Efficiency Strategic Win)

So, can one image fix all? The short answer: no — but with smart strategies, one image concept can serve multiple devices.

Current Active Approach
  • Employing techniques like responsive images, lazy loading, and content delivery networks (CDNs) does the heavy lifting.
  • Offload complexity to services like AWS CloudFront with Lambda@Edge, which can dynamically optimize images on the fly.
  • Combine this with client hints that inform the server about device capabilities, and voilà: users get tailor-made visuals without your server breaking a sweat.
Creative & Optimized Approach
  • A meeting of the minds with the photographer/designer, the same image should be captured in landscape and portrait mode (see the below slider on base guidelines).
  • Agree with designer/dev on a baseline breakpoint for your use case e.g. 1024px where everything above is considered landscape anything below portrait.
  • Always adjust the rule of thirds height to factor in different users have different toolbars/bookmarks (10% is a decent average).
Center Aligned Image With Maya Applied
The 1024px breakpoint is the strategic bridge—covering entry-level desktops and high-end tablet landscapes. Maintain the 1920x1080px source dimensions but serve via WebP to maintain high visual fidelity at a fraction of the file size.
Left Aligned Image With Maya Applied
Regardless of page alignment, the photography must adapt to keep the product in focus. We aren't just optimizing for file size; we are ensuring the core message remains impactful across every viewport.
Right Aligned Image With Maya Applied
The beauty of this approach is that it fosters genuine team synergy. It aligns design and dev on a shared goal — User Experience — and transforms abstract debates into a clear, actionable Content SOP.

Summary

Fewer media queries required as demonstrated in the above pen, great team synergy and overall improved user experience. Win win win. A single image rarely reigns supreme across the vast landscape of devices, but leveraging modern web standards and cloud technologies means you don’t have to create a separate image for every gadget in your users’ hands. By embracing responsive imagery, smart formats, and dynamic delivery, your site stays swift, sharp, and savvy—no matter where it’s seen.


Want to unlock the full potential of serverless image optimization and UX design tailored for every device? Let’s connect and make your content shine across screens big and small.