Responsive layouts have become commonplace in today’s web experiences, but the current HTML <img> element still has a fundamental flaw when used with responsive designs: It assumes uniformity in the screens it’s displayed upon, a uniformity that doesn’t exist in today’s mobile-saturated world.

Consider an image on a web page from the viewer’s perspective. Although it appears to be part of the page, it’s actually a replaced element: The code of the page cuts a hole in the page big enough to contain the image, and then retrieves it from its remote location to fill that hole. In some cases the hole has a specified width and height; in others the hole is built to be flexible and scale to a percentage, or proportion, of the screen size.

One of the most popular requests I’ve received from lynda.com members is for a course on how to build WordPress themes from scratch. I’m excited to announce that WordPress: Building Themes from Scratch Using Underscores has finally come to fruition. The course is an introduction to WordPress theme design and development, a best-practice example of a mobile-first, standards-based web development process, and a first-hand look at my personal approach to custom WordPress projects. Just as importantly, it’s an introduction to Simone—the WordPress theme that I build in the course itself, which is now available for free in the WordPress Theme Directory.

As mobile and tablet Internet usage continues to grow, responsive web design becomes more and more important. Some reports suggest that mobile Internet usage may actually surpass desktop usage this year. For any website not taking advantage of responsive design, this means a loss of traffic and fewer conversions.

When creating a responsive website, it’s especially important to know the best practices for images and media. In this article, we’ll talk about bitmap-based web graphics, including JPG, GIF, and PNG, as well as video.

As mobile web usage continues to rise, it’s increasingly important that your website functions across all types of devices and screen sizes. The smartest way to provide the best user experience (UX) for today’s technology is to create a website with a responsive design.