TinyPNG

panda
TinyPNG was used to compress this image and subsequently decrease this page’s load time.

TinyPNG is easily the coolest tool I’ve come across recently. I was looking for an easy way to compress images used on LunchBunch’s website to improve load times, and TinyPNG couldn’t have made it any easier. I’ve compressed PNGs and JPGs (it works with both) with average compression results between 40% and 80% depending on the source and original size. The website is very easy to use too–just upload your images and download a zipped file containing the compressed versions (or optionally save directly to Dropbox). And it works just as well on PNGs with transparency.

Compression is awesome, but what about the quality? PNGs are lossless, meaning that an image won’t change when compressed, but the quality of JPGs deteriorates as the file size shrinks. You don’t have to worry about image quality with TinyJPG–see for yourself at the bottom of TinyJPG’s homepage. The compressed version is barely a quarter of the size of the original, but I can’t tell the difference between the two images!

So after learning all of this, I was hooked. I was excited to use TinyPNG for everything, but what if I want to tinify my images programmatically? Lo and behold, the developer API! With libraries for Ruby, PHP, Node.js, Python, and Java, it is very easy to incorporate TinyPNG into any project. For example, my first attempt in Python was just a few lines:

import tinify
tinify.key = "<your-developer-api-key>"

def tiny(input_filepath, output_filepath):
    source = tinify.from_file(input_filepath)
    source.to_file(output_filepath)

And it just worked!

It seems easy to preserve metadata, integrate with Amazon S3, and even crop/resize before compressing (though I haven’t explored these features yet).

Every once in a while you stumble across a tool that’s exactly what you were looking for. For me, TinyPNG was that and more. If you have a website or use pictures in any way, this is a must-have tool for your project. There’s also a WordPress plugin that is super simple and highly-recommended for your blog.

How do you use TinyPNG in your projects? Let us know in the comments below!

Happy coding!
Ryan from The Bunch

Cookies vs. Sessions

Cookies and sessions both store unique information for users. The biggest difference between them is where they are stored; cookies are stored locally on the user’s computer, and sessions are stored remotely on the server that the user is accessing via their web browser. Cookies are good for storing data that isn’t sensitive (items in a shopping cart, username, etc.), but they pose a security threat if the remote server trusts them with important information. For example, storing a username in a cookie is useful for auto-populating a login text field, but that same cookie should not be used to authenticate a logged-in user.

One of the benefits of cookies is that–because they are stored on the user’s computer–the server doesn’t need to store any information, and if there are millions of users, that’s a lot of saved space on the server! This locality is the same reason why it’s not a good idea to authenticate with cookies–they can be modified locally before being sent to the server.

Let’s look at an insecure website for example: Bob Roberts logs in with his username, broberts, and his password. After ensuring that the username and password are valid, the server returns Bob’s account page as expected and stores his username in a browser cookie. When Bob requests another page, the server checks the cookie stored on his computer to see who is logged in, sees that it’s “broberts”, and returns the requested information. Sounds good, right? But what if Bob changed the value of that cookie from broberts to bsmith? If there is another user with that username (let’s say Bill Smith), the page that the server returned to Bob would be from Bill’s account. This is where sessions come in handy.

Instead of storing “broberts” on the local machine, a session ID is stored in a local cookie that can be used to look up the session on the server. So when broberts requests a page, his computer sends the session ID to the server with the request, and the server can look up the session based on the ID that Bob sent and use that to get the username. (It’s important to note that the server is storing other information in the session to make sure that the ID wasn’t tampered with–otherwise it would be easy for Bob to change the session ID.)

This is a very brief overview, so I encourage you to read more about cookies and sessions.  These Wikipedia articles go a much deeper and have information on different types.  If you have any questions, please let me know in the comments below!

Happy coding!
Ryan from The Bunch