Create
I wrote the LifeSciHack website. I debated for a long time on how to design the splash page. If you scout through the github repository you will find buried a plethora of commits as I went through each iteration of mock-ups, navigations, content etc. Eventually I decided to start anew and start fresh with a picture. From the vast selection available to me on the Envato Elements store I landed on this one.
It had a grey overtone with a radiant blue heart. Not overpowering to any visitor of the website but enough to capture their attention. Excited to use it, I slapped some pretty ParticleJS and our LifeSciHack logo over the image and in no time I landed with something looked very aesthetically beautiful.
The splash screen was received really well at the LifeSciHack London event with folk requesting me to do this for their websites. This one image notably elevated my event’s brand and gave users a more relaxed feel when entering the website.
Destroy
Unfortunately, the website loaded slow. Countless users were stuck pending on the pre-loader gif.
The fun animation gets old pretty quick, especially if you are pending for more than 15 seconds. As any developer would I followed the standard set of protocols for dealing with slow load times: minifying CSS, minifying JS, making sure all my packages were local and not calling from CloudFare, and implemented a CDN using Github Pages.
Only after scouring around on the network tab did I realize that all my images were roughly 19 MB big! That means anytime a potential participant or sponsor loaded the website it was monumentally slow (even more in international countries).
I also didn’t realize the impact it would have on user experience. Often I navigate away from page if it doesn’t load under 5 seconds (I’m impatient), so I cannot imagine what it took for someone to wait 15 seconds.
Much to my benefit and many thanks, my girlfriend Elena, turned me on to a website called compressor.io
It was here I was able to reduce the image from 19 MB to 65 KB in a second. From there everything fell into place, the website loaded much faster including internationally and we received even more sponsorship!
In conclusion, an image can create, destroy or even do both to a website so be precarious in what you choose. A good rule of thumb in the front-end world is
Always compress your images
