Website sliders don’t always handle photos of different dimensions well. You also may want to edit photos to make them look nicer. This “how to” is a simple way to make photos that have different sizes look uniform in sliders. Portrait photos, for example, are sized to be no taller than the maximum height of the slider itself, which requires that the photo be sized down and a transparent background be added to the sides to make it equal the width of the slider grid.
- Know the size of the Slider (width and height)
- Pull the image into Photoshop and look at the Image Size. Other photo editors will most likely be the same in the way they use canvas and image sizes.
- For Portrait images, change the height of the photo to be the same height as the slider. Proportions need to be constrained.
- For Landscape images, change the width of the photo to be the same width as the slider. Proportions need to be constrained.
- Create a background layer and put it underneath the image layer.
- Select Canvas Size and make it the same size as the Slider.
- If you want to use the slider default background, make the background layer in Photoshop transparent. Otherwise, use the paint bucket to color the background layer.
- Use the save for web option. Remember to save as a PNG file if the background is transparent or there is transparency in the image. Otherwise, I usually use JPEG.
Other Notes and Things I Like to Do
- Photoshop has an option drop down menu to select an algorithm for reduction, enlargement and more of the original image in step 3 or 4.
- With retina screens becoming popular, I usually keep a copy of the larger images if they are important or likely to be re-used.
- If you are trying to crop a photo to make it look good, you may want to go back and forth between image and canvas size options to get it looking great. Photoshop has a step backward feature under edit that makes this easier.
- For some sliders, you may want a higher resolution (such as 356 dpi). This is also done in your image tool but is beyond the scope of this post.
- Some sliders allow you to vary the image size, and they still look great. Most of them I see have the images prepared to be the same size as the slider. I have another blog article in progress that will show how to setup one of my favorite sliders to look great when the image sizes vary.
- I tend to use the following sizes for sliders on responsive sites because I like the way they respond to look good on screens of all sizes, including mobile.
- Large – 940 x 770 px
- Medium – 780 x 500 px
- Small – 510 x 310 px
Managing images can be a little tricky in sliders, but following the above steps should solve some issues.