AEM: Resizing Images to Fit the Image Slider/Slideshow Component

Resizing images for the Image Slider for county websites or the Slideshow Component for CAES websites is an easy, two-step process.  The first step crops the image to the 16:9 ratio so it will properly fit the component.  The second step reduces the file size of the image so it will display faster on the web page.

Step One – Cropping

Open PicMonkey at  Click Edit from the menu.


The File Upload box will open.

Navigate to the image that needs editing.

Click the image to select it and then click Open.



If the ‘Choose an image setting’ box opens, the recommended setting of Bubbles is fine. Click Save.



The image will open in the PicMonkey Editor.  To change the aspect ratio to 16:9, first click the Crop tab from the left-hand menu.



A submenu will open. In the select list just below Crop, click the down arrow and choose 16:9. A new rectangular box will appear over the image.

The shaded area outside of this box will be removed from your picture. Use any of the little corner circles to resize the box as needed. To move the box itself, left mouse click inside the box and drag it round.



When the image is ready, click Apply from the Crop box.



The newly cropped image in the correct 16:9 ratio will display.



Step Two – Resizing                                  

Click the Resize tab at the bottom of the list under Basic Edits.  The Resize box will open.  The image size in pixels is still larger than it needs to be for a website. 2925 pixels is way too big!


In the ‘Change size to:’ box, add a number that is between 600 and 1200 pixels wide.  Make sure that ‘Keep proportions’ is checked to maintain the 16:9 ratio.  Then click Apply.  The image will resize and be ready to save.


Click Save from the Editor menu at the top of the screen.  The ‘Save this masterpiece’ screen opens. In the ‘File name box:’ rename your file to protect your original image.  Make sure to use all lower case letters with hyphens between main words:   extension-field-1000.  Leave the .jpg extension.  The Quality of Pierce is fine.  Cick Save to my computer.


The Save As box opens.  In the ‘Save in:’ area, choose the correct folder on your computer.  Click Save.

Viewing the files in the Documents library, the original file size is 2.1 mb while the edited image is 245 kb.  That’s quite a difference, but the online image quality of the smaller image will be plenty good enough for a web page, and the image will display faster when the page is viewed in a browser.16-9-file-comparison

Repeat these steps as needed for all Image Slider/Slideshow images.  Upload the images to your Assets folder in Adobe Experience Manager and then add them to the proper component on your web page.