What is Reddit's opinion of ImageOptim?

From 3.5 billion Reddit comments

When I first found JPEG optimisation tools (like jpegoptim, provided by ImageOptim on Mac OS), I thought they were the bee's knees, and applied it to everything. And then I noticed how distractingly odd it is while a crushed JPEG is loading in.

My site's image header is a leafy green cartoon scene. Instead of starting out as a blurry green rectangle and getting progressively sharper, the optimised version starts out greyscale and adds colour much later in the loading process. A huge grey rectangle sticks out like a sore thumb on the page.

Compare loading these two progressive JPEGs of mine, the first unoptimised and the second optimised with jpegoptim to save 6.3% of filesize:

http://s3.sherlockphotography.org/posts/2014/i-8VQwdGr.jpg

http://s3.sherlockphotography.org/posts/2014/i-8VQwdGr-optim.jpg

Quick heads up on the network performance side of things: Get Chrome's page speed insights extension if you haven't already.

Things you could look at:

• Concatenating your JS files - you've got 11 that could potentially be combined (depending on how the scripts are used on pages that aren't your homepage - you don't want one massive download full of stuff that's only used on the homepage)
• Serving scaled images - often you're serving images that are larger than what they are displayed as. Serving properly sized images could save you 250kb.
• Losslessly optimise your pngs - By reducing the color depth of your pngs you can save about 80kb across them all. ImageOptim is the best tool for the job.
• Reducing the quality of your jpgs - you've got 7 jpgs between 143kb and 75kb each. I bet you could increase the compression of these jpgs without a perceptible visual difference to save a fair pile of bytes (obviously you can go too far with this and end up with things that look crappy, so don't do that).
• DAT GIF, it's gorgeous, but it's also 1.6mb (which happens to be there abouts the size of the average web page these day). Perhaps simplify the color changes or the animation? Removing the rotating images when the circles are overlaying them might be a way of reducing the complexity that isn't immediately obvious to people watching it.

You spend additional time evaluating the contents of the file with different algorithms to produce a pixel-for-pixel identical image at a much smaller filesize (lossless compression).

Your image displays the same but can be half the size. Since most images on the web are uploaded once and sit forever, putting in the additional time up front to compress them better means every time they are seen they download faster and save you on bandwidth. Particularly important for mobile devices, that have lower latency, slower speeds, monthly bandwidth caps, and are more expensive per bit.

Simply scanning your existing server for pngs and then recompressing them all can be a huge savings.

If you're on a mac, toss one of your photoshop saved pngs into ImageOptim.

For Windows, try PngGauntlet.

Those are both easy to use applications. Neither one will get you maximum compression on their own, you can follow the instructions on that wiki for that if you want. I'm in the process of research, design, and planning for a cross-platform application that will produce the best possible compression every time.

It's a very simple site, so there's not much to comment on, but here are a few points...

• Compress your images better. You're using PNG-24 and honestly, its not appropriate for what you're doing. The page literally "peeled" down to my computer, and I noticed you have very heavy beasts on your page (that one image alone is 720kb). Use a 70-80 quality JPEG and you'll avoid any artifacting, plus it'll get those images down to around 150kb. Your page currently clocks in at 6.17Mb, which is utterly insane and unnecessary.
• State a fallback font in your CSS
• For images which are in PNG-24 and should be (ie: minecraft.png), run it through an image optimization program such as ImageOptim. Using that program, and without affecting any visual data at all, I dropped that 73kb file to 61kb. Same file, just all the shit taken out. Not a pixel difference in visual quality.
• Dood, seriously, wtf, spacer.gif? Use a margin.
• You're probably not coming at this from a markup perspective, but I would definitely cut back on all the <divs> and make this more a list. Float the elements, use margin.
• There's really no reason to use clear. Wrap your header in either <div id="header"> or a <header> (depending if you want to use HTML5 or not) and overflow: hidden it. You're using .clear a ton since your left and right floats in the header are not contained.

Not to burst your bubble, but save for web does an average job at best for image compression. If you're on a Mac, I highly recommend image optim (http://imageoptim.com) and compress all your images through there before publishing them online.

It's very pretty, but I'm getting some flickering on the title images in the teal header for each section.

Also, I'm pretty sure that with some good image optimization you could cut down on load times quite a bit. Dunno if you know about it, but ImageOptim has been a life saver for me.

I'm using OSX 10.8.2, Safari 6.0.2.

Have you tried just using ImageOptim before upload? http://imageoptim.com/

As far as backend, depending on what your servers use, there are compression tools that work on Python and PHP and all of that that can do it automatically.

What size is this photo that you can only get it down to 200k? That seems... REALLY high. I've worked with huge images (we're talking more than 1400x1000) that I've saved down to around 100k just using Photoshop's "Save For Web."

If you use a Mac, reduce the image size with ImageOptim. In any case, what you're doing is a bad practice, and it negatively affects the performance and the competitive aspect of the website. You'll be turning people away, while preventing the website from being index properly in search engines. Install Google Analytics and monitor the bounce rate for that gallery page.

The app ImageAlpha allows you to reduce the color palette of 24 bit pngs while retaining their full alpha channel. This will save a ton of space. http://pngmini.com/

After that you can run them through ImageOptim to losslessly reduce the file further. http://imageoptim.com/

Once in Flash make sure you've selected PNG/lossless under the images properties when they're in your library otherwise they will be converted to jpegs which will cause the file size to increase.

On the Mac, there's a wonderful program called ImageOptim which includes all 3 of those plus PNGCrush and runs them all in sequence. If you need to automate, they will all run on the command-line as well (in fact ImageOptim includes them all in separate binary form in ImageOptim.app/Contents/MacOS/—just add that to your PATH/cd into it/paste the full path into your script).

Worth noting that for PNG-related stuff there's also ImageAlpha, which can do some pretty neat tricks with palette-color images (like GIF—PNG can do this too and is sometimes, though not always, smaller) and/or transparency.

EDIT: Worth noting, though, that it looks like ImageOptim doesn't have nearly as complete a toolset for JPEG images—JPEGcrush is not included.

From it is self hosted you could use something like http://imageoptim.com/ and optimize all images, rather than use a script that cashes images. It's a great tool. I'm sure there is a windows alternative out there.

Though I should mention the one time you optimize your images your CPU will probably a lot of load

From it is self hosted you could use something like http://imageoptim.com/ and optimize all images, rather than use a script that cashes images. It's a great tool. I'm sure there is a windows alternative out there.

Though I should mention the one time you optimize your images your CPU will probably a lot of load

Try one of the myriad on/offline tools like TinyPNG/ImageOptim.

Also - http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

This may not move the needle much but take a look at this article. It may be worth testing this by disabling compression and seeing if that gives you anything.

Depending on how large your PNG files are you might be able to squeeze past the 50MB limit without messing with your audio files too much.

Avoid using @import in CSS.

Steve Souders has a good write up here

I think it's overall design is very nice, easy on the eyes, right to the point.

My biggest suggestion is to have some sort of mobile presence. Either responsive, or the m. separate site (m.doctorific.com).

You seem to be targeting people that could be on the go, having a mobile friendly site will increase traffic and how engaged your users are.

Edit: Forgot one thing, compress those images a bit more. If you use a Mac, you can use ImageOptim, not sure of a Windows alternative... sorry. But ImageOptim is great for jpg's and png's. An example of the usage, your main image of the two people (http://static.doctorific.com/images/mascots.png) was compressed by about 20% and looks the same to the eye.

Hope that helps.

Constructive criticism is definitely welcome, thank you!

I agree about the loading issue, I think I may put a static image inside the container so it's not empty while the pics load. I've optimized all the site images and photos using save-for-web in PSD and then again in ImageOptim, what are you using to get the shoes down to 50k?

My original design did use a custom font, but currently the Selectivizr polyfil, which lets you use CSS3 selectors in IE like nth-child and nth-of-type, has a bug in IE8 if you use @font-face where it just shows a blank white screen. I decided the convenience of using the CSS3 selectors (especially in a rwd) outweighed my desire for a custom font. :-\

1. http://imageoptim.com/
2. Vector work: PNG/GIF
3. Photography work: JPG and toy around with jpeg compression.
4. Use lower resolution.
5. Put less pieces on a single page
6. Get a faster internet connection
7. Switch your webhosting service