: How to optimize images to improve pagespeeds / webpage loading times? This is almost a StackOverflow question, however it's completely related to Photoshop and other tools. With every Pagespeed

@Murray976

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.

Vote Up Vote Down

@Harper654

This might also be worth a look...
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.
imageoptim.com
PS: I'm not trying to spam. :-D

Vote Up Vote Down

@Si6392903

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.

Vote Up Vote Down

@Kevin459

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.

Vote Up Vote Down

@Rivera951

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 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.

Vote Up Vote Down