I’ve been with Brandfolder for almost two and a half years and I’ve seen tremendous change within the company itself and of course the advancements within our product. It’s been an exciting journey from being part of a start-up that was essentially a press kit product in 2012 to now one of the largest digital asset management (DAM) platforms.
Over the two years that I’ve been at Brandfolder I’ve had the lucky opportunity to be part of two website redesigns. The first redesign encompassed the entire website and took over a month to build. It was definitely a cumbersome process and entailed lots of design reviews and many rounds of feedback. The second time around was only targeting the home page and included a new refreshed color palette across the site. This time took less than a month and had very little back-and-forth hand-offs since we already had a design system in place and the main contributor to time efficiency was due to embedding images with CDN links.
October 2017 - A time without CDN embedding
When I was hired on in October 2017 I had no idea about the capabilities of CDN embedding. We had just built the basic back-end configuration and since this feature was simultaneously being built-on while working on the redesign it was not part of our build process yet. My workflow in rebuilding the entire website was working hand-in-hand with our only designer, so there was close collaboration and multiple hand-offs. She would provide me comps in Sketch. I would download the images and then in the code made a folder that housed all the images where I would use the relative path of the images for the source. If the image changed then I would have to get the new image from the designer and in the codebase delete the old image and finally add the new image. Sometimes an image would be replaced over 5 times, so this process was tedious and time consuming. Especially since we were touching every page of our website, which resulted in over 50 new images!
September 2019 - How times changed with CDN embedding
By 2019 when we decided to redesign our home page to target enterprise clients we had built a robust architecture to support many capabilities with our CDN embedding. Now my workflow process in building website pages was much easier and efficient with the designer. She would upload all the images into the marketing website Brandfolder into a specific section. We built our sections based on pages of the site. If she needed to replace an image all she had to do was replace the image within the Brandfolder and then anywhere on the site the image was embedded it was immediately replaced to reflect the design changes. If she didn’t have the actual image ready we would upload a placeholder image with the dimensions to at least display the placeholder in the layout to get a feel for it.
Our CDN has only improved over time. Initially you could only embed assets and if you had attachments you needed to append a position query to the end of the url.
https://cdn.brandfolder.io/I6FML9WY/as/pgltaq-5fsycg-1f0c0u/brandfolder-icon.svg?position=2
As we have seen the needs of our users evolve with embedding attachments now you can directly embed them without a query. You can easily copy the “Attachment CDN Link” and don’t have to worry about putting a query at the end of it. By embedding the attachment urls this allows them to be unique and descriptive to the specific asset, which in turns helps with SEO.
You can even adjust the sizing of the image on-the-fly with a width and height query with specific dimensions. This can significantly cut back on page load times by rendering the max dimensions the image will be.
https://cdn.brandfolder.io/I6FML9WY/as/pgltaq-5fsycg-1f0c0u/brandfolder-icon.svg?width=20&height=20
In addition, you can convert the file type of the asset. Just change the extension of the file. Even SVGs and GIFs are supported!
https://cdn.brandfolder.io/I6FML9WY/as/pgltaq-5fsycg-1f0c0u/brandfolder-icon.jpg
=>
The latest update we’ve made to our CDN is support for WebP images. By using the .auto extension we will automatically choose the best format for the browser that is loading the image. This includes sending images back as the WebP format, which lowers the size of an image, without loss, and speeds up the loading time of your image.
Not only do we have all these easy to use conversions with CDN embedding, but we also track where these CDN links are being used, so that a user doesn’t accidentally delete an asset that’s embedded live somewhere.
Now whatever page we build we have a seamless hand-off and can rapidly build the page even if we don’t have all the imagery. The developer and the designer are both happy. As a developer I don’t have to wait for the image to be finished and the designer can make as many iterations on the image as necessary. CDN embedding has definitely made a huge impact in the speed and efficiency of building our website!
As of recently, we’ve been testing home page personalizations based on industries. Not only did we swap out copy to target prospective clientele per industry, but we were able to easily replace images with CDN embedding. This allowed us to embed images that were more relevant and enticing for our target market.
Whether you work at a desk right next to your designer or you work remotely or with an international team, CDN embedding will drastically improve your workflow and will improve your brand resilience by knowing where every asset in the wild lives!
---
Here’s a blast from the past with our home page redesigns and the progression of our messaging and styling over the years.
