Recently I’ve been thinking a lot about posting photos online. Specifically because I was considering uploading a photo to Twitter before I remembered that when you uploaded a photo to Twitter it always cuts your photo in a third and show a preview of it instead of the entire photo. In the end I decided not to upload the photo because I knew it wouldn’t look its best, which is why I found the topic of my graduate class for this week to go along so nicely with the problem I was having: image optimization!

The image optimization we were talking about in class was a little different than the problem I was experiencing on Twitter. In class we were learning about how to make a photo look its best while not taking up a website’s load time. When an image is high quality, it takes longer for a web page to load because it has to add in all those beautifully sharp details.

To deal with this there are a few steps that you can take. Let’s look at how to optimize an image for the web below:

The photo itself is high quality and clear with a file size of 446 kb. That’s pretty large and will definitely take some loading time so following Orca Journey’s optimization instructions we can edit this photo.

To start I important the photo into Photoshop and after that follows the most difficult part of this process, really tricky so pay close attention. Are you listening? Okay. Don’t do anything.

Let me know if I went too fast. But seriously, that’s it! Import into Photoshop and then export it as Web Legacy. From there turn the quality down to about 75% and save the image.

Next I dropped my new photo file into ImageOptim for some additional compression and the result is posted below:

Looks almost identical, right!? But this photo clocks in at 160 kb and will take way less time for a website to load it.