This site is a carefully curated index of thousands of resources on a wide range of image, media, and web development topics, written by bloggers, developers, and technology experts which can help you make sense of image and media management on the visual web.
Images and video are a core component of websites, mobile apps, and our digital life. They improve user experience and deliver exciting content. At the same time, high quality images and video can be a major challenge for site owners and developers, who need to dynamically generate large volumes of images, store them, optimize them for quality and performance, and deliver them to users around the world in an instant!
Professionals in our space need a deep understanding of image and video formats, optimization, delivery, storage techniques, and best practices for media manipulation and adjustment for websites; this website will help us as a community achieve that.
Key Topics
Resources about managing the quality, resolution, and performance of images delivered on web pages; with a focus on image CDN solutions.
Resources about automating image management tasks and operations, including:
- Image storage - upload, file transfer, backup and migration
- Image search and retrieval
- Image SEO and accessibility
- Image personalization
- Image security and privacy
- Image APIs, SDKs and scripting
- Image management in CMS systems - WordPress, Drupal, Joomla, SharePoint
- Image collections - galleries, sliders, carousels and more
Resources about automated image manipulation techniques, including:
- Image manipulation techniques - automatic cropping, merging images, dynamic image text, generating background images, and more.
- Image filters and effects - blurring, brightnmess, exposure, hue, noise, pixellation, and more.
- Responsive images - image sizing and resizing techniques, responsive color, and responsive breakpoints.
- Generating screenshots - screenshot automation, full page screenshots, generating screenshots in browsers.
- Face detection and object detection - face blurring, face cropping, face recognition, face detection, object detection in images, and more.
Resources about video delivery, video streaming technologies and servers, and using CDN to deliver video efficiently to geographically dispersed users.
Resources about automating video management tasks for websites, including:
- Video upload
- Embedding video
- Video administration and organization
- Video search and retrieval
- Video SEO and accessibility
- Video analytics
- Video APIs and SDKs
- Video security and privacy
- Video collections and galleries
- Video storage - on-premise, cloud-based and hosted
Resources about automated video editing and automated video manipulation techniques, including:
- Automated video editing - cropping and trimming, closed captions, blending, motion compensation, looping, snippets, background images, scaling, and more.
- Video effects and filters - fade in and out, denoise, removing artifacts, adjusting gain, normalization, slow motion, watermarks, and more.
- Audio adjustments in video - adjusting audio level, resampling, replacing audio, auto-leveling, equalization, karaoke, and more.
- Responsive video - adjusting video to different screen sizes.
Further Reading
- Media Use Cases — Resources about using images, animation, and other types of media in different use cases, for example, content marketing, user engagement, and more.
- Image Management Tools — Resources about tools and libraries used for image management, including cloud-based image management tools, libraries, and attachment management tools.
- Image Management and Operations — Resources about various automated image management tasks and operations, such as image upload, transferring images, image administration, and more.
- Image Upload — Resources about uploading images using various programming languages and frameworks like jQuery, Ajax and more.
- Client-Side Image Upload — Resources about uploading images using client side technologies like HTML, jQuery and more.
- Server-Side Image Upload — Resources about uploading images using server side technologies like PHP, C# and more.
- Bulk and Parallel Image Uploading — Resources about frameworks and technologies that are used for uploading multiple images at once.
- Image Upload in Mobile — Resources about uploading images in mobile operating systems like Android and iOS using various frameworks and programming languages.
- Android Image Upload — Resources about uploading images to the Android mobile operating system using libraries like Volley, Retrofit 2 and more.
- iOS Image Upload — Resources about uploading images in the iOS operating system using frameworks like REST API, Django and more.
- Ionic Image Upload — Resources about uploading images using Ionic, a mobile app development framework targeted at building hybrid mobile apps.
- React Native Image Upload — Resources about React Native image upload, a framework for building native apps using React.
- JQuery Mobile Image Upload — Resources about uploading images using jQuery mobile, a framework for creating mobile web applications.
- Image Upload in Web Apps — Resources about uploading images in web applications using languages and frameworks like PHP, Angular.js, JQuery and more.
- PHP Image Upload — Resources about common usage patterns for uploading images with PHP, including tutorials and code examples.
- Python|Django Image Upload — Resources about common usage patterns for uploading images with Python and Django, including tutorials and code examples.
- Angular.js Image Upload — Resources about common usage patterns for uploading images with Angular.js, including tutorials and code examples.
- jQuery Image Upload — Resources about uploading images using jQuery, a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
- Ruby-Rails Image Upload — Resources about uploading images using the Ruby Programming Language and Ruby on Rails, a server-side web application framework written in Ruby.
- Node.js Image Upload — Resources about uploading images using Node.js, a platform built on Chrome's JavaScript runtime for building fast and scalable network applications.
- HTML5 Image Upload — With HTML5 File API it's easy to represent file objects in web applications. This page gathers resources about HTML5 image upload including tutorials and examples.
- JavaScript Image Upload — Resources about uploading images and performing related tasks using JavaScript, a high-level, dynamic, untyped, and interpreted run-time language.
- Image Upload Using Ajax — Resources about uploading images using Ajax, a technique for updating parts of a web page, without reloading the whole page.
- Image Management in Online Services — Resources about image APIs used for image management and operations in social media and other online services, such as Twitter, Instagram, Facebook, and more.
- Twitter Image API — Resources about using the Twitter API to upload, manage, and edit Twitter images.
- Facebook Image API — Resources about using the Facebook API to upload, manage, and edit Facebook images.
- Dropbox Image API — Resources about using Dropbox APIs and SDKs to upload, manage and edit Dropbox images.
- Box Image API — Resources about using the Box API to upload, manage and edit Box images.
- Instagram API — Resources about the Instagram API, including overviews, Instagram API tutorials, and best practices for image management using the API.
- Flickr API — Resources about using the Flickr API to upload, manage and edit Flickr images.
- Other Image APIs — Resources about using additional image APIs to upload, manage and edit images, such as the LinkedIn API and the Pinterest API.
- Image Categorization — Resources about automatically categorizing images using various methods and techniques, including different tutorials, research based on machine learning, and more.
- Image Delivery and CDN — Resources about image delivery, which refers to the quality, and speed of images delivered on web pages, and image CDN, the practice of storing images on geographically dispersed servers.
- Image Performance Best Practices — Resources about best practices for image performance, which discuss optimization methods for faster loading and displaying of images.
- Image Scalability — Resources about how to obtain image scalability, discussing techniques used to handle large amounts of images on websites, while maintaining regular site function and performance levels.
- Image Delivery Latency — Resources about image delivery latency on websites, which discuss how to reduce the time it takes for images to get from one designated point to another.
- Image Delivery Architectures and Topologies — Resources about architectures and topologies used for image delivery, and techniques used for improving image delivery.
- Image CDN — Resources about image management in a Content Delivery Network (CDN), a system of distributed servers that deliver images and other content, based on its geolocations.
- Multi-CDN Management — Resources about multi-CDN, the practice of using more than one CDN provider in order to further improve latency and uptimes on a global scale.
- Image Manipulation — Resources about image manipulation techniques, filters, and effects, including how to handle responsive images, and various filters and effects such as image blurring.
- Image Manipulation Techniques — Resources about various image manipulation techniques like image cropping, blending, combining and merging Images, extracting part of an image and more.
- Background Image Processing — Resources about generating background images, adding and removing a background of an image using image manipulation techniques.
- Blending, Combining and Merging Images — Resources about blending and merging multiple images into a single image with the help of frameworks like .NET and more.
- Extracting Part of an Image — Resources about extracting part of an image or extracting image data using frameworks such as JavaScript, GIMP and more.
- Flip, Invert, and Mirror Images — Resources about how to automatically flip an image, invert image colors, or create mirror images using frameworks such as HTML5, jQuery and more.
- Generating Image Thumbnails — Resources about generating reduced-size versions of images using frameworks and programming languages like PHP, ASP.NET and more.
- Generating PDF from Image — Resources about generating PDF files from images using PHP, JavaScript and more.
- Image Color Count and Palette Detection — Resources about extracting colors from images using frameworks language like PHP, Java and more.
- Image Cropping and Automatic Cropping — Resource about image cropping, a usefull feature in web application that allows the user to crop an image on a web page and save it for later use.
- Image Fitting — Resources about fitting images into browsers and Div containers using frameworks language like CSS, jQuery and more.
- Image Overlay Text — Resources about how to overlay text on an image using CSS, HTML and JavaScript, including examples tutorials and more.
- Image Padding — Resources about image padding, a property that is used to generate space around an image by clearing an area around the image.
- Image Rotation and Orientation — Resources about rotating images and changing their orientation using image manipulation techniques and programming languages like CSS, JavaScript and jQuery.
- Image Filters and Effects — This page gathers resources about image filters and effects, including CSS filter which is the the most common tool for creating visual effects.
- Blurring Images — Resources about automatically blurring and sharpening images using various frameworks.
- Image Brightness Filter — Resources about applying brightness transformation to an image using languages and frameworks like CSS, JavaScript and more.
- Image Contrast Filter — Resources about applying contrast transformation to a image using languages and frameworks like CSS, JavaScript and more.
- Responsive Images — Resources about automatically displaying responsive images to ensure that the same image displays well on a variety of devices (phone, tablet, laptop).
- Image Resizing Techniques — Resources about sizing and resizing images using techniques and frameworks like PHP, JavaScript and more.
- Responsive Color — Resources about methods and techniques for working with image colors in responsive development and design.
- Responsive Breakpoints — Resources about responsive breakpoints, the point at which sites content will respond to provide the user with the best possible layout.
- Face Detection and Object Detection — Resources about detecting faces and objects in an image using frameworks like OpenCV and more.
- Face Blurring — Resources about blurring faces in images including code examples, algorithms and more.
- Face Cropping — Resources about face cropping in images including code examples, algorithms and more.
- Face Recognition — Resources about face recognition in images including code examples, algorithms and more.
- Face Detection — Resources about face detection, the practice of detecting faces in an image using frameworks like OpenCV and more.
- Face Tagging — Resources about tagging faces in an image using face recognition techniques.
- Object Detection — Resources about detecting objects in images including code examples, algorithms and more.
- Image Formats and Optimization — Resources about working with various image formats, and techniques or best practices for image optimization, image compression, and automated image encoding.
- Video Management and Operations — Resources about automated video management tasks and methods, including video upload, embedding video, video search, and more.
- Video Delivery, Streaming and CDN — Resources about popular HTML5 video players and adaptive bitrate video streaming technologies and servers such as HLS, MPEG-DASH.
- HTML5 Video Player — This page gathers resources about some of the popular HTML5 video players https://demo.cloudinary.com/video/player.html and tutorials on how to build custom browser-native video players .
- Video Editing and Manipulation — Resources about automated video editing and automated video manipulation techniques, filters, and effects, such as video fade out, video cropping, and more.
- Responsive Video — In order for a video to be responsive, the video should always expand to fill the width of its container while maintaining its original aspect ratio. We want to avoid static sizing that can break page layouts, distort the image, or display black bars around the video. This page gathers resources about how to make responsive videos.
- Video Effects and Filters — This page gathers resources about manipulating videos using filters and effects including video effects APIs and code examples.
- Video Formats and Transcoding — Resources about working with various video formats, and techniques or best practices for automatic video transcoding and encoding, and video compression.
- Video Transcoding — Video transcoding is the process that converts a video file from one format to another, to make videos viewable across different platforms and devices. This page gathers resources about the differences between encoding and transcoding, including popular transcoding cloud services and APIs.
