• About
  • Blog
  • Contact
  • Demo
  • Partners
  • Webinars
  • Careers
  • Support
  • Login
search
  • Twitter
  • Google Plus
  • Facebook
Cloudinary Logo
  • Solutions
    Solutions Overview
    • Image Management for Developers
    • Video Management for Developers
    • Digital Asset Management
    Features
    • Image Manipulation
    • Image Optimization
    • Video Transcoding
    • Responsive Images
    • Fast Delivery
    • File Upload
    • Cloud Storage
    • Asset Administration
  • Pricing
  • Customers
  • Documentation
    Solution Overview
    More resources
    • Cookbook
    • Blog
    • Knowledge Base
    • The Visual Web
    Image Management
    • Upload images
    • Image transformations
    • Image optimization
    • Responsive images
    • Fetch remote images
    • Upload widget
    Video Management
    • Upload videos
    • Video manipulation and delivery
    • Video player
    API Reference
    • Image upload API reference
    • Image transformation reference
    • Video transformation reference
    • Admin API
    • Search API
    • Video player API reference
    Framework integrations
    Ruby on Rails
    • Get started
    • Upload
    • Image
    • Video
    Node.js
    • Get started
    • Upload
    • Image
    • Video
    PHP
    • Get started
    • Upload
    • Image
    • Video
    JavaScript
    • Get started
    • Upload
    • Image
    • Video
    jQuery
    • Get started
    • Upload
    • Image
    • Video
    Angular
    • Get started
    • Upload
    • Image
    • Video
    React
    • Get started
    • Upload
    • Image
    • Video
    Java
    • Get started
    • Upload
    • Image
    • Video
    Django
    • Get started
    • Upload
    • Image
    • Video
    iOS
    • Get started
    • Upload
    • Image
    • Video
    Android
    • Get started
    • Upload
    • Image
    • Video
    .Net
    • Get started
    • Upload
    • Image
    • Video
    Scala
    • GitHub repository
    WordPress
    • Plug-in
    Magento
    • Extension
    • Cloudinary Add-ons
    • Amazon Rekognition AI Moderation
    • Amazon Rekognition Auto Tagging
    • Amazon Rekognition Celebrity Detection
    • VIESUS™ Automatic Image Enhancement
    • Google AI Video Transcription
    • Google Automatic Video Tagging
    • OCR Text Detection and Extraction Add-on
    • Neural Artwork Style Transfer
    • Imagga Auto Tagging
    • Imagga Crop and Scale
    • URL2PNG Website Screenshots
    • JPEGmini Image Optimization
    • WebPurify Image Moderation
    • Advanced Facial Attributes Detection
    • Aspose Document Conversion
    • Metascan Anti-malware Protection
    • Remove-The-Background Editing
  • Add-ons
sign up for free
  • Solution Overview
    • Developer solution overview
      • The Cloudinary solution
        • Quick example
        • Key benefits for developers
      • Architecture and concepts
        • Service architecture
        • Delivery lifecycle
        • Scaling
        • Security
        • APIs
        • Management console and media library
      • Account and API setup
        • Identifiers
        • URLs and endpoints
      • Features overview
        • Upload
        • Storage
        • Manipulations and transformations
        • Image optimizations
        • Responsive images
        • Delivery
        • Administration
        • Add-ons
      • Framework integration and migration
        • SDKs
        • Migration
      • Additional resources
  • Image Management
    • Upload images
      • Uploading images to the cloud
        • Public ID - the image identifier
        • Data upload options
        • Asset versions
        • Chunked image upload
        • Upload response
        • Backups and revisions
      • Direct uploading from the browser or mobile application
        • Unsigned upload
        • Upload multiple images
        • Display preview thumbnails and indicate upload progress
        • Deleting client-side uploaded images
        • Upload widget
      • Eager transformations
      • Incoming transformations
      • Notifications and asynchronous transformations
        • Upload notifications
        • Eager asynchronous transformations
      • Uploading non-image files as raw files
      • Auto-fetching remote images
      • Moderation of uploaded images
      • Semantic data extraction
      • Control access to images
        • Private images
        • Authenticated images
      • Update already uploaded images
      • Upload Presets
      • Creating images from text
      • Image administration
        • Deleting images
        • Renaming images
        • Invalidating cached media assets on the CDN
        • Tagging images
      • Uploading with a direct call to the API
        • Error handling
        • Creating API authentication signatures
    • Image transformations
      • Delivering media assets using dynamic URLs
        • Secure HTTPS URLs
      • Embedding images in web pages
      • Resizing and cropping images
        • scale
        • fit
        • limit
        • mfit (minimum fit)
        • fill
        • lfill (limit fill)
        • pad
        • lpad (limit pad)
        • mpad (minimum pad)
        • fill_pad
        • crop
        • thumb
        • Imagga crop and scale
        • Aspect ratio based cropping
        • Set Device Pixel Ratio (DPR)
        • Control gravity
        • Automatic cropping
      • Face detection based transformations
        • Face detection based cropping
        • Position overlays on detected faces
        • Effects with face detection
        • Advanced facial attributes detection
        • Zoom level
      • Image format support
        • Fetch format
        • Automatic format selection
      • Adjusting image quality
        • Automatic quality and encoding settings
        • Toggling chroma subsampling
      • Modify image shape and style
        • Rounding corners and creating circular images
        • Rotating images
        • Controlling image opacity
        • Adding image borders
        • Setting background color
      • Applying image effects and filters
        • Color effects
        • Outline effects
        • Tint effects
        • Blurring, pixelating and sharpening effects
        • Overlay blending effects
        • Image shape changes and distortion effects
        • Image improvement effects
        • Artistic filter effects
        • Miscellaneous image effects
      • Image and text overlays
        • Adding image overlays
        • Manipulating overlays
        • Placing overlays
        • Applying chained transformations to overlays
        • Anti-removal overlays
        • Adding image underlays
        • Adding text captions
        • Applying 3D LUTs to images
        • Adding multiple overlays
      • Chained transformations
      • Named transformations
      • Optimizing images
      • Delivering responsive images
      • Fetching images from remote locations
        • Auto upload and fetch
        • Profile photos on social networks
        • Thumbnails of public videos
      • Control access to images
        • Strict transformations
        • Signed delivery URLs
        • Private images
        • Authenticated images
      • Delivering content from PDF files
        • Deliver a selected PDF page as an image
        • Deliver a PDF or selected pages of a PDF
      • Delivering Photoshop images
        • Deliver selected layers of a PSD image
        • Extract the original content of an embedded object
        • Additional Photoshop image manipulation options
      • Advanced URL delivery options
        • Asset versions
        • Error handling
        • Client-side resource lists
        • Private CDNs and CNAMEs
        • Multi-CDN Solutions
        • Multiple sub-domains
        • SEO friendly media asset URLs
        • Using a default image placeholder
        • Manually generate delivery URL signatures
      • Managing Animated GIFs
        • Manipulating animated GIFs
        • Converting an animated GIF to video
        • Converting an animated image to animated WebP or PNG
        • Applying lossy GIF compression
        • Creating animated GIFs
      • Flags for controlling transformations
        • Cropping and positioning flags
        • Delivery and image format flags
        • Metadata and color profiles flags
        • Overlays, PDF and text flags
      • Conditional transformations
        • Specifying conditions
        • Multiple conditions
        • Multiple conditional transformations
        • Else branch transformations
      • Using arithmetic expressions
      • Using user-defined variables
        • Usage Guidelines
        • Supported transformations
        • Use-Case Examples
      • Transformations reference
    • Image optimization
      • What is image optimization?
      • Default optimizations
      • How to optimize image quality
        • Set the appropriate default quality for your account
        • Set a specific quality setting for selected images
        • Use q_auto - Automatic quality and encoding
      • How to optimize image format
      • How to optimize image sizing
        • Responsive image sizing
      • Additional tips for optimizing images
        • Sprites
        • Analytics
      • Appendix: Image format support and usage
    • Responsive images
      • Dynamic image manipulation
        • Responsive breakpoint generator
      • Automating responsive images with JavaScript
        • Step 1: include the Cloudinary JavaScript library
        • Step 2: set the img tag parameters
        • Step 3: call the Cloudinary responsive method
        • SDK support
        • Responsive design with support for retina and HiDPI devices
        • Overriding default values
      • Automating responsive images with Client Hints
        • Automatic pixel density detection
        • Automatic image width
        • Automatic image width using optimal responsive breakpoints
      • Combining responsive automation with other Cloudinary features
        • Responsive images with automatic format selection
        • Responsive images with automatic quality selection
        • Responsive images with automatic gravity selection
      • Responsive images - additional resources
    • Fetch remote images
      • Overview
      • Remote image Fetch URL
        • Fetch URL with on-the-fly image manipulation
        • Creating a Fetch URL via code
        • Creating a Fetch URL containing special characters
        • Restricting the allowed Fetch domains
        • Refreshing or deleting fetched images
      • Auto-upload remote resources
        • Configuring auto-upload URL mapping
        • Auto-uploading with on-the-fly transformations
        • Creating auto-upload URLs via code
        • Lazily migrate existing resources with auto-upload
        • Restricting access to auto-uploaded resources
        • Auto-uploading with Upload presets
        • Auto-upload vs. Fetch
    • Facebook profile pictures
      • Overview
      • Viewing profile pictures
      • Picture transformation
      • Refreshing Facebook Pictures
    • Twitter profile pictures
      • Overview
      • Viewing profile pictures
      • Picture transformation
      • Automatic refresh
    • Sprite generation
      • Overview
      • Creating sprites
      • Managing sprite versions
      • Sprite with transformations
    • Upload widget
      • Quick example
      • How to setup and implement the upload widget
        • Unsigned uploads
        • Signed uploads
      • Third-party upload sources
        • The sources parameter
        • Image Search tab
        • Dropbox tab
        • Facebook tab
        • Instagram tab
      • API methods
        • cloudinary.setCloudName(name)
        • cloudinary.openUploadWidget(options, result_callback)
        • cloudinary.createUploadWidget(options, result_callback)
        • cloudinary.applyUploadWidget(element, options, result_callback)
        • $.fn.cloudinary_upload_widget
      • API events
        • cloudinarywidgetsuccess - Global success event binding
        • cloudinarywidgetfileuploadsuccess - Single file success event binding
        • cloudinarywidgeterror - Upload error event binding
        • cloudinarywidgetdeleted - Image deletion event binding
        • cloudinarywidgetclosed - Close widget event binding
      • Look and feel customization
      • Upload widget options
  • Video Management
    • Upload videos
      • Uploading from server-side code
        • Video upload parameters
        • Video upload response
        • Uploading audio
      • Direct uploading from the browser
        • Upload parameters for direct upload
      • Chunked video upload
      • Eager video transformations
      • Incoming transformations
      • Control access to videos
        • Private videos
        • Authenticated videos
      • Upload presets
      • Video administration
        • Deleting videos
        • Renaming videos
        • Tagging videos
    • Video manipulation and delivery
      • On-the-fly video encoding and delivery
        • Video URL structure
      • Embedding videos in web pages
      • Resizing and cropping videos
        • scale
        • fit
        • fill
        • limit
        • pad
        • lpad
        • crop
        • Aspect ratio
        • Gravity
        • Background color
      • Trimming videos
      • Concatenating videos
        • Concatenate videos with images
      • Rotating videos
      • Rounding corners and creating circular videos
      • Video settings
        • Transcoding videos
        • Quality control
        • Bitrate control
        • Video codec settings
      • Control access to videos
      • Video Effects
        • Change video playback speed
        • Add visual noise
        • Remove small motion shifts
        • Fade in and out
        • Blur your video
        • Calibrate contrast
        • Control brightness
        • Balance saturation
        • Regulate gamma
        • Apply vignette
        • Adjust volume
        • Reverse playback
        • Control video looping
      • Audio settings
        • Audio frequency control
        • Audio codec settings
      • Generating video thumbnails
      • Generate waveform images
        • Creating waveform images
        • Customizing the waveform image
      • Adding image overlays
      • Adding video overlays
      • Adding text captions
      • Adding subtitles
        • SRT files
      • Applying 3D LUTs to video
      • Adaptive bitrate streaming - HLS and MPEG-DASH
        • Step 1. Select a streaming profile
        • Step 2. Upload your video with an eager transformation including the streaming profile and format
        • Step 3. Deliver the video
        • Notes and guidelines for adaptive streaming
        • Examples
        • Predefined streaming profiles
        • Derived adaptive streaming files
        • Manually creating representations and master files
      • Audio manipulation and streaming
      • Creating animated GIF and animated WebP
        • Delivering animated GIFs
        • Delivering animated WebP files
      • Video transformation reference
    • Video player
      • Video Player features
      • Video Player installation and setup
        • Enabling MPEG-DASH support for your video player
      • Video Player samples
      • Adding a Video Player and video to your page
      • Video player skin themes
      • Common configurations
        • Set the video to play
        • Define video transformations
        • Additional configurations
        • Default Configuration Behaviors
        • Configuration Precedence
      • Adding titles, subtitles, and descriptions to your videos
      • Delivering videos with HLS or MPEG-DASH
        • 1. Transcode your video to HLS or MPEG-DASH ahead of time.
        • 2. Specify the streaming format and streaming profile for the videoPlayer source file.
      • Creating a playlist
        • Create a fixed source playlist
        • Create a playlist for a specified tag
        • Present the upcoming video
      • Showing video recommendations
      • Performing operations on your player
      • Using video events
      • Capturing analytics data
        • 1. Activate analytics in your videoPlayer
        • 2. Include the Google Analytics code snippet in your page.
      • Low-level customization with video.js
  • API Reference
    • Image upload API reference
      • Upload
      • Rename
      • Destroy
      • Tags
      • Context
      • Explicit
      • Explode
      • Generate_archive
      • Generate_sprite
      • Multi
      • Text
    • Image transformation reference
      • width
      • height
      • crop
      • aspect_ratio
      • gravity
      • zoom
      • x
      • y
      • format
      • fetch_format
      • quality
      • radius
      • angle
      • effect
      • opacity
      • border
      • background
      • overlay
      • underlay
      • default_image
      • delay
      • color
      • color_space
      • dpr
      • page
      • density
      • flags
      • transformation
      • [arithmetic operators]
      • if
      • variable
    • Video transformation reference
    • Admin API
      • Overview
      • Protocol and authentication
        • Pagination
        • Error handling
        • Usage limits
      • Framework integration
      • Browse resources
        • List resources
        • List resources by tag
        • List resources by context
        • List resources in moderation queues
        • List tags
        • Details of a single resource
      • Search resources
        • Search resources
      • Update resources
        • Update details of an existing resource
      • Delete resources
        • Delete all or selected resources
        • Delete resources by tags
        • Delete derived resources
      • Manage transformations
        • List transformations
        • Details of a single transformation
        • Delete transformation
        • Update transformation
        • Create named transformation
      • Restore resources
        • Restore a deleted resource
      • Manage upload mappings
        • List upload mappings
        • Details of a single upload mapping
        • Create an upload mapping
        • Delete an upload mapping
        • Update an upload mapping
      • Update access mode
        • Update access mode for selected resources
      • Manage upload presets
        • List upload presets
        • Details of a single upload preset
        • Create an upload preset
        • Delete an upload preset
        • Update an upload preset
      • Manage folders
        • List root folders
        • List subfolders
      • Manage adaptive streaming profiles
        • List streaming profiles
        • Get details of a single streaming profile
        • Create a streaming profile
        • Update an existing streaming profile
        • Delete or revert the specified streaming profile
      • Usage report
        • Get account usage details
      • Ping Cloudinary
        • Ping Cloudinary servers
    • Search API
      • Overview
        • Quick example
        • Tiers
      • Syntax
      • Parameters
      • Examples
      • Response
      • Expressions
        • Fields
        • Boolean Operators
        • Expression examples
      • Expression Fields Reference
        • Field types and supported operators
    • Video player API reference
      • Video Player configuration options
        • cloudinary.VideoPlayer constructor params
        • Video tag attributes
      • VideoPlayer instance methods
        • Supported methods:
      • Playlist operations
      • Events
  • Framework Integration
    • Ruby On Rails integration
      • Overview
        • Quick example: Image transformation
        • Quick example: File upload
        • Ruby GEM Features
        • Ruby capitalization and data type guidelines
      • Getting started
        • Installation
        • Configuration
      • Rails image and video upload
        • Upload widget
        • Server-side upload
        • Direct uploading from the browser
        • Migrating assets to Cloudinary
      • Rails image manipulation
        • Deliver and transform images
        • Apply common image transformations
      • Rails video manipulation
        • Rails video manipulation overview
        • Rails video transformation functionality
        • Rails video transformation code examples
      • CarrierWave integration
        • CarrierWave installation and setup
        • Upload examples
        • Custom and dynamic transformations
        • Custom coordinate-based cropping
      • Attachinary integration
    • PHP integration
      • Overview
        • Quick example: Image transformation
        • Quick example: File upload
        • Quick example
        • PHP Library Features
        • PHP capitalization and data type guidelines
      • Getting started guide
        • Installation
        • Configuration
        • Upload media assets
        • Display and manipulate images and video
        • Sample projects
        • What's next
      • PHP image upload
        • Overview
        • Server side upload
        • Direct uploading from the browser
        • Incoming transformations
        • Eager transformations
        • Semantic data extraction
        • Raw file uploading
        • Update and delete images
        • Manage tags
        • Text creation
        • Notifications and async transformations
        • Upload method parameters
      • PHP video upload
        • PHP video upload functionality
        • PHP video upload examples
      • PHP image manipulation
        • Overview
        • Display images
        • Resize, crop and thumbnails
        • Format conversion
        • Face detection
        • Facebook and Twitter profile pictures
        • Alter shape
        • Chained transformations
        • Named transformations
        • Filters and effects
        • Overlays, underlays and watermarks
        • Text layers
        • Fetch images
        • More options
      • PHP video manipulation
        • PHP video manipulation overview
        • PHP video transformation functionality
        • PHP video transformation code examples
      • Configuration options
      • Admin API
    • Django integration
      • Overview
        • Quick example: Image transformation
        • Quick example: File upload
        • Python/Django Library Features
        • Python capitalization and data type guidelines
      • Getting started guide
        • Installation
        • Configuration
        • Upload media assets
        • Display and manipulate images and video
        • Sample projects
        • What's next
      • Django image upload
        • Overview
        • Server side upload
        • Direct uploading from the browser
        • Incoming transformations
        • Eager transformations
        • Semantic data extraction
        • Raw file uploading
        • Update and delete images
        • Manage tags
        • Text creation
        • Notifications and async transformations
        • Upload method parameters
      • Django video upload
        • Django video upload functionality
        • Django video upload examples
      • Django image manipulation
        • Overview
        • Display images
        • Resize, crop and thumbnails
        • Format conversion
        • Face detection
        • Facebook and Twitter profile pictures
        • Alter shape
        • Chained transformations
        • Named transformations
        • Filters and effects
        • Overlays, underlays and watermarks
        • Text layers
        • Fetch images
        • More options
      • Django video manipulation
        • Django video manipulation overview
        • Django/Python video transformation functionality
        • Django/Python Video transformation code examples
      • Configuration options
      • Admin API
    • Node.js integration
      • Overview
        • Quick example: Image transformation
        • Quick example: File upload
        • Node.js Library Features
        • Node.js capitalization and data type guidelines
      • Getting started guide
        • Installation
        • Configuration
        • Upload images and videos
        • Display and manipulate images and video
        • Sample projects
        • What's next
      • Node.js image upload
        • Overview
        • Server side upload
        • Direct uploading from the browser
        • Incoming transformations
        • Eager transformations
        • Semantic data extraction
        • Raw file uploading
        • Update and delete images
        • Manage tags
        • Text creation
        • Notifications and async transformations
        • Upload method parameters
      • Node.js video upload
        • Node.js video upload functionality
        • Node.js video upload examples
      • Node.js image manipulation
        • Overview
        • Display images
        • Resize, crop and thumbnails
        • Format conversion
        • Face detection
        • Facebook and Twitter profile pictures
        • Alter shape
        • Chained transformations
        • Named transformations
        • Filters and effects
        • Overlays, underlays and watermarks
        • Text layers
        • Fetch images
        • More options
      • Node.js video manipulation
        • Node.js video manipulation overview
        • Node.js video transformation functionality
        • Node.js video transformation code examples
      • Configuration options
      • Admin API
    • Java integration
      • Overview
        • Quick example: Image transformation
        • Quick example: File upload
        • Java Library Features
        • Java capitalization and data type guidelines
      • Getting started guide
        • Installation
        • Configuration
        • Upload media assets
        • Display and manipulate images
        • Sample projects
        • What's next
      • Java image upload
        • Overview
        • Server side upload
        • Direct uploading from the browser
        • Incoming transformations
        • Eager transformations
        • Semantic data extraction
        • Raw file uploading
        • Update and delete images
        • Manage tags
        • Text creation
        • Notifications and async transformations
        • Upload method parameters
      • Java video upload
        • Java video upload overview
        • Java video upload functionality
        • Java video upload examples
      • Java image manipulation
        • Overview
        • Display images
        • Resize, crop and thumbnails
        • Format conversion
        • Face detection
        • Facebook and Twitter profile pictures
        • Alter shape
        • Chained transformations
        • Named transformations
        • Filters and effects
        • Overlays, underlays and watermarks
        • Text layers
        • Fetch images
        • More options
      • Java video manipulation
        • Java video manipulation overview
        • Java video transformation functionality
        • Java video transformation code examples
      • Configuration options
      • Admin API
    • .NET integration
      • Overview
        • Quick example: Image transformation
        • Quick example: File upload
        • .NET Library Features
        • .NET capitalization and data type guidelines
      • Getting started guide
        • Installation
        • Configuration
        • Upload media assets
        • Display and manipulate images and videos
        • Sample projects
        • What's next
      • .NET image upload
        • Overview
        • Server side upload
        • Direct uploading from the browser
        • Incoming transformations
        • Eager transformations
        • Semantic data extraction
        • Raw file uploading
        • Update and delete images
        • Manage tags
        • Text creation
        • Notifications and async transformations
        • Upload method parameters
      • .NET video upload
        • .NET video upload functionality
        • .NET video upload examples
      • .NET image manipulation
        • Overview
        • Display images
        • Resize, crop and thumbnails
        • Format conversion
        • Face detection
        • Facebook and Twitter profile pictures
        • Alter shape
        • Chained transformations
        • Named transformations
        • Filters and effects
        • Overlays, underlays and watermarks
        • Text layers
        • Fetch images
        • More options
      • .NET video manipulation
        • .NET video manipulation overview
        • .NET video transformation functionality
        • .NET video transformation code examples
      • Configuration options
      • Admin API
    • JavaScript integration
      • Overview
        • Quick example
        • JavaScript SDK features
        • JavaScript capitalization and data type guidelines
      • Getting started
        • Installation
        • Setup
      • JavaScript image and video upload
      • JavaScript image manipulation
        • Overview
        • Deliver and transform images
        • Apply common image transformations using JavaScript
      • JavaScript video manipulation
        • Overview
        • Video transformation functionality
        • Video transformation examples
    • jQuery integration
      • Overview
        • Quick example: Image transformation
        • Quick example: File upload
        • jQuery SDK features
      • Getting started
        • Installation
        • Setup
        • Sample projects
      • jQuery image and video upload
        • Upload widget
        • Direct uploading from the browser
        • Upload multiple images
        • Upload events
        • Client side image validation before upload
      • jQuery image manipulation
        • Overview
        • Deliver and transform images
        • Apply common image transformations
      • jQuery video manipulation
        • Overview
        • Video transformation functionality
        • Video transformation examples
    • Angular integration
      • Overview
        • Supported versions
        • Quick example
        • Angular SDK features
      • Getting started
        • SDK Installation and Setup
        • Using core Cloudinary JavaScript features
        • Sample Projects
      • Angular image and video upload
        • Cloudinary Upload Widget
        • 3rd party Angular upload tools
        • Cloudinary jQuery-file-upload
        • Pure Javascript
      • Angular image manipulation
        • Overview
        • Deliver and transform images
        • Apply common image transformations
        • Update assets dynamically
      • Angular video manipulation
        • Overview
        • Video transformation functionality
        • Video transformation examples
    • React integration
      • Overview
        • Quick example
        • React SDK features
        • React capitalization and data type guidelines
      • Getting started
        • Installation and Setup
        • Using core Cloudinary JavaScript features
        • Samples
      • React image and video upload
      • React image manipulation
        • Overview
        • Deliver and transform images
        • Applying common image transformations using React
      • React video manipulation
        • Overview
        • Video transformation functionality
        • Video transformation examples
    • iOS integration
      • Overview
        • Quick example: Image transformation
        • Quick example: File upload
        • iOS SDK features
        • iOS capitalization and data type guidelines
      • Getting started
        • Installation
        • Setup
        • Sample project
      • iOS image and video upload
        • Upload method
        • Upload options
        • Chunked upload
        • Callbacks
        • Preprocess image uploads
      • iOS image manipulation
        • Generate image URLs
        • Add Transformations
        • Download images
        • Deliver images using UI extensions
        • Apply common image transformations
        • Responsive images
      • iOS video manipulation
        • Overview
        • Video transformation functionality
        • Deliver videos
        • Video transformation examples
    • Android integration
      • Overview
        • Quick example: Image manipulation
        • Quick example: File upload
        • Android SDK features
        • Android capitalization and data type guidelines
      • Getting started
        • Installation
        • Setup
        • Sample project
      • Android image and video upload
        • MediaManager upload method
        • Upload options
        • Callbacks
        • Preprocess image uploads
        • Upload policy
      • Android image manipulation
        • Overview
        • Generate image URLs
        • Add Transformations
        • Download images
        • Apply common image transformations
        • Responsive images
      • Android video manipulation
        • Overview
        • Video transformation functionality
        • Deliver videos
        • Video transformation examples
  • Add-ons
    • Google Auto Tagging
      • Image recognition and categorization
      • Adding resource tags to images
    • Google Automatic Video Tagging
      • Video recognition and categorization
      • Adding resource tags to videos
    • Google AI Video Transcription
      • Requesting video transcription
      • Displaying Subtitles
        • Subtitle length and confidence levels
        • Formatting subtitles
    • Imagga Crop and Scale
      • Using Imagga
      • Signed URLs
      • Eager transformations
      • Smartly scale images
      • Smartly crop images
      • Further image manipulations
      • Overlay cropping
    • Imagga Auto Tagging
      • Image recognition and categorization
      • Adding resource tags to images
      • Multi-language support
    • Amazon Rekognition Auto Tagging
      • Image recognition and categorization
      • Automatically adding tags to images
    • Amazon Rekognition Celebrity Detection
      • Celebrity recognition and categorization
      • Automatically adding tags to images
    • Amazon Rekognition AI Moderation
      • Automatic image moderation flow
      • Moderation categorization
      • Request image moderation
      • Moderation response
      • Image moderation listing
      • Manual override
        • Overriding moderation via the Media Library
        • Overriding moderation via the Admin API
    • URL2PNG Website Screenshots
      • Using URL2PNG
      • Signed URLs
      • Eager generation
      • Create website screenshots
      • Further image manipulations
    • JPEGmini Image Optimization
      • Using JPEGmini
      • Signed URLs
      • Eager transformations
      • Optimize JPG images
      • Further image manipulations
    • WebPurify Image Moderation
      • Automatic image moderation flow
      • Request image moderation
      • Status notification
      • Query status
      • Image moderation queue
      • Manual override
    • Advanced Facial Attributes Detection
      • Face attribute detection on upload
      • Face attribute detection after uploading
      • Face detection based cropping
      • Face detection with signed URLs
      • Eyes detection based cropping
      • Eyes detection for accurate red eye removal
      • Face overlays
      • Eyes overlays
    • Aspose Document Conversion
      • Convert Office documents to images
      • Status notification
      • Generate images from Office documents
      • Further image manipulations
    • Metascan Anti-malware Protection
      • Automatic file scanning flow
      • Request file scanning
      • Status notification
      • Query status
      • Anti-malware moderation queue
      • Manual override
    • Remove-The-Background Editing
      • Remove image background
      • Update existing images
      • Status notification
      • Further image manipulations
    • OCR Text Detection and Extraction Add-on
      • Extracting detected text
        • Requesting extracted text (upload/update methods)
        • Extracted text in the JSON response
        • Using extracted text to process images
      • Blurring or pixelating detected text
      • Overlaying detected text with images
      • Text-based cropping
      • Signed URLs
    • Neural Artwork Style Transfer
      • Adjusting style transformation preferences
      • Setting the image size
      • Signed URLs
      • More on Cloudinary transformations
    • VIESUS™ Automatic Image Enhancement
      • Enhancing images
      • Signed URLs
      • Eager transformations
      • Further image manipulations
  • Additional resources
    • Blog
    • Cookbook
    • Knowledge Base
  • Documentation
  • →
  • Twitter profile pictures

Twitter profile pictures

Overview

Whether you use Twitter for signing in users to your site or you simply integrate with Twitter profiles in your Web application, you probably need to display Twitter profile pictures in your site.

Twitter provides access to the profile pictures of users as part of their API. They provide the pictures in multiple dimensions, but they don’t necessarily match the requirements of your Web site design.

Cloudinary allows you to easily display Twitter profile pictures as part of your web application. You can display them in any dimension or aspect ratio you need, Cloudinary resizes or crops the pictures for you and deliver the images through a high performance CDN. Images are also automatically refreshed when users change their profile pictures.

Note: Cloudinary supports profile picture fetching also for other social networks, such as Facebook, Google+, Instagram and Gravatar.

Viewing profile pictures

To integrate a profile picture in you web site, you simply point to a URL that contains the unique Twitter User ID or Twitter Screen Name of the user.

For example, if your Cloudinary cloud name is ‘demo’, the following URL will display the profile picture of Bill Clinton:

https://res.cloudinary.com/demo/image/twitter_name/w_100/billclinton.jpg
100x100 JPG

You can also display the same profile picture using the numeric ID of this Twitter profile:

https://res.cloudinary.com/demo/image/twitter/w_100/18913373.jpg
100x100 JPG

Here’s an example that adds an image HTML tag using our Ruby on Rails library:

twitter_name_profile_image_tag("billclinton.jpg")

Or when using Twitter User ID:

twitter_profile_image_tag("18913373.jpg")

When a user accesses such a URL for the first time, Cloudinary downloads the appropriate profile picture from Twitter, stores it locally in a high performance storage solution, and distributes it through a CDN. The next users to access it will receive the image quickly through the CDN while using smart cache settings.

Picture transformation

You can create transformed versions of users’ profile pictures using your required image format and dimensions. Twitter provides profile pictures in different resolutions. Cloudinary smartly decides which resolution to use as a baseline for generating the image you need.

For displaying Twitter profile pictures in your desired format and dimensions, simply pass transformation instructions as part of the URL.

For example, if the graphic design of your web site requires profile pictures in JPG of 80x120:

https://res.cloudinary.com/demo/image/twitter_name/w_80,h_120,c_fill/billclinton.jpg
80x120 JPG

When using our Ruby on Rails library, you can do the following:

twitter_name_profile_image_tag("billclinton.jpg", :width => 80, :height => 120, 
                               :crop => :fill)

See Image transformations for more details about the possible transformation options and the supported crop modes.

Automatic refresh

Cloudinary automatically checks whether your Twitter pictures have changed, according to a pre-defined caching period. If so, Cloudinary automatically re-fetches the original image as well as all transformed images. By default, Twitter images are checked for changes once every 7 days. Cloudinary customers with a paid account can request to change this default expiration time to any desired interval by submitting a support request.

  • Facebook profile pictures
  • Sprite generation
Service
  • Features
  • Pricing
  • Customers
  • FAQ
Resources
  • Documentation
  • Blog
  • Webinars
  • Cookbook
  • Knowledge Base
  • Demos
  • Support
  • Service status
Company
  • About us
  • Contact us
  • Partners
  • Careers
  • Brand assets
  • Twitter
  • Google Plus
  • Facebook
  • LinkedIn
  • RSS
Cloudinary Logo - White

© 2018 Cloudinary. All rights reserved

  • Terms of Use
  • Privacy Policy
  • DMCA Notice