Back to Blog

How to optimize images for Dubsado Forms

If you’re adding custom code to your Dubsado Forms, you’ll most likely need somewhere to host any images you’re planning to use. Here’s my advice on how to prepare and optimise your images before adding them to your Dubsado Proposals. Hosting your images You’ll need somewhere to host your images, there are two options: Upload […]

If you’re adding custom code to your Dubsado Forms, you’ll most likely need somewhere to host any images you’re planning to use. Here’s my advice on how to prepare and optimise your images before adding them to your Dubsado Proposals.

Hosting your images

You’ll need somewhere to host your images, there are two options:

  • Upload them to Dubsado
  • Upload them to your own website

Uploading them to Dubsado will be better in terms of form speed, however, with only a few images, the difference will be minimal so don’t worry too much!

However, for images that may change, I tend to host them on my website so I can quickly update the image and have that reflect across all of my forms in one click. (ShortPixel’s  Enable Media Replace plugin is awesome for this if you’re on WordPress)

How to find your image URL in Dubsado

It’s really easy to upload your images to Dubsado. Head to any Dubsado form, by going to Templates then forms. Now you can simply drag an image block into a form and upload an image as usual.

Once your image is in your form you can right-click on the image and copy the image address. Make sure you add your image into the actual form because right-clicking, otherwise you’ll be getting the image address for the teeny tiny thumbnail, and it’s going to be a blurred mess.

Once you’ve got the URL you can delete the image element from your form. Just make sure you keep that image URL safe for when you need it! You’ll then be able to head to your code block and insert the URL within your HTML or CSS code.

Image Sizing & quality

Similarly to website creation, we need to be mindful of the size of our images. Oversized images will add to your load speed, regardless of where they are hosted. It’s important to optimise our images by compressing them to reduce file size, but we still need to retain image quality.

Optimising your images for Dubsado is so important because, people will simply click away if your form takes too long to load. People are impatient, and nobody wants to wait longer than a few seconds to view your proposal.

Before uploading images you should make sure to resize them. If an image will be full width, a good rule of thumb is to resize your images to around 1800px wide. If they are going to be smaller, you can make them smaller.

You may also want to compress your images for quality, you can do this on your editing tool such as photoshop, or you can use an online tool like Shortpixel. Simply upload your images, use their awesome compressing tool, and download! You’ll notice how much smaller your image sizes are, yet they look exactly the same.