[Quick PhotoShop Tip] to Create a Multi-part Image Table with Slices

I'll keep this very simple.

I wanted to be able to increase the speed of loading a page that had a rather large image on it, that I couldn't shrink down to a bearable file size, otherwise.

So, I took the large image and I just sliced it in PhotoShop.

I selected areas that had the same color (background areas, mostly) into their own slices and left the detailed areas (human faces and similar) as separate slices of their own, in rectangles that border quite close to the edges of the said images, to keep manageable slices.

When I saved the work, I chose to save it as HTML + slices, so PhotoShop created for me everything that I needed, a HTML table with properly sized cells to contain each image separately, and even alignment pixel wide dots for the table corners.

One extra tip here:
Save each slice as a separate type of file to decrease even more the size of the resulting collection of files.
Keep things that need transparent backgrounds, for instance, as png24 (but smush them or use tinypng to shrink them afterwards, as PS is not so good at that) - which would usually be around the picture's margins,
BUT
use .jpg files for images in the middle (the above mentioned human faces) as there will be no need to keep the transparency layer there in the resulted sliced files.

The final result will be a table with multiple smaller images, that will load simultaneously, the overall speed of the load being much faster than for a single, BIG image.

Hope this helps you people.

Cheers!

 

Sorry to break it to you, but this technique is outdated.

You might shave of a few KB, but you dramatically increase HTTP requests

Here is a quote from "Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests"

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

Code (markup):

The article might be old, but it still holds value.

 

I am aware of that - excellent point. Thanks for your comment!

I wasn't talking about regular, day to day images, though...
I was saying what to do IF you have such a thing as a BIG, really BIG image that you HAVE to show, though...

Even when saved as a progressive jpg, it would still annoy people to have to wait for the complete download.
Yes, too many http requests would increase the load (and decrease the speed), BUT in this particular case, I believe it would enhance the overall experience of the visitor.