When you automate the cropping of user-generated images in your Web application, some images inevitably get cropped in less than ideal ways. This article demonstrates how a content-aware algorithm can help to keep the areas of interest in your crops, regardless of the overall image layout. Includes code examples.
"Every image is unique in its content, and every visitor to your website has a different device, resolution, browser and network speed. It is challenging to deliver an optimal image to every user, especially when you need to scale that up to hundreds, thousands or millions of images."
This article discusses the challenges that web and mobile developers face and introduces a cloud based solution for automatic content-aware and context-aware image adaptation: automatic cropping, intelligent content-aware encoding, dynamic format selection and automatic responsive images using Client Hints.
This article describes cloud-based on-the-fly image manipulation URLs that support defining advanced conditions for dynamically generating different results based on each image's dimensions, aspect ratio, auto detected faces and more. Sample code included for Javascript, PHP, Node,js, Ruby on Rails and more.
This article introduces Cloudinary's new JavaScript library that accelerates web development by providing automated image manipulation and management with a few lines of code. The library is jQuery-free plain Javascript.
This post by Eric Portis explains how to adapt your images according to the art direction of your website's responsive layout using the HTML5 picture element, while dynamically generating cropped and resized versions of the images in the cloud using Cloudinary.
The article covers the challenges of selecting the optimal number of images for your responsive website and introduces the free Responsive Image Breakpoints Generator web tool.
This article explains how to create responsive images using modern HTML5 image tag techniques, while dynamically generating resized versions of the images in the cloud using Cloudinary. Dynamic manipulation URLs are included as well as code samples for Javascript, PHP, Node.js, Ruby on Rails and more.
This article explains how to automatically distort images using dynamic image manipulation URLs. You can consistently shape and customize your images to fit any underlying image and any quadrilateral shape. The shear and distort image effects are especially useful when used together with image overlays to create 3D perspectives. Sample code included for Ruby, Javascript (Node.js), PHP and more.
FLIF is a new lossless image format that promised to be superior to the popular PNG format. This article describes comprehensive benchmark tests that verify that FLIF indeed outperforms PNG, WebP and other lossless formats.
See also FLIF introduction on Hacker News earlier this month:
https://news.ycombinator.com/item?id=10317790
Images account for almost 63% of the bytes of the average web page. This article talks about 3 recent image handling mistakes of developers and how to solve them, as well as a review of the top 10 common mistakes that web developers make in handling images of websites.
