How to Optimize Dubsado Images and Retrieve Image URLs for Code
Images are important. Plain and simple. They help craft a story and are far more engaging than text. With the internet becoming more image dependent these days, it’s easy to overlook how much these visuals can affect a bottom line. Businesses that use visual content have a much higher conversion rate, but if they’re not properly vetted, these same images can have just as much of a negative impact.
That might seem like a bold statement, but when you consider the possibilities of using graphics and photography to support your identity system, you also have to consider the problems that may ensue if they’re not optimized for the web.
Image optimization is all about reducing the file size and compressing the image, while retaining the quality. It’s also about image SEO (search engine optimization) and getting your images to rank on search engines, but that’s a discussion for another day since Dubsado forms aren’t meant to be “found.”
This is important because you want your page to load as quickly as possible. The more time your webpage—or in our case, Dubsado form—takes to load, the more disinterested your visitors are and the higher bounce rate (the percentage of visitors who enter your site and then leave).
Nobody wants to wait around longer than a few seconds for your page to load. They’ll just move on to the next best business.
How to optimize your images
A good rule of thumb is to use images that are between 1500 and 2500 pixels wide. If you’re using a plugin that utilizes a full-width banner (e.g., Header, Welcome Banner, Carousel), make sure your image is no less than 2000 pixels wide. For all other images that do not span the full-width of a browser, make sure it’s no less than 1500 pixels wide.
When you have your images saved to the correct dimensions, drop your files into TinyPNG, wait for the compression to finish, and download your new files. When you open your zipped file, you should see a significant difference in size!
How to retrieve your image URLs for code
Now that your photos are optimized, head over to Dubsado > Templates > Forms, and choose the form that you’ll be uploading your images to. Drag an Image block onto your form and click the block. Select the image files and upload them. Click on the image you’d like to use first.
If you’re using code that requires you to use an image, then you’ll have to retrieve the image URL. To do this, right click on the Image, scroll down until you see “Copy Image Address.” Click to copy the address and then delete your image.
Next, you’ll want to head over to your HTML block (or the CSS box under Form styling > scroll down and click the “Edit CSS” button), and find the area of either HTML or CSS to paste your image URL.
