We’ll assume that a form with a file upload field has already been set up.
Our goal is to add image editing to this field without having to modify any existing code.
To speed up the image upload. A lower image size results in faster uploads, improved upload stability, and less disk usage;
To receive better user generated content. With some guidance users can crop the important parts of an image;
To lower image upload friction. End users aren’t designers. If an image isn’t in our desired aspect ratio or bigger than the maximum file size they won’t always know how to fix that;
When we optimise images before uploading, we not only get better images, we also get more images because there’s less users that will exit our form out of frustration.
CropGuide helps with:
Enforcing a crop aspect ratio;
Requiring a minimum image size;
Automatically scale images to a maximum size;
Compressing images or converting image formats;
Fixing image orientation issues;
Installation only takes a couple minutes and requires two steps:
- We create a CropGuide account
- We add the CropGuide
<script>to our webpage
CropGuide now automatically intercepts each file upload and offers an image editor to the user. We can set our image requirements in the CropGuide dashboard.
Important: Images aren’t uploaded to CropGuide, image editing happens in the browser which is great for privacy and performance.
This is what our code looks like.
<!-- The existing file input somewhere in our form --> <input type="file" /> <!-- The script tag we just added to our page --> <script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC"> </script>
Our users can now more easily upload images, resulting in higher quality images and more images uploaded. We save time correcting image problems on the server and helping users prepare their images.