WebP – Google’s Image Extension for Web Internet Browsers – How to Properly Use

150 150 rhecht

webplogoRecently, when I launched a new design for a website, one of the biggest features was a photo gallery. This photo gallery was calling a number of high-res PNG files, which was a big part that caused the home page to load slowly. Seeing few options for the same quality images at a smaller file size. I then recalled a couple of years ago when Google announced a new image format specific for web browsers. That format is WebP, and for all intents and purposes it’s the same as a PNG file at 1/5th the size, allowing for faster loading.

I immediately jumped at the chance to convert my PNG files into WebP images, and was more than pleased at the results. However, imagine my chagrin when I realized that WebP can only be used by Google Chrome and no other browser! What to do?

The simple answer seems to be that for now, make image loading browser specific, at least until all other browsers (Internet Explorer, Firefox, Safari, Opera, etc.) get up to speed. It’s a shame as WebP loads lightening-fast, but that what cross-browser compatibility is all about. If the browser is Chrome, then unleash the WebP goodness it has to offer. Else, load the slow-loading PNG files. But how?

Looking at browser-specific CSS rules, I realized then and there that from a CSS perspective, you cannot isolate Chrome from Safari, Chrome from Opera, etc. The only two ways are server-side or JQuery.

Since too much Javascript is never a good thing, I did the responsible thing: I hard-coded a condition in PHP:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false)
    // User agent is Google Chrome
    // Output WebP background CSS file
    //Output slow-loading PNG background CSS file

And voila! It worked!

Oh, before I finish, here’s a way to slightly reduce the size of your PNG files. It’s called PNGCrush and should reduce the image size by up to a quarter of what it was before. Enjoy!

Note: Being lazy, I’ve been using TinyPNG, a user-friendly PNG resizer that doesn’t compromise the size or quality of your PNG images.


Top Best Useful Infographics about HTML 5

150 150 yitzchoklevine

Everything in this Internet world is fundamentally based on web pages. Web pages are like the bricks that constitute the vast world of Internet we see and use often. Now, web pages can be active or static. Regardless of the type of web pages, it is absolutely granted that HTML is used in extensive manner to format and design the pages. Hypertext Markup Language is what HTML stands for and this language and its derivatives are mainly responsible for the decorating part of any web page. HTML 5 is one of those derivatives of HTML and HTML 5 is used more often these days as it comes with a variety of facilities.

We will now delve into those facilities by pondering over the best infographic about HTML 5.

HTML 5: Past, Present and Future

This infographic can be found on internet. It mainly depicts the development timeline of HTML 5. The past is the origin of HTML itself and it goes back to 1991 when HTML was officially documented and released. Then through the development of CSS and enhancements of HTML with versions like HTML3 and HTML4, the path of development of HTML 5 was paved. 2009 was the year when HTML 5 was released with its official documentation. The future of HTML 5 is almost certain to be bright. Browsers like Firefox and Chrome already fully support all the extensions of HTML 5 and it is only likely that all other browsers will follow suit. Newer versions of Internet Explorer are supposed to have built-in support mechanisms for HTML 5.

Why is HTML 5 Developers’ and Designers’ First Choice?

This infographic mainly concentrates on the need of HTML 5 and its advantages. The hitch of HTML 5 was that most browsers had not been supporting all the features of it. But as time goes by, all the browsers are starting to support them. Mozilla Firefox and Google Chrome are leaders in that aspect. A survey of modern day applications has estimated that by 2015 80% of all mobile applications will be using HTML 5 for their designing part. Various platforms including Windows OS, Android, Mac OS X and others are already providing built-in support functionalities for HTML 5. Also in comparison with its rival development frameworks like Silverlight, Flash, HTML 5 is comparatively cheap and more adaptable. As HTML 5 is non-native and open source, most developers and designers prefer this.

Some important and wonderful features of HTML 5

A primary feature for HTML 5 is that it incorporates platform independency. An application, built on and with HTML 5, can be run or executed on any smartphones or devices. HTML 5 actually accelerates the AJAX revolution. It is more suitable with Javascript and Jquery. It provides simple tags for audio, video and animations. The example for this could be that most YouTube videos can be played via HTML 5 player. HTML 5 provides section and article tags that can make an easy-to-build blog template. Canvas tag enables rendering of dynamic images on the fly. This is immensely important for web-based games and drawing applications.

Like any other development, HTML 5 has its disadvantages too. Those mainly include the non-support functionalities of most browsers. But this is evident from the opinions of developers, designers and users that HTML 5 is definitely the way to go now.