The image slider (also referred to as a carousel), located on your website's homepage, is an area in which multiple images can be placed to help your parish highlight some of its website content visually. In this article we have some tips for how to best maintain your image slider.
Before reading ahead...are you unfamiliar with how to use the image slider? Learn how to do that in this article.
Put your best slide forward!
- Use artistic restraint when adding slides to your site. Remember that more isn't better - better is better. Make sure your most important slide comes first.
- Use clear, high-quality images for your slider.
- Photos that are clear, simple, and well composed are going to grab the attention of your visitors.
- Images or graphics that are simple, well designed, and convey a clear message will grab the attention of your visitors.
Select or create an image for the slider
Choose a graphic or a photo to display as your slider image. You will want an image that is wider than it is taller. Though FlexSlider will auto-resize based upon the size of your images, we recommend that you choose a consistent size for your images. See Appendix A in our Image Optimization instructions:
You may either create a graphic with overlaid text using photo editing software (e.g. Adobe Photoshop, Pixelmator, Canva, etc.) or just crop a photograph or graphic to the proper size and customize the slider to overlay text for you. As a good rule of thumb, if the graphic you are posting has text already on it that is descriptive enough for your site visitors, then there is no need to overlay text through the slider.
Carousel image requirements
- Use: Appears within the carousel on the site homepage
- Orientation: Landscape (wide) required
- Image size: 1200 pixels wide by 630 pixels high
- File size: Up to 150 KB is acceptable
Optimizing your slider images
The task of image optimization requires maintaining a balance between an acceptable image quality while reducing the file size. Images which have not been properly optimized can cause storage and performance issues and contribute to a degraded user experience.
Learn more about image optimization and the tools available for optimizing your website’s images: https://support.goarch.org/-/optimizing-images-for-the-web