Remember the days of creating 8-bit grapghics for the purpose of getting some that old school gaming vibe in your designs. Well guess what, this isn’t an article about that however we do take you back to creating pixels again with Patternify.
Patternify allows designers to create basic repeatable backgrounds complete with preview, image export and my personal favorite, base64/png data format. Within seconds of using the tool I’m sure you will quickly see how valuable it is and will add it to your arsenal of free tools to use. My main use for it is creating backgrounds that require a certain level of opacity control. As we all know, you can use background colors in CSS for modern browsers however you can have mixed experiences and levels of control across the browsers.
Therefore I frequently use this method to create simple one pixel background images at whatever opacity I need and include it directly into my stylesheet via base64 code. This saves a little bandwidth on the end users load time in a similar fashion as image sprites as well as size since their isn’t any extensive meta or header information that is typically found within a file with an extension such as jpg or png.
There is a draw back to be aware of though. By not actually calling upon a physical file, you rely on the browser and the end users CPU and GPU to render the base64 code to as the intended image. This can box down the browser when using the method too often or on images patterns of complexity.