This is a guest post by Eric Portis – a proud member of (and newsletter-writer for) the Responsive Issues Community Group. The RICG formulated, championed, and standardized the new HTML features presented in the article.
The number of different devices available and their potential screen resolutions keep increasing, and to support this wide range of resolutions and devices, responsive website design is now the standard. A website's markup must adapt itself to look perfect on all the different devices and in various resolutions, pixel densities and mobile device orientations. Managing, manipulating and delivering images, is one of the main challenges of breakpoints for responsive design that web developers face.
As the end of 2015 approaches, we wanted to share a quick summary of Cloudinary’s accomplishment this year and some of our plans for next year. We couldn't possibly do this without including an image manipulation example! That's our hat trick in the title :-)
Five years ago, Ethan Marcotte coined the term “responsive web design” and gave it three defining ingredients: fluid grids, flexible media, and media queries.
That second ingredient, “flexible media” turned out to be a bit of a bugbear.
It can be quite a challenge to graphically design a website or mobile application that displays images in very precise shapes and orientations. This can take the form of warping 2D pictures to have a 3D perspective, placing images in precise shapes or overlaying images in specific locations within another image, for example: overlaying an image over the screen of a smartphone.
Content Optimization and Personalization programs can deliver tremendous ROI to an organization but tend to be very resource intensive, requiring developers to build the code for alternate experiences and creative folks to generate the content. Many of the content optimization/personalization tools out there today (Maxymiser, Optimizely, Adobe Target, Ensighten etc.) have created WYSIWYG (What You See Is What You Get) editors to help relieve the code/development bottleneck but the creative bottleneck stubbornly remains.
At Cloudinary, we always seek to seamlessly leverage the best optimized image formats for any of the different use cases for web and mobile applications. Therefore, we quickly added support for FLIF: uploading of FLIF files and dynamic conversion of any image format to FLIF or from FLIF.
If you have an application that allows users to upload their own photos, it can be very useful to be able to organize these photos according to their content. This will allow you to categorize the content for displaying to all your users and make your image library searchable. Furthermore, you can also learn more about your users according to the content they upload and find different trends of what people care about. Other added benefits can also include the ability to display matching content to your users according to their interests or even match them with other users that share similar interests.
As the number of images and videos on a website continue to grow, slower load times and thus a negative user experience are both growing concerns for any company. An article this summer in The Fiscal Times, citing Internet data measurement company HTTP Archive, noted that the average website is now 2.1 MB in size, compared to 1.5 MB two years ago. And one of the biggest reasons for this growth is the addition of content such as videos and engaging images designed to drive more traffic to the site.
As a website/app developer or owner, you’ve undoubtedly experienced your fair share of glitches and mishaps when it comes to users or site visitors sharing your content. Many outlets such as news and media sites, social networks, or eCommerce sites include the option to "like" or "share" content such as blog posts or images. Once shared, the social network site displays a snippet of the shared content alongside a featured image. This way, your site content gets maximum exposure in social networks and attracts additional visitors.