You may have never encountered the .webp file extension before, but you probably have encountered a website that took too long to load, or loaded in the text first, and the images after a few seconds. This is due to images being one of the 'largest' parts of a website, in terms of file-size, and taking longer to download to your computer for viewing. A few years ago, Google purchased a company who's technology allowed them to develop a more compact file type that supports both lossless (like PNG) and lossy (like JPEG) compression: .wepb

WebP images are smaller than both PNG and JPEG files, while offering no visual quality difference.

One of these images is an optimized .jpg, and one is a .webp. Can you tell which is which?

 

In the above example, the .jpg file, which was optimized with Adobe Photoshop as a JPEG at 30% quality is 85.4 kilobytes, while the .webp file, which was optimized with Google's libwebp at a quality of 50% is 63.3 kilobytes: A savings of 36%. The WebP image is on the left in case you were still wondering (keep your mouse still over the image).

.WebP has been out for a few years now, and as of writing this is supported in all browsers, except for Internet Explorer. While it may not be supported on older versions (and you should avoid using only .webp if legacy support is your goal), it will work on all recent versions of Firefox, Chrome, Safari, Opera, Edge, and their mobile counterparts. You may have encountered .webp images in your everyday browsing and not have known it:

• Facebook started using .webp in 2014 and reported a 25-35% size savings for JPEG images, and 80% for PNG
• Google has been using them since inception, and has a study reporting .webp is "25-34% smaller compared to JPEG file size at equivalent SSIM index"

These size savings result in faster page loads - which - result in a better user experience. If your site contains many images, and you are looking for an easy way to reduce the size of your site's page load, exploring webp may be a good place to start. If your site only contains a few images, and your goal is a faster page load - we would recommend looking at a waterfall chart and identifying the real culprit before converting your images to .webp.

If you are reading this, then you've undoubtedly seen the term 'SSL Certificate' or just 'SSL' mentioned somewhere or other in the past few months, and you might be wondering - what is an SSL Certificate, and should my website or application have one?

SSL Certificate stands for Secure Socket Layer Certificate, which is a file that allows your website or application to create encrypted and secure connections to your users. Websites using SSL can be identified by the prefix 'https' in their URL (the 's' stands for Secure); Your browser will typically display a green lock icon or turn the URL bar green when visiting these sites.

Example of Chrome's address bar with a secure (top), and insecure (bottom) URL

One of the most common ways for hackers to steal information, and marketing companies to track users, is to intercept the data sent when they are browsing the web - this is commonly called 'sniffing'. Sniffing can easily be done on a non-SSL connection with free software - so easily, that airports, coffee shops, any public wifi you use is almost definitely intercepting your traffic to some degree, if only to serve you better advertisements.

SSL negates this vulnerability by creating a secure connection to a website, such that only the website, and your computer can understand the information being sent back and forth. So - do you need a SSL certificate? If your website has any type of form, or deals with any payment transactions, you're going to want an SSL certificate. Even a simple contact form should be secured with SSL to prevent a 3rd party from intervening. If your website doesn't have any of those - there is still a valid reason to have an SSL certificate: Google is using it as a search ranking parameter. This means that sites with an SSL certificate will appear higher in results than sites without one (https://webmasters.googleblog.com/2014/08/https-as-ranking-signal.html).

The average person is exposed to 5,000 advertisements per day, 1,825,000 a year. Whether through billboards on our way to work, tv advertisements at home, or pop-ups on Facebook, you are constantly exposed to a plethora of design in everyday life as advertisers strategically attempt to grab your attention for what little time we, as consumers, give them.

 

At first it can seem annoying to be bombarded with advertisements every day, and at some point, we might even try to ignore or avoid these nuisances. But as a designer, taking a step back and seeing a beautiful opportunity for inspiration from these advertisements could be extremely beneficial. This daily exposure can instead be seen as design research and help you in your own techniques of communicating through design. Start paying attention to every advertisement you come across and take the chance to critique and dissect what is working and what is not. Did the ad grab your attention? Can you understand the concept? Is it well executed? Is there a clear call to action? Is the point being made clearly? All these questions are important to be able to communicate properly with your target audience. To question other ad designs and their purpose will help you execute your messages better as well. Do not allow yourself to be annoyed... be inspired!

Take this inspiration to the next level…there are many other resources that can help critical and creative thinking. Read books, go to lectures, listen to podcasts, look up TED talks, research the greatest designers past and present. Allow yourself to form an opinion of what you believe works and what does not work. With all of this, experiment and have fun with design! Learn to love to make connections with everything around you from graphic design to architectural design to psychology, the medical field, even sports. The more connections you can make and relate to design, the more opportunities you create for inspiration in your design to better relate and communicate to your audiences.