When working with large image file sizes for screen display, designers can be faced with the challenge of reducing its file size to increase efficiency and reduce loading time. I came across this challenge in a recent project, and I was required to cut up an image into over 100+ smaller images to reduce the overall size of the project. After trial and error, I came across the perfect solution to my problem: create image tiles.
To begin this process, locate your image and obtain its dimensions. For instructional purposes, I will use an image from a trip to Florence, Italy in 2009.
First, create a new document in Illustrator. Since I want to cut my image up into 100 smaller images, I will set my Number of Artboards to 100. Also, I do not want any gaps in my image, so I will set the Spacing to 0px so the image tiles will line up perfectly to one another. Next, set the number of Columns to 10.
Now, it’s time for a little math lesson. If my image is 800px by 600px, I will divide those two numbers by 10 in order to create 100 smaller images, which means each image tile will be 80px by 60px. Finally, remember to set your advanced settings to Color Mode: RGB and Raster Effects: Screen, since these images will be viewed on screen only.
This is how your new document set up should look like:
Now, click OK to create your new document. Depending on your image dimensions, your document should resemble the screenshot below, with no spacing in between the tiles and an equal amount of rows and columns.
Once your new document has been created, go to File > Place and insert your desired image. Here is how my image looks once it has been placed into the document.
Now save the images into separate image tiles. Go to File > Export and navigate to the desired location for your new images. When naming your new files, Illustrator will automatically add on a 2 digit serial number to the file name. Choose the file format you want to export your images as. Next, click on the Use Artboards checkbox and select All so that all artboards (image tiles) will be exported. Now, click export.
After clicking export, there will be a pop up box that will give you PNG options. Since my image tiles will be viewed on screen only, I will choose Screen Resolution, with a Transparent Background.
Now, click OK and your image tiles will begin exporting into your desired folder.
When you have a large image that needs to be reduced to multiple smaller tiled images, you can refer to this tip to help complete your task at hand.