Why use large images?
Large images are favorites among web designers for good reason. They’re trendy and aesthetically pleasing. They arrest attention with an appealing picture and lay the foundation for the text color and site background. For the majority of web users who skim and scan rather than read text, a picture with a short headline can quickly telegraph a message and get them interested in browsing the site. Many sites like image banks, movie sites, music bands and games sites concentrate on selling products using multiple media, like video, slideshows, images and audio and only minimal supporting text.
How are large images used?
They can be used in several ways, such as the hero image, the full-screen or full-width slider, the rotating gallery and the parallax banner, to name a few of the many options open to web designers.
- Full-screen images take centerstage on the page with large headers and sliders.
- Full-width images are used in sliders and rotating galleries. These may or may not fill the screen.
- With moving images becoming popular, some websites use background video to grab attention, engage the visitor and keep him on the site.
- Large images with minimal text are used to great effect in landing pages and single page websites
- Single-page websites also benefit from big images, some using poster-style layouts with large text – see Real Estate Template below with its 3D poster-feel with full-screen parallax photo-slider
- Parallax banners add 3D depth to large images that capture the viewer’s attention while adding an element of perspective.
- Large images can be repeated with different resolutions within the body and footer like the watches template below.
- Images can be used within large image backgrounds; and full-width banners with awesome backgrounds – see the photography template below. Large images work well in sliders, followed by image grids and banners in ecommerce websites.
- Images merging into page backgrounds, and photo overlays on photo backgrounds – see the water polo template below
- Large images with large text have a billboard-like effect – the Prostock Images ZenCart Template is an example.
The power behind the magic – CSS3
Thanks to CSS3, we can now have a perfect full-screen image or image background that fills the entire page with a centered image and retains image proportions with no white space around and no unwanted scroll bar. So go on, display your magnificent images at full 100% responsive width across most major browsers.
Template 53140 – Stock Photo Responsive Shopify Theme with Blog
A beautiful header image draws attention and grid images sell stock photos with prices and different views on hover in this Stock Photo Responsive Shopify Theme. Ghost buttons keep the design minimal yet functional, icons with animation and zoom catch the eye and motivate action. Featured images displayed in a grid with animation on scroll have sleek black ‘Add to Cart’ buttons that turn red on hover to initiate user action. A banner attracts attention to a 50% festive discount. Social media icons connect with the user and the footer has useful links. Drop-down menus vary for products, blog and sales – the sales menu is adorned with images. The right sidebar menu has Collections, Product Types, Best Sellers and products with ‘Add to Cart’ buttons to motivate the user to browse through the site or make a purchase. Product pages have descriptions, slideshows with zoom, reviews, prices, stock availability, shopping cart and social sharing icons. Related products are displayed below with animation effects.
Template 52997 – Games Portal WordPress Theme with Slider, Gallery and Blog
A full-screen slider showcases the latest games in breathtaking action shots linking to the blog with detailed descriptions. The gallery portrays games in image, slideshow, gallery, video and audio formats, viewable by category in 2,3, or 4 column formats with captions. The template has a testimonial and review section and a blog.
Template 54950 – Water Polo Responsive Website Template with Parallax, Carousel and Gallery
The logo for this Water Polo Club in large banner text in white is prominently displayed on a large blue scrolling image of water polo which merges into black and acts as a welcome banner. Icons and brief intro text lead to the logo repeated in large banner text in blue on black, inviting people to join the Water Polo Club. Upcoming Events from the blog are featured in photo overlays with action rollovers. Closeups of Water Polo Champions are shown in a carousel below, superimposed on an action shot of water polo. The Water Polo logo in white is shown again in the footer followed by social media icons and a map. The menu with white drop-downs features the white rectangle outline of the logo on rollover.
Template 54961 – Yacht Club Responsive Website Template with Bootstrap, Parallax, Gallery
This template features large images on the header, and text on large images on parallax banners which give a 3D effect while scrolling. Illustrations in black and white on a light grey background offset the all-blue theme and large grey fonts for headlines stand out on a light grey background. Blue and white illustrations on a blue background are used for the compass logo and a bell. Image and text animations, icons, image zooms, photo overlays, testimonials and a drop-down menu in transparent navy blue all work together to create a website that attracts individual or corporate membership to a yacht club for people who love sailing. Two galleries feature different types of yachts for charter or sale, with text animations, parallax banners and images. Galleries are viewable as slideshows.
Template 51800 – Watches Online Responsive PrestaShop Theme with Slider, Carousel, Newsletter, Forms
A large image of mountains takes centerstage in the header, repeated with a faded look in the body content, and again the visual theme of the header is picked up in the footer with a full-width footer with overlay effects, icons, text, social media and links. This Watches Online Responsive Prestashop Theme uses black on black with chrome accents, a slider, banners with zoom effects on hover, text that changes color on hover, drop-down mega-menu, five language options, two currency options, account and sign-in, search and shopping cart on top. Product pages are complete with descriptions, slideshows with zoom, prices, stock availability, cart, payment options, data sheet, reviews and more products in a carousel, Create an Account and Registration Form and Sign-in authentication. The footer has useful links under product categories, store information, personal account, store address and social media, and allows a customer to sign up for a newsletter with his email.
Template 52649 – Baseball Club Responsive Website Template with Gallery and Blog
A full-width image for a baseball club arrests the user’s attention while individual boxes focus awareness on coaches and players, results, personal training, and tournament information. Shown below are the latest young champions, welcome message and alumni. More details, images, articles and tips are given in the gallery and blog.
Template 54741 – Business Responsive Joomla Template with Parallax, Blog and Gallery
The image used in this website template has a partly-blurred background with a sharp-focus foreground. Shades of green in the image slider and header banner with icons in large black circles highlighting company services, focus attention on businesslike action. A banner with carousel features testimonials from clients. Highlights from the blog are shown in smaller banners with zoom effects. A welcome message from the company, client logos and a footer with navigational links complete the homepage. Services are featured in a gallery that can be viewed as a slideshow.
Template 52129 – Photography Responsive PrestaShop Theme with Slider, Search, Banners, Shopping Cart
This Photography Responsive Prestashop Theme has images featured on a full-screen background image, an attractive intro slider, promotional photo banners with zoom and images with Quick View for ease of buying. An attractive banner with zoom and Shop Now button, an About Us and What We Offer section and footer with useful links makes this template work well for your photography site. The product pages have slideshows, stock availability, condition, description and social media. This theme can be used to showcase art, illustrations and graphics as well as photographs.
Template 41620 – Single Page Real Estate Moto CMS HTML Theme With Attractive Full Screen Slider, Portfolio Gallery & Blog
Photos do the talking in this Real Estate Moto CMS HTML Template. Bold white and grey fonts convey confidence and sophistication in the logo and in the expand/contract menu, placed on the background of a full-screen homepage slider. Beautiful images show close-up and perspective views of real estate with image transitions created using JS animation with HTML to keep the template lightweight. Sub-menus make it easy to add and organize multiple pages. The Folio is presented in 2-column, 3-column and 4-column gallery layouts, with images that expand on click and can be viewed as a slideshow. The Blog has content leading to posts with larger images, social sharing icons and comment forms.
Template 53502 – Communications Company Responsive Landing Page Template with Newsletter Subscription, Contact Form, Video
This blue and black template sells a landing page for a communications company. A log in days, hours, minutes and seconds counts down against a cloudy sky – you can see the seconds ticking (as if a plane is landing). Time is precious. A landing page optimizes the time your user spends on the page, by conveying the message in a way that makes the most of your communications dollars. White and neon blue stand out on black for the headlines, images and icons in this template design. A video is showcased with a description to convey a short message effectively. Banners in blue and black with testimonials and images of clients and prices help to convince users to invest in a communication package that works for them. Frequently asked questions are displayed with numbering in blue. A newsletter subscription and contact form captures the email IDs and contacts of potential clients.
Template 54997 – Education Responsive Website Template with Parallax,
This Education Responsive Website Template is designed using full-width image with a text slider, headline text in red and black, chunks of text along with smaller images – or tile-based content – an image slider, and a parallax banner with text about degree courses, to neatly and clearly convey information about a graduate school. This ”content collage” of student images and text is centered to the screen, and below is an image slider showing multi-faceted images of college life, from studies to teamwork to assignments and exams. A full-width parallax banner below with text provides information relating to bachelors and masters degrees.
A full-width image sells the beauty and clarity of the photo on this Prostock Images ZenCart Template. Banners with zoom sell special offers and collections. Featured stock photos with prices and Add To Cart buttons make it easy for users to buy. Product pages have descriptions, slideshows with zoom, Add to Cart, stock availability and social media icons for sharing. The Categories menu on the left takes the user into category pages. The menu on top also features product reviews.
Template 54891 – Mexican Responsive Moto CMS 3 Website Template with Slider and Banners
A full-width slider and banners present a mouthwatering array of Mexican delicacies and their ingredients, teamed with cool green and fiery red banners with self designs. An ethnic border of red and green brightens up the template and sets it apart. Bold fonts in white stand out on red and green. The featured menu is presented in circles highighted in red on hover. The team of chefs and waiters present a friendly apearance. Newsletter signup is followed by the address and social sharing icons in
Designed to fit any device from mobile to desktop, this one-page Fashion Responsive Landing Page Template incudes a contact form on background video, a gallery with enlarging views, a parallax banner that draws attention to your message, a testimonial slideshow, a newsletter subscription, and a call to action button. All stock photos, fully editable PSD files, scalable fonts and icons are included in the template package. Showcase your service on this feature-rich landing page with parallax, background video and lazy load effect.
Template 54559 – Travel Agency Joomla Theme with Slider, Gallery,
Stunning full-screen slider images, banners with photo overlays and text, graphics in circles highlighting facts and figures, regarding the travel company, background video of spectacular nature imagery as you scroll down the page, testimonials of happy travelers with cameos of photo-shoots on the travel trails, News and Events in a carousel keeping the user fascinated and leading to the blog, a newsletter signup, transparent form with a beautiful mountain showing through, contacts presented on
the mountain background and social sharing icons on the footer … this template captures the essence and joy of travel and invites the would-be traveler in. Drop-down menus with pictures of places and travelers, with prices, are inviting. You also have a choice of page-wise drop-downs to provide the user a choice of navigation.