You can configure the uploader to resize images before upload. This can speed up upload and download times for your images.
When creating the simple-file-upload input component, add data attributes of resize-width and/or resize-height. Optionally also provide resize-method which can be contain or crop.
You can provide resize-height or resize-width which will resize to the specified dimension and preserve the aspect ratio of the image. If you provide both resize-width and resize-height you can also provide resize-method to force contain or crop (defaults to contain).
A sample image such as this image - click to open
with no resize parameters is 3.4MB with dimensions 5184 X 3888.
<input class="simple-file-upload" data-resize-width="50" data-resize-height="50"
type="hidden" name="user[avatar_url]" id="user_avatar_url">
If data-resizeWidth="50" data-resizeHeight="50" is set on the input as shown in the above code snippet, the image now looks like this: click to open resized Image
You can see the new resized image has a size of 2KB, and dimensions of 50 X 37. Why 37? Because the default transformation is "contain" which preserves the aspect ratio of the initial image.
If you'd prefer to force the image to the dimensions you specify (width and height), you can set resize_method to crop. This will provide an image like this one
This image is 2KB with dimensions 50 x 50.
The corresponding tag for this image is:
<input class="simple-file-upload" data-resize-width="50" data-resize-height="50"
data-resize-method="crop" type="hidden" name="user[avatar_url]" id="user_avatar_url">
If you're using Ruby on Rails form helpers, the data attributes are specified like this:
<%= f.hidden_field :avatar_url, class: "simple-file-upload",
data: { resizeWidth: 50, resizeHeight: 50, resizeMethod: "crop" } %>