How to quickly slice a large PNG user case into multiple images for my Behance portfolio?

[Solitaire Solidaire]

Hello Community,

I am working on my Behance portfolio and have a large user case created in Figma (1440x13325px), which I exported as a single PNG image. I would like to slice this image into multiple smaller images to optimize loading times.

Could anyone guide me through the process of slicing this large PNG image into multiple smaller images using Adobe Photoshop?

I am looking for a quick and efficient method to accomplish this task.

Any help or suggestions would be greatly appreciated!

Thank you in advance!

[Stephen_A_Marsh]

There are a number of scripts for this task;

https://www.andrewnoske.com/wiki/Adobe_Photoshop_-_Scripts_Related_to_Montaging

Some others:

https://community.adobe.com/t5/photoshop-ecosystem-discussions/exporting-a-sliced-image-into-seperat...

https://community.adobe.com/t5/photoshop-ecosystem-discussions/divide-my-image-to-layers/m-p/1246703...

https://community.adobe.com/t5/photoshop/how-to-slice-a-very-large-poster/m-p/10998357

https://community.adobe.com/t5/photoshop-ecosystem-discussions/slicing-a-very-image-24k-px-x-34k-px-...

https://community.adobe.com/t5/photoshop/dividing-big-document-to-smaller-ones/m-p/9311087

https://community.adobe.com/t5/photoshop-ecosystem-discussions/dividing-big-document-to-smaller-ones...

[Solitaire Solidaire]

Thank you for the many options offered. I have another question. It's the first time I'm running a script. If I want to use this one https://www.andrewnoske.com/wiki/Adobe_Photoshop_-_Scripts_Related_to_Montaging, how do I download it to my computer and then access it with Photoshop? Thank you.

[Stephen_A_Marsh]

https://prepression.blogspot.com/2017/11/downloading-and-installing-adobe-scripts.html?m=1

How will you combine the split images using HTML?

[jane-e]

@Solitaire Solidaire 

There is a Slice tool in Photoshop that allows you to optimize each "slice" separately. Photoshop then creates a separate image for each "slice" as well as html code to put all the images into a table so they will appear to be one image again when viewed in a browser where the code will work. This was something we used before CSS and divs and is no longer recommended.

If you use slices, how will you put them back together again? Does Behance let you edit the xhtml code and use tables?

Jane

[Stephen_A_Marsh]

That was my first thought too Jane, however, as Save for Web has an 8192px limit, one would first need to crop the main file to fit the restriction, then slice multiple source files. Not impossible, just messy... But as you mention, at least Save for Web will generate the HTML code.

[jane-e]

@Stephen_A_Marsh 

Do your scripts create the html code to put the smaller images into a table so it looks like one image again? If not, that might need to be hand-coded, assuming you can edit the html for Behance.

Jane

[Stephen_A_Marsh]

@jane-e 

No, none of the scripts create the code.

So pre-splitting the PSD so that it is under 8192px is probably the best that can be done, there are trade offs either way I'm afraid.

I'd use a guide set to create the grid using guides. Then crop the original image into two images. Then create slices from guides in each separate image that is under the 8192px length/width limit. Then use Save for Web (Legacy) to save the image slices and corresponding HTML code to display the images as a single image. As there are now two separate HTML tables, you'll need to account for this.