Playing with Image Adaptation - Image Resizing and Image Cropping

Image Adaptation - Block of Wood

Sending the Right Image for the Right Device

In today’s world, technology is ubiquitous and speed is imperative. Between desktops, laptops, tablets, smart phones, watches, and other wearables, there are thousands of screen sizes and device types that can access the web. Web designers have quite a task at their hands to deliver the right sized images to the right device without bogging down performance so that users have the optimal online experience.
The choices are usually “one image for all devices and screens” or “manually create a bunch of images for popular devices/screen resolutions.” The first option, while easier, causes massive performance penalties for all your users on mobile devices. The second option works for your perfect match, but on a more obscure device or screen resolution, you’re out of luck. There’s also the sheer effort of creating and maintaining multiple versions of the same image. Multiply that by thousands of images and it gets complicated really quickly.

The good news? There’s a third option: automatic resizing and cropping of your images, at run-time, with image optimizations.

Image Adaptation can automatically resize or crop an image for a device, for millions of images, with just a URL query string parameter, providing you deep control over the adaptation process. This Playground demo shows you why you need an image adaptation service to get the best image for every device!

Automatically Resize and Crop Images at Scale

Let’s take a closer look at the image of the camera in the product library. The Playground will automatically display the image on the iPhone 5 device with Image Adaptation turned off. The image dimensions are 1000 x 667, requiring nearly 2000 kB of memory when the device only has a screen size of 420 x 568. By sending the same file to every device regardless of device type or screen size, precious network bandwidth is being utilized by large files being sent down to a small devices over a wireless connection and significant amounts of memory are being consumed, causing the website to be slow and laggy.

With Image Adaptation turned on, the service reads the original image, and resizes/crops it as requested, caching the resized/cropped image for future delivery to other users. The appropriately-sized image is then sent to the device, and the improvements with image dimensions, file size, byte size and memory are obvious. With our image adaption service, the image is automatically optimized for the end user’s device, ultimately reducing the file size and memory needed for distribution and dramatically reducing download times by about 25%.

Image Cropping Example

Let’s take a look at image cropping as well. Image adaptation allows you to specify how you want an image to be cropped using query string parameters in your IMG tags, and then crops that image on demand. 

Image Resizing Example

Image cropping is very useful in certain circumstances, where resizing an image loses valuable detail and just cropping it provides a clearer, more visible representation.

Try it Yourself!

It is clear that manual manipulation of images to fit the right form factor is not a scalable option given the continuous evolution of new device types and screen sizes. Instart Logic’s on-demand Image Adaptation perfectly resizes and crops your image automatically, allowing you to send the right image size to the right device without compromising performance and alleviating manual effort.

Select any of the images in the Playground library that best relate to the type of images your site uses and discover how our Image Adaptation service works.