The Visual Web


Developer Resources for Managing Images, Videos & other Rich Media

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

Media Use Cases

Resources about using images, animation, and other types of media for content marketing, conversion optimization, social sharing, and other organizational use cases.


Image Delivery and CDN

Resources about managing the quality, resolution, and performance of images delivered on web pages; with a focus on image CDN solutions.


Image Management Tools

Resources about tools and libraries used for image management including cloud-based image management tools, image management libraries, and Digital Asset Management (DAM) tools.


Image Formats and Optimization

Resources about modern image formats, and best practices for image optimization, automated image compression, and image encoding.


Image Management and Operations

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


Image Manipulation

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.


Video Delivery, Streaming and CDN

Resources about video delivery, video streaming technologies and servers, and using CDN to deliver video efficiently to geographically dispersed users.


Video Formats and Transcoding 

Resources about working with video formats, and best practices for video transcoding and encoding for the web.


Video Management and Operations

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



Video Editing and Manipulation

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 CasesResources about using images, animation, and other types of media in different use cases, for example, content marketing, user engagement, and more.
  • Image Management ToolsResources about tools and libraries used for image management, including cloud-based image management tools, libraries, and attachment management tools.
  • Image Management and OperationsResources about various automated image management tasks and operations, such as image upload, transferring images, image administration, and more.
    • Image UploadResources about uploading images using various programming languages and frameworks like jQuery, Ajax and more.
    • Image Upload in MobileResources about uploading images in mobile operating systems like Android and iOS using various frameworks and programming languages.
      • Android Image UploadResources about uploading images to the Android mobile operating system using libraries like Volley, Retrofit 2 and more.
      • iOS Image UploadResources about uploading images in the iOS operating system using frameworks like REST API, Django and more.
      • Ionic Image UploadResources about uploading images using Ionic, a mobile app development framework targeted at building hybrid mobile apps.
      • React Native Image UploadResources about React Native image upload, a framework for building native apps using React.
      • JQuery Mobile Image UploadResources about uploading images using jQuery mobile, a framework for creating mobile web applications.
    • Image Upload in Web AppsResources about uploading images in web applications using languages and frameworks like PHP, Angular.js, JQuery and more.
      • PHP Image UploadResources about common usage patterns for uploading images with PHP, including tutorials and code examples.
      • Python|Django Image UploadResources about common usage patterns for uploading images with Python and Django, including tutorials and code examples.
      • Angular.js Image UploadResources about common usage patterns for uploading images with Angular.js, including tutorials and code examples.
      • jQuery Image UploadResources about uploading images using jQuery, a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
      • Ruby-Rails Image UploadResources about uploading images using the Ruby Programming Language and Ruby on Rails, a server-side web application framework written in Ruby.
      • Node.js Image UploadResources about uploading images using Node.js, a platform built on Chrome's JavaScript runtime for building fast and scalable network applications.
      • HTML5 Image UploadWith 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 UploadResources about uploading images and performing related tasks using JavaScript, a high-level, dynamic, untyped, and interpreted run-time language.
      • Image Upload Using AjaxResources about uploading images using Ajax, a technique for updating parts of a web page, without reloading the whole page.
    • Image Management in Online ServicesResources 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 APIResources about using the Twitter API to upload, manage, and edit Twitter images.
      • Facebook Image APIResources about using the Facebook API to upload, manage, and edit Facebook images.
      • Dropbox Image APIResources about using Dropbox APIs and SDKs to upload, manage and edit Dropbox images.
      • Box Image APIResources about using the Box API to upload, manage and edit Box images.
      • Instagram APIResources about the Instagram API, including overviews, Instagram API tutorials, and best practices for image management using the API.
      • Flickr APIResources about using the Flickr API to upload, manage and edit Flickr images.
      • Other Image APIsResources about using additional image APIs to upload, manage and edit images, such as the LinkedIn API and the Pinterest API.
    • Image CategorizationResources about automatically categorizing images using various methods and techniques, including different tutorials, research based on machine learning, and more.
  • Image Delivery and CDNResources 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 PracticesResources about best practices for image performance, which discuss optimization methods for faster loading and displaying of images.
      • Image ScalabilityResources 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 LatencyResources 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 TopologiesResources about architectures and topologies used for image delivery, and techniques used for improving image delivery.
    • Image CDNResources 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 ManagementResources 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 ManipulationResources about image manipulation techniques, filters, and effects, including how to handle responsive images, and various filters and effects such as image blurring.
    • Image Manipulation TechniquesResources about various image manipulation techniques like image cropping, blending, combining and merging Images, extracting part of an image and more.
      • Background Image ProcessingResources about generating background images, adding and removing a background of an image using image manipulation techniques.
      • Blending, Combining and Merging ImagesResources about blending and merging multiple images into a single image with the help of frameworks like .NET and more.
      • Extracting Part of an ImageResources about extracting part of an image or extracting image data using frameworks such as JavaScript, GIMP and more.
      • Flip, Invert, and Mirror ImagesResources about how to automatically flip an image, invert image colors, or create mirror images using frameworks such as HTML5, jQuery and more.
      • Generating Image ThumbnailsResources about generating reduced-size versions of images using frameworks and programming languages like PHP, ASP.NET and more.
      • Generating PDF from ImageResources about generating PDF files from images using PHP, JavaScript and more.
      • Image Color Count and Palette DetectionResources about extracting colors from images using frameworks language like PHP, Java and more.
      • Image Cropping and Automatic CroppingResource 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 FittingResources about fitting images into browsers and Div containers using frameworks language like CSS, jQuery and more.
      • Image Overlay TextResources about how to overlay text on an image using CSS, HTML and JavaScript, including examples tutorials and more.
      • Image PaddingResources about image padding, a property that is used to generate space around an image by clearing an area around the image.
      • Image Rotation and OrientationResources about rotating images and changing their orientation using image manipulation techniques and programming languages like CSS, JavaScript and jQuery.
    • Image Filters and EffectsThis page gathers resources about image filters and effects, including CSS filter which is the the most common tool for creating visual effects.
      • Blurring ImagesResources about automatically blurring and sharpening images using various frameworks.
      • Image Brightness FilterResources about applying brightness transformation to an image using languages and frameworks like CSS, JavaScript and more.
      • Image Contrast FilterResources about applying contrast transformation to a image using languages and frameworks like CSS, JavaScript and more.
    • Responsive ImagesResources about automatically displaying responsive images to ensure that the same image displays well on a variety of devices (phone, tablet, laptop).
      • Image Resizing TechniquesResources about sizing and resizing images using techniques and frameworks like PHP, JavaScript and more.
      • Responsive ColorResources about methods and techniques for working with image colors in responsive development and design.
      • Responsive BreakpointsResources about responsive breakpoints, the point at which sites content will respond to provide the user with the best possible layout.
    • Face Detection and Object DetectionResources about detecting faces and objects in an image using frameworks like OpenCV and more.
      • Face BlurringResources about blurring faces in images including code examples, algorithms and more.
      • Face CroppingResources about face cropping in images including code examples, algorithms and more. 
      • Face RecognitionResources about face recognition in images including code examples, algorithms and more.
      • Face DetectionResources about face detection, the practice of detecting faces in an image using frameworks like OpenCV and more.
      • Face TaggingResources about tagging faces in an image using face recognition techniques.
      • Object DetectionResources about detecting objects in images including code examples, algorithms and more.
  • Image Formats and OptimizationResources about working with various image formats, and techniques or best practices for image optimization, image compression, and automated image encoding.
  • Video Management and OperationsResources about automated video management tasks and methods, including video upload, embedding video, video search, and more.
  • Video Delivery, Streaming and CDNResources about popular HTML5 video players and adaptive bitrate video streaming technologies and servers such as HLS, MPEG-DASH.
    • HTML5 Video PlayerThis 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 ManipulationResources about automated video editing and automated video manipulation techniques, filters, and effects, such as video fade out, video cropping, and more.
    • Responsive VideoIn 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 FiltersThis page gathers resources about manipulating videos using filters and effects including video effects APIs and code examples.
  • Video Formats and TranscodingResources about working with various video formats, and techniques or best practices for automatic video transcoding and encoding, and video compression.
    • Video TranscodingVideo 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.






Still Managing Images and Video In-House?

Try Cloudinary for free and automate rich media on your website







  • No labels