How To Resize A Photo For Iphone Wallpaper

We are a Swiss Army knife for your files

Transloadit is a service for companies with developers. We handle their file uploads and media processing. This means that they can save on development time and the heavy machinery that is required to handle big volumes in an automated way.

We pioneered with this concept in 2009 and have made our customers happy ever since. We are still actively improving our service in 2021, as well as our open source projects uppy.io and tus.io, which are changing how the world does file uploading.

Crop a picture to fit the background dimensions of the Apple iPhone 11 Pro Max while keeping the file size low

Using a combination of our Robots we can create outstanding results, in this demo we will use two of them: the /image/resize Robot, allowing us to manipulate uploaded image and our /image/optimizeRobot, to reduce the size of our image while maintaining the same visual quality.

For this demo, we will be looking into how we can convert an uploaded image to fit the background dimensions of the Apple iPhone 11 Pro Max at 1242x2688, then optimize the image, reducing the file size as to conserve as much storage as possible.

For resizing we need to set a resize strategy, for this post fillcrop will do the job. However for other creations using this Robot, another strategy may be more appropriate.

⚠️ It seems your browser does not send the referer, which we need to stop people from (ab)using our demos in other websites. If you want to use the demos, please allow your browser to send its referer to us. Adding us to the whitelist of blockers usually helps.

1. Handle uploads

We can handle uploads of your users directly. Learn more ›

2. Resize images to 1080×2340 using the fillcrop strategy

We can resize, crop, and (auto-)rotate images, or apply watermarks and other effects, and much more. Learn more ›

3. Optimize images without quality loss

We can resize, crop, and (auto-)rotate images, or apply watermarks and other effects, and much more. Learn more ›

4. Export files to Amazon S3

We export to the storage platform of your choice. Learn more ›

Live Demo. See for yourself

0% Complete

Starting upload ...

This live demo is powered by Uppy, our open source file uploader that you can also use without Transloadit, and tus, our open protocol for resumable file uploads that is making uploading more reliable across the world.

Build this in your own language

                  {   ":original": {     "robot": "/upload/handle"   },   "resized": {     "use": ":original",     "robot": "/image/resize",     "width": 1080,     "height": 2340,     "resize_strategy": "fillcrop",     "imagemagick_stack": "v2.0.7"   },   "optimize": {     "use": "resized",     "robot": "/image/optimize"   },   "exported": {     "use": [       "resized",       "optimize",       ":original"     ],     "robot": "/s3/store",     "credentials": "YOUR_AWS_CREDENTIALS",     "url_prefix": "https://demos.transloadit.com/"   } }

                  # Prerequisites: brew install curl jq || sudo apt install curl jq # To avoid tampering, use Signature Authentication echo '{   "auth": {     "key": "YOUR_TRANSLOADIT_KEY"   },   "steps": {     ":original": {       "robot": "/upload/handle"     },     "resized": {       "use": ":original",       "robot": "/image/resize",       "width": 1080,       "height": 2340,       "resize_strategy": "fillcrop",       "imagemagick_stack": "v2.0.7"     },     "optimize": {       "use": "resized",       "robot": "/image/optimize"     },     "exported": {       "use": [         "resized",         "optimize",         ":original"       ],       "robot": "/s3/store",       "credentials": "YOUR_AWS_CREDENTIALS",       "url_prefix": "https://demos.transloadit.com/"     }   } }' |curl \     --request POST \     --form 'params=<-' \     --form my_file1=@./forest.jpg \   https://api2.transloadit.com/assemblies \ |jq

Read docs: cURL

                  // Add 'Transloadit' to your Podfile, run 'pod install', add credentials to 'Info.plist' import Arcane import TransloaditKit  // Set Encoding Instructions var AssemblySteps: Array = Array<Step>() // An array to hold the Steps  var Step1 = Step (key: ":original") // Create a Step object Step1?.setValue("/upload/handle", forOption: "robot") // Add the details AssemblySteps.append(Step1) // Add the Step to the array  var Step2 = Step (key: "resized") // Create a Step object Step2?.setValue(":original", forOption: "use") // Add the details Step2?.setValue("/image/resize", forOption: "robot") // Add the details Step2?.setValue(2340, forOption: "height") // Add the details Step2?.setValue("v2.0.7", forOption: "imagemagick_stack") // Add the details Step2?.setValue("fillcrop", forOption: "resize_strategy") // Add the details Step2?.setValue(1080, forOption: "width") // Add the details AssemblySteps.append(Step2) // Add the Step to the array  var Step3 = Step (key: "optimize") // Create a Step object Step3?.setValue("resized", forOption: "use") // Add the details Step3?.setValue("/image/optimize", forOption: "robot") // Add the details AssemblySteps.append(Step3) // Add the Step to the array  var Step4 = Step (key: "exported") // Create a Step object Step4?.setValue(["resized","optimize",":original"], forOption: "use") // Add the details Step4?.setValue("/s3/store", forOption: "robot") // Add the details Step4?.setValue("YOUR_AWS_CREDENTIALS", forOption: "credentials") // Add the details Step4?.setValue("https://demos.transloadit.com/", forOption: "url_prefix") // Add the details AssemblySteps.append(Step4) // Add the Step to the array  // We then create an Assembly Object with the Steps and files var MyAssembly: Assembly = Assembly(steps: AssemblySteps, andNumberOfFiles: 1)  // Add files to upload MyAssembly.addFile("./forest.jpg")  // Start the Assembly Transloadit.createAssembly(MyAssembly)   // Fires after your Assembly has completed transloadit.assemblyStatusBlock = {(_ completionDictionary: [AnyHashable: Any]) -> Void in   print("\(completionDictionary.description)") }

Read docs: TransloaditKit

                  <body>   <form action="/uploads" enctype="multipart/form-data" method="POST">     <input type="file" name="my_file" multiple="multiple" />   </form>    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>   <script src="//assets.transloadit.com/js/jquery.transloadit2-v3-latest.js"></script>   <script type="text/javascript">   $(function() {     $('form').transloadit({       wait: true,       triggerUploadOnFileSelection: true,       params: {         auth: {           // To avoid tampering use signatures:           // https://transloadit.com/docs/api/#authentication           key: 'YOUR_TRANSLOADIT_KEY',         },         // It's often better store encoding instructions in your account         // and use a `template_id` instead of adding these steps inline         steps: {           ':original': {             robot: '/upload/handle'           },           resized: {             use: ':original',             robot: '/image/resize',             height: 2340,             imagemagick_stack: 'v2.0.7',             resize_strategy: 'fillcrop',             width: 1080           },           optimize: {             use: 'resized',             robot: '/image/optimize'           },           exported: {             use: ['resized','optimize',':original'],             robot: '/s3/store',             credentials: 'YOUR_AWS_CREDENTIALS',             url_prefix: 'https://demos.transloadit.com/'           }         }       }     });   });   </script> </body>

Read docs: jQuery SDK

                  <!-- This pulls Uppy from our CDN. Alternatively use `npm i @uppy/robodog --save` --> <!-- if you want smaller self-hosted bundles and/or to use modern JavaScript --> <link href="//releases.transloadit.com/uppy/robodog/v2.0.1/robodog.min.css" rel="stylesheet"> <script src="//releases.transloadit.com/uppy/robodog/v2.0.1/robodog.min.js"></script> <button id="browse">Select Files</button> <script>   document.getElementById('browse').addEventListener('click', function () {     var uppy = window.Robodog.pick({       providers: [ 'instagram', 'url', 'webcam', 'dropbox', 'google-drive', 'facebook', 'onedrive' ],       waitForEncoding: true,       params: {         // To avoid tampering, use Signature Authentication         auth: { key: 'YOUR_TRANSLOADIT_KEY' },         // To hide your `steps`, use a `template_id` instead         steps: {           ':original': {             robot: '/upload/handle'           },           resized: {             use: ':original',             robot: '/image/resize',             height: 2340,             imagemagick_stack: 'v2.0.7',             resize_strategy: 'fillcrop',             width: 1080           },           optimize: {             use: 'resized',             robot: '/image/optimize'           },           exported: {             use: ['resized', 'optimize', ':original'],             robot: '/s3/store',             credentials: 'YOUR_AWS_CREDENTIALS',             url_prefix: 'https://demos.transloadit.com/'           }         }       }     }).then(function (bundle) {       // Due to `waitForEncoding: true` this is fired after encoding is done.       // Alternatively, set `waitForEncoding` to `false` and provide a `notify_url`       // for Async Mode where your back-end receives the encoding results       // so that your user can be on their way as soon as the upload completes.       console.log(bundle.transloadit) // Array of Assembly Statuses       console.log(bundle.results)     // Array of all encoding results     }).catch(console.error)   }) </script>

Read docs: Uppy File Uploader

                  // yarn add transloadit || npm i transloadit --save-exact const Transloadit = require('transloadit')  const transloadit = new Transloadit({   authKey: 'YOUR_TRANSLOADIT_KEY',   authSecret: 'YOUR_TRANSLOADIT_SECRET' })  // Set Encoding Instructions const options = {   files: {     // Add files to upload     'myfile_1': './forest.jpg',   },   params: {     steps: {       ':original': {         robot: '/upload/handle',       },       resized: {         use: ':original',         robot: '/image/resize',         height: 2340,         imagemagick_stack: 'v2.0.7',         resize_strategy: 'fillcrop',         width: 1080,       },       optimize: {         use: 'resized',         robot: '/image/optimize',       },       exported: {         use: ['resized','optimize',':original'],         robot: '/s3/store',         credentials: 'YOUR_AWS_CREDENTIALS',         url_prefix: 'https://demos.transloadit.com/',       },     }   } } // Start the Assembly const result = await transloadit.createAssembly(options) console.log({ result })

Read docs: Node SDK

                  [sudo] npm install transloadify -g  export TRANSLOADIT_KEY="YOUR_TRANSLOADIT_KEY" export TRANSLOADIT_SECRET="YOUR_TRANSLOADIT_SECRET"  # Save Encoding Instructions echo '{   ":original": {     "robot": "/upload/handle"   },   "resized": {     "use": ":original",     "robot": "/image/resize",     "width": 1080,     "height": 2340,     "resize_strategy": "fillcrop",     "imagemagick_stack": "v2.0.7"   },   "optimize": {     "use": "resized",     "robot": "/image/optimize"   },   "exported": {     "use": [       "resized",       "optimize",       ":original"     ],     "robot": "/s3/store",     "credentials": "YOUR_AWS_CREDENTIALS",     "url_prefix": "https://demos.transloadit.com/"   } }' > ./steps.json  transloadify \   --input "./forest.jpg" \   --output "./output.example" \   --steps "./steps.json"

Read docs: Transloadify

                  // composer require transloadit/php-sdk use transloadit\Transloadit; $transloadit = new Transloadit([   "key" => "YOUR_TRANSLOADIT_KEY",   "secret" => "YOUR_TRANSLOADIT_SECRET", ]);  // Add files to upload $files = []; array_push($files, "./forest.jpg")  // Start the Assembly $response = $transloadit->createAssembly([   "files" => $files,    "params" => [     "steps" => [       ":original" => [         "robot" => "/upload/handle",       ],       "resized" => [         "use" => ":original",         "robot" => "/image/resize",         "height" => 2340,         "imagemagick_stack" => "v2.0.7",         "resize_strategy" => "fillcrop",         "width" => 1080,       ],       "optimize" => [         "use" => "resized",         "robot" => "/image/optimize",       ],       "exported" => [         "use" => ["resized", "optimize", ":original"],         "robot" => "/s3/store",         "credentials" => "YOUR_AWS_CREDENTIALS",         "url_prefix" => "https://demos.transloadit.com/",       ],     ],   ], ]);

Read docs: PHP SDK

                  # gem install transloadit transloadit = Transloadit.new(   :key => "YOUR_TRANSLOADIT_KEY",   :secret => "YOUR_TRANSLOADIT_SECRET" )  # Set Encoding Instructions :original = transloadit.step ":original", "/upload/handle", ) resized = transloadit.step "resized", "/image/resize",   :use => ":original",   :height => 2340,   :imagemagick_stack => "v2.0.7",   :resize_strategy => "fillcrop",   :width => 1080 ) optimize = transloadit.step "optimize", "/image/optimize",   :use => "resized", ) exported = transloadit.step "exported", "/s3/store",   :use => ["resized","optimize",":original"],   :credentials => "YOUR_AWS_CREDENTIALS",   :url_prefix => "https://demos.transloadit.com/" )  assembly = transloadit.assembly(   :steps => [ :original, resized, optimize, exported ] )  # Add files to upload files = [] files.push("./forest.jpg")  # Start the Assembly response = assembly.create! *files  until response.finished?   sleep 1; response.reload! end  if !response.error?   # handle success end

Read docs: Ruby SDK

                  # pip install pytransloadit from transloadit import client  tl = client.Transloadit('YOUR_TRANSLOADIT_KEY', 'YOUR_TRANSLOADIT_SECRET') assembly = tl.new_assembly()  # Set Encoding Instructions assembly.add_step(':original', {   'robot': '/upload/handle' }) assembly.add_step('resized', {   'use': ':original',   'robot': '/image/resize',   'height': 2340,   'imagemagick_stack': 'v2.0.7',   'resize_strategy': 'fillcrop',   'width': 1080 }) assembly.add_step('optimize', {   'use': 'resized',   'robot': '/image/optimize' }) assembly.add_step('exported', {   'use': ['resized','optimize',':original'],   'robot': '/s3/store',   'credentials': 'YOUR_AWS_CREDENTIALS',   'url_prefix': 'https://demos.transloadit.com/' }) # Add files to upload assembly.add_file(open('./forest.jpg', 'rb'))  # Start the Assembly assembly_response = assembly.create(retries=5, wait=True)  print assembly_response.data.get('assembly_id')  # or print assembly_response.data['assembly_id']

Read docs: Python SDK

                  // go get gopkg.in/transloadit/go-sdk.v1 package main  import ( 	"fmt"  	"gopkg.in/transloadit/go-sdk.v1" )  options := transloadit.DefaultConfig options.AuthKey = "YOUR_TRANSLOADIT_KEY" options.AuthSecret = "YOUR_TRANSLOADIT_SECRET" client := transloadit.NewClient(options)  // Initialize new Assembly assembly := transloadit.NewAssembly()  // Set Encoding Instructions assembly.AddStep(":original", map[string]interface{}{   "robot": "/upload/handle" }) assembly.AddStep("resized", map[string]interface{}{   "use": ":original",   "robot": "/image/resize",   "height": 2340,   "imagemagick_stack": "v2.0.7",   "resize_strategy": "fillcrop",   "width": 1080 }) assembly.AddStep("optimize", map[string]interface{}{   "use": "resized",   "robot": "/image/optimize" }) assembly.AddStep("exported", map[string]interface{}{   "use": ["resized", "optimize", ":original"],   "robot": "/s3/store",   "credentials": "YOUR_AWS_CREDENTIALS",   "url_prefix": "https://demos.transloadit.com/" })  // Add files to upload assembly.AddFile("myfile_1", "./forest.jpg")  // Start the Assembly info, err := client.StartAssembly(context.Background(), assembly) if err != nil {   panic(err) }  // All files have now been uploaded and the Assembly has started but no // results are available yet since the conversion has not finished. // WaitForAssembly provides functionality for polling until the Assembly // has ended. info, err = client.WaitForAssembly(context.Background(), info) if err != nil {   panic(err) }  fmt.Printf("You can check some results at: \n") fmt.Printf("  - %s\n", info.Results[":original"][0].SSLURL) fmt.Printf("  - %s\n", info.Results["resized"][0].SSLURL) fmt.Printf("  - %s\n", info.Results["optimize"][0].SSLURL) fmt.Printf("  - %s\n", info.Results["exported"][0].SSLURL)

Read docs: Go SDK

                  // compile 'com.transloadit.sdk:transloadit:0.1.5' import com.transloadit.sdk.Assembly; import com.transloadit.sdk.Transloadit; import com.transloadit.sdk.exceptions.LocalOperationException; import com.transloadit.sdk.exceptions.RequestException; import com.transloadit.sdk.response.AssemblyResponse;  import java.io.File; import java.util.HashMap; import java.util.Map;  public class Main {   public static void main(String[] args) {     Transloadit transloadit = new Transloadit("YOUR_TRANSLOADIT_KEY", "YOUR_TRANSLOADIT_SECRET");     Assembly assembly = transloadit.newAssembly();     // Set Encoding Instructions      Map<String Object> originalStepOptions = new HashMap();          assembly.addStep(":original", "/upload/handle", originalStepOptions);             Map<String Object> resizedStepOptions = new HashMap();     resizedStepOptions.put("use", ":original");     resizedStepOptions.put("height", 2340);     resizedStepOptions.put("imagemagick_stack", "v2.0.7");     resizedStepOptions.put("resize_strategy", "fillcrop");     resizedStepOptions.put("width", 1080);     assembly.addStep("resized", "/image/resize", resizedStepOptions);             Map<String Object> optimizeStepOptions = new HashMap();     optimizeStepOptions.put("use", "resized");     assembly.addStep("optimize", "/image/optimize", optimizeStepOptions);             Map<String Object> exportedStepOptions = new HashMap();     exportedStepOptions.put("use", new String[]{"resized", "optimize", ":original"});     exportedStepOptions.put("credentials", "YOUR_AWS_CREDENTIALS");     exportedStepOptions.put("url_prefix", "https://demos.transloadit.com/");     assembly.addStep("exported", "/s3/store", exportedStepOptions);             // Add files to upload     assembly.addFile(new File("./forest.jpg"));          // Start the Assembly     try {       AssemblyResponse response = assembly.save();              // Wait for Assembly to finish executing       while (!response.isFinished()) {         response = transloadit.getAssemblyByUrl(response.getSslUrl());       }              System.out.println(response.getId());       System.out.println(response.getUrl());       System.out.println(response.json());     } catch (RequestException | LocalOperationException e) {       // Handle exception here     }   } }

Read docs: Java SDK

So many ways to integrate

Transloadit is a service for companies with developers. As a developer, there are many ways you can put us to good use.

Bulk imports

Add one of our import Robots to acquire and transcode massive media libraries.
Handling uploads
Front-end integration

We integrate with web browsers via our next-gen file uploader Uppy and SDKs for Android and iOS.
Back-end integration

Send us batch jobs in any server language using one of our SDKs or directly interfacing with our REST API.
Pingbacks

Configure a notify_url to let your server receive transcoding results JSON in the transloadit POST field.

We love seeing how our community uses Transloadit. Tweet @transloadit to get your proposal approved, share what you've built in the form of a blog post or a tutorial on your website, and earn a $300 Gift certificate of your choice as well as a full year of the Startup Plan, at no cost after you publish.

Get started for free with the Community Plan, or, if you are a student, get an upgrade via the GitHub Student Developer Pack.

Get started for free

Free plan with 5 GB encoding credit
Set monthly spending limits
Try without a credit card
Highly available, globally distributed platform
Cancel at any time
Costs displayed for each upload/conversion

Follow us on Twitter:

Follow @transloadit

Join 20k+ developers

Sign up for our monthly newsletter to receive direct links to 3 exclusive tech — and 2 product updates. No less, no more.

We're SO STOKED to announce the Transloadit Community Plan! 🎉🎉🎉 Unlimited uploading, importing and exporting, 5GB of encoding/month, and access to 50 different file conversion features for all.

Best part? It's free. Forever. 🤑 Find out more https://t.co/zXWLi3Xa0G pic.twitter.com/DlY5xz1mPG

— 🤖 Transloadit (@transloadit) July 2, 2020

Get started today

Our Community Plan is free forever and suffices for most projects. Signup is instant. No credit card needed.

Star Uppy on GitHub:

Star

What's happening on Twitter

Need help? Talk to a human

Other cool demos