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 picmonkey.com.  Click Edit from the menu.

16-9-picmonkey-edit

The File Upload box will open.

Navigate to the image that needs editing.

Click the image to select it and then click Open.

16-9-file-upload-box

 

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

19-6-bubbles-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.

16-9-choose-crop

 

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.

16-9-crop-image

 

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

16-9-apply-crop

 

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

16-9-cropped-image

 

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!

16-9-resize-box

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.

16-9-apply-resize

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.

16-9-save-masterpiece

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.