First you have to think about the file format of an image. There are three typical formats i choose from – JPG, PNG and SVG.
JPEG
JPGs are great for photos. I often use photos for banner and slider in the title area of a page. But JPGs (or JPEG) have a disadvantage: The compression is not lossless. You loose quality each time you save a JPEG. It would be wise to edit the photo in a lossless format like PSD or TIFF and export the photo on the last step for the website. For header (hero) images with full width size, i export the photo to 1500px width. This is ok for most circumstances. The visitor of your website will not see a real difference on a bigger sized photo, because he is focused on the contend and not on the pixels. Bigger sizes are much bigger in file size too and this will slow down your website loading speed. If you export your photos in Photoshop, choose "Save to Web" for a way to control the file size. In Affinity Photo you can export as JPG in Best Quality or High Quality. Just be sure if you are scaling down your photo at this point to change the Resample setting from Bilinear to Bicubic, because Bilinear will make your photo unsharp. And don't get to much down with the quality slider.
PNG
I choose the PNG format for all images with transparency. JPG does not support transparency. And for best quality i choose PNG-24. The file size will often be much bigger as a JPG in the same size. But we will compress them later.
SVG
SVG (Scalable Vector Graphics) are great for logos. Because they are vector based, they can be scaled to any size without loosing quality. If you know the EPS format from prepress, it is similar. You can create SVG in many apps. I prefer Affinity Designer. Often you get a logo from a client as a png, gif our jpg. Don't use it. The extra afford to rebuild the logo and use it as an SVG is worth it. It will be much sharper on any display and you don't get into the trap if you need to use the logo much bigger. Sadly RapidWeaver does not support SVG very much today. You can not drag and drop a SVG for your Site Logo in RapidWeaver and you can not use them directly while building your websites. With Stacks and Foundation it is at some points better to use SVG. You can use the GraphicStack by Stacks4Stacks to include SVG in your website.
Compression
Let us take an example photo. I took this one from Rawpixel.com
Exported in Affinity Photo with JPEG (best quality) it has a file size of 1,22 MB. This is much to big for a web page.
ImageOptim
The first tool what i used from time to time is ImageOptim. Let us try it what it will do with this image. Drag and drop and...
It will save us 11,7% which is not that much. We want photos below the 200kB mark for our website.
But the result is lossless. You can enable lossy compression in prefs and can get much smaller file sizes.
TinyPNG
The next test is the webservice TinyPNG. It will compress PNG and JPG. Drag and drop your images on the website and the compression starts.
This is what we really wanted to get. A file size below 200kB is perfect for header images on websites. Great. Drag your images on the site and download great compressed images on your computer.
Conclusion
I use this service for all my images and am happy with the result. Exporting for web with Photoshop and finding a setting perfect for the image is not necessary any more for most of my photos. I can compress them in a batch.
There are more tools out there. What is your way?
25 Nov. 2016
UPDATE
Realmac Software released Squash 2, a nice app to compress images automatically. How good does it perform?I tested it with a JPG image I have included on my website.
Original file size: 166.77 kb
ImageOptim: (setting 75%) 33.89 kb
Squash 2 (setting: 75%) 84.00 kb
TinyPNG: 38.78 kb
PhotoBulk (setting: 75%) 38.55 kb
I think if Realmac Software will optimize the Squash 2, it would make a great job.
For my taste it has too much animation and sound while compressing (sounds can be disabled).
Get all images:
https://jochenabitz.de/cloud/index.php/s/sMdQwKqh3NQJLmj