We needed a single HTML file to be served to all users, although manipulating the HTML with JavaScript after it has loaded is acceptable. This means that we didn’t want to use server-side device detection or a cookie-based solution that serves multiple versions of the HTML. With a website that gets traffic peaks of over 10,000 requests per second, we wanted to keep the server logic as simple as possible. Let’s go through these requirements and see what they mean. We started out by creating a simple specification in order to select a suitable responsive image solution. Please note that this project covered only a responsive mobile website but do not worry - the technique presented here applies to all types of responsive websites. We started out by researching other responsive image techniques, but because none of them was a perfect match, we ended up combining some of the best hacks into our own solution. Saving just 100 KB of image data per page view would translate into a lot of terabytes of data traffic saved in Sweden per year. With that amount of users, we felt it was our responsibility to make a fast and well-optimized website. Losing Users If Responsive Web Design Is Your Only Mobile Strategy.Leaner Responsive Images With Client Hints.Efficient Image Resizing With ImageMagick.Aftonbladet is Sweden’s largest website, and its mobile version gets about 3 million unique users and up to 100 million page views per week. We were fortunate enough to be a part of the team that built a new responsive mobile website for Aftonbladet. The techniques presented here are the result of a few weeks of research that we did in October 2012. ![]() In this article, we will share our responsive image technique, the “padding-bottom” technique, which we researched and implemented on the mobile version of the Swedish news website Aftonbladet. ![]() Responsive design for images is about optimizing the process of serving images to users. We have users with unlimited high-speed broadband as well as users who pay money for each megabyte transferred. Responsive design for images is about optimizing the process of serving images to users.įive-inch mobile devices are on the market that have the same screen resolution as 50-inch TVs. Five-inch mobile devices are on the market that have the same screen resolution as 50-inch TVs.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |