7

This is almost a StackOverflow question, however it's completely related to Photoshop and other tools. With every Pagespeed test I do for all my website I get the comment "Optimize images by lossless compressing image X" which often increases my page rank a lot.

I already save EVERY image with 'save for web' with Photoshop, but I was wondering how I could "Optimize images by compressing lossless" even more. As far as I know I'm already doing everything I can.

How can I optimise images to improve my webpage loading speeds?

Improve this question
5
  • 2
    I think this really is a question for StackOverflow. Every "page speed" test is always going to tell everyone to reduce image sizes. I, personally, think the whole "page speed" thing is a myth. You can't possibly test my connection and how fast your server loads your site on my machine.
    – Scott
    Apr 23, 2015 at 14:24
  • 1
    I'm primarily focussing on the image saving proces. I will also ask this question on SO, but I'd assume Graphic Designers also know how to save their 'artwork'. At least, these guys know a bit more of Photoshop than Programmers do, I'd say. That's why I posted this here.
    – Sander Schaeffer
    Apr 23, 2015 at 14:26
  • Related: graphicdesign.stackexchange.com/questions/15718/… and graphicdesign.stackexchange.com/questions/33749/…
    – Scott
    Apr 23, 2015 at 14:39
  • photoshop is not the best compressor atleast for png.
    – joojaa
    Apr 23, 2015 at 14:52
  • 1
    for the record, I have had website analyzers suggest that I optimize 10k images. This is an image that would have loaded in about 1 second on a 56k baud modem. The message is boilerplate.
    – Yorik
    Apr 23, 2015 at 20:48

5 Answers 5

Reset to default
8

Probably the initial step is more planning than Photoshop's.

1) Do I need an image file? Or can I use something else

  • Background-color.
  • A css gradient.

2) Do I need that file dimensions? or can I use

  • A lower dimension upscaled.
  • Mask the low resolution with something? a pattern over it, a blur, darken it.
  • A pattern.
  • Is the image really worth it to have it at high res?

3) Is the file format proper?

It is not carved in stone but:

  • Jpg for photography.
  • Png for plain colors or gradients. Logos, graphs.
  • Svg images for scalable images, plain colors, gradients.

4) Can I use an alternative for animations?

  • Animated gifs with optimized paletes and dithering.
  • Css animations.

5) Have I prepared the proper media query I need for the screen device?

  • Do I need that dimension on that device?

6) Here is the specific jpg compression comes into place

For photography. Having decided the real dimension I need:

  • Does it really matter if I can see some compression artifacts. Can I push a little more? Is it worth it?
  • Do I need to include the color profile on each photo?

Here is a "psicological" issue. When saving for web, Do you avoid using a quality 25 just becouse it says "Low" and you want your site High quality?

7) And some specifics

  • Progressive jpg uses a little more space than non progressive.
  • Turn optimize jpg on.
  • Turn off any Blur option.
  • 4:4:4 algorithms gives you better quality but less compression at higher quality. 4:2:2 compresses better.
  • Be sure to use rgb files, not cmyk.
  • Prepare your files with the color settings on "web". This way you can drop the color profile.

An optimization tool always, always will tell you do it better.

What parameter can an algorithm use to say. Oh the portrait you are showing on your website has the right ammount of "lossles" compression?

Again. "Lossles" has no meaning here.

Improve this answer
7

Before delivering your final website design, you really should optimise the images with tools that are more focused towards and dedicated to optimising images. Photoshop does okay, but I've seen many people comment that other tools do a better job.

From what I hear, ImageMagick is pretty good for this purpose. However, as a command-line-noob I need to spend a bit of time mastering it personally. If you're familiar with the command line it's probably perfect for you.

Because I don't have the time to master ImageMagick right now, I choose to look for free online optimisation tools where I can input an image and it'll spit out an optimised version.

Some of the tools I've found include:

  • Compressor.io - very few tweakable options, but pretty amazing results (averaging 60% - 80% file size reduction for me)
  • ImageOptimizer.net - looks standard
  • tinyPNG - personally used with good results (able to convert 24/32 bit PNG with alpha channel into an 8 bit PNG while retaining transparency)

I personally don't have any reason to pay for an additional tool with all of the free options available, unless I hear about a game-changing one.

You can probably find many more free online and offline tools by combining keywords such as reduce image file size, image compression, PNG / JPEG / GIF optimisation tools.

Improve this answer
0
3

From my experience, if you take the 'Saving for Web' routine from Photoshop, this will optimize the image for web. Despite this, you'll still see optimization alerts when testing page speed, but just look at the kb of optimization you will achieve. In most cases it is around 1~5kb. I agree with Scott that you shouldn't get obsessed with page speed.

If you work with WordPress, you can install optimization plugins such EWWW image optimizer, which will process each image you upload and reduce it by some percentage. It's useful if the client is to upload it on their own.

Another option is to use a desktop optimization software such as http://www.jpegmini.com/ which has a good ratio of compression to quality and has batch processing.

In your case, I think it's done. From this point you have to check the server's side, using powerful hostings like Amazon S3 or something similar and serve files from there to achieve the best performance.

Improve this answer
0

If you're a Wordpress user, you can also look at Optimus Image Optimizer (disclaimer: I work for the company that created the plugin) for lossless image compression. Nevertheless, a big differentiator with this plugin compared to others is its ability to convert images to WebP format which has been known to decrease file size by up to 26% when compared to PNGs.

This will help further improve your page speed loading times as the images are much smaller, therefore the client spends less time downloading them.

Improve this answer
0
-3

This might also be worth a look...

https://developers.google.com/speed/pagespeed/

I've used PageSpeed in the past.

It'll test load pages from your site, and offer generally helpful suggestions for speeding up the load times.

As others have pointed out - image optimization can also help greatly.

On the Mac - I use ImageOptim ... really like the results.

https://imageoptim.com

PS: I'm not trying to spam. :-D

Improve this answer
2
  • I'm not sure why all those down votes, but let met clarify that I'm already looking at PageSpeed and based on those suggestions I'm asking this question. So that part of your 'answer' is redundant. ImageOptim is a suggestion, that fits an answer. However, it's already suggested by PageSpeed, so it's nothing new. Besides that, I truly couldn't work with ImageOptim as I couldn't get it working..
    – Sander Schaeffer
    Apr 24, 2015 at 18:41
  • Often ImageOptim can take a long time to process files ...
    – FitzerIRL
    Apr 25, 2015 at 0:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.