It all began when we have a small problem, where we wanted a small icon on our Google signup button:
Everything looks perfect, except when we view our website on high resolution or retina displays, we began to see pixelation:
Why? For the very simple fact that we made the icon using a size of 16 x 16 pixels. When it's shown on a high resolution displays, the icon is resized to more than 1.5 times its original, and therefore causing the pixelation.
Can't we just use a 24 x 24 pixels icon? Sure, but what about out other graphics on our website? They will be blurry as well. Although we can always upload a higher resolution image to ensure it displays crisply on all screen sizes, then what about their file sizes? Will it slow down our site? Lets look at a typical image we used on our website:
It is clear that increasing the resolution of our image, will increase the size to more than 5 times, while SVG will stay crisp and clear with only an 8 kB file size. With us being a maker of a powerful SVG editor, the choice is clear.
We have a small team, so we have always collaborated on everything, which is part of the reason why we built Vecta initially. A decision is made for what to put up on our website, with bullet points. Copy writing is done by multiple team mates, each doing a small part. The designer drafted a proposal for the graphics, and discussions were made as to their relevancy and then finalized.
We created a team in Vecta where everyone has access to the drawings, and then created folders, for example, Website Artworks to store all images. We then sub divide each page into their own folders, to store images for index page, benefits page and so on.
Each team mate gets to access drawings made immediately without the need for back and forth emails and differing versions of the drawing. Notifications allow everyone to stay informed about what others are doing, detecting problems early, and leverage on communication and collaboration.
When the need arise, we used Vecta's built in chat system to engage, brain storm, review or just banter. :)
After finalizing, the images are then exported and saved into a folder, where our build system will insert a cache busting hash, so our images gets cached at client side indefinitely for speedy loading of our website.
To ensure everything is sharp, Vecta do most of the heavy lifting, except when you have no strokes or even strokes on shapes, you will have to adjust X and Y position by 0.5. To understand more, do read this blog post.
Sometimes changes are unavoidable, and we could easily make changes and redeploy, since everyone has access to the files, and the process is simple.
All our images now loads quickly, have a small size footprint, and is used everywhere on our website including support pages. Even when viewed in mobile pages, whereby users might zoom in and expect a responsive page, our images stay crisp and sharp, no matter what zoom percentage is applied.
This is how Vecta has helped us to get things done faster, hope the same happens to you.
Do leave us some comments or questions.