How to optimize images to improve pagespeeds / webpage loading times?


Question

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?

1
7
4/23/2015 2:48:00 PM

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.

8
5/31/2016 8:51:00 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
^