There are quite a few options in the “Save for Web” area. To save you some time here are the settings I used in the video for saving my image in Photoshop:
There are two options on the Kraken.io Web Interface image optimisation page. It isn’t immediately obvious what the difference is so below I’ve written a short overview of them both. I recommend using both options on large images and then choose which is best since it heavily depends on the image you’re optimising.
The lossy option is best for things like big background images where file size is going to be the main concern. I’d advise double checking against the original image as quality can be heavily affected on things like patterns and gradients.
The lossless option will optimise your images as far as possible without changing a single pixel. This is a good option when the quality of the image is most important.
It shouldn’t surprise you that some people don’t bother optimising their images for the web. This is a big problem for your users. Try to remember that not every user is on the same computer with the same connection as you are. Also things like images load much faster locally than from your web server, just because images load quickly in development it’s not always how it’ll be online.
Trent Walton, of Paravel, wrote an article on his blog a while back titled “Optimizing Images”. Here’s a quote from his article that pretty much sums it up:
Friends don’t let friends load 300kb PNG images on their websites.
Image optimisation is a must have, especially if you have a responsive site. Imagine being on a 3G connection and trying to download a 300kb image. That isn’t a good experience for anyone.
Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.