Show fewer, better photos, exported at web size, in the gallery that suits them. Then turn on Export Optimized Images and Lazy load image. A page of 20 well-sized photos opens fast on a phone. The same page straight from the camera can take a long time.
- A wedding photographer's home page opens with three full-width photos that change by themselves.
- A pet photographer shows a mix of tall and wide photos in a gallery that keeps each photo's shape.
- A commercial photographer opens with a 40-second showreel hosted on Vimeo.
- A real estate photographer shows each property as a neat grid of equal tiles that open full screen.
Size your photos before you add them
Export from your photo app as JPEG, in sRGB colour (other colour spaces can look dull in browsers), at about 70 to 80 percent quality.
| Where it goes | Size (long edge) | Aim for |
|---|---|---|
| A full-width photo at the top of a page | 2000 to 2400 pixels wide | Under 500KB |
| Gallery photos that open large | 1600 to 2000 pixels | 200 to 500KB |
| Optimized Thumbnail (see below) | 600 to 800 pixels | Under 100KB |
| The picture shown when a page is shared | 1200 x 630 pixels |
To swap a photo you've already used for a smaller copy, right-click it in the Assets list and choose Replace Asset...: see Replace an image or PDF everywhere at once, and clear out files you no longer use (the Assets list).
Pick the right way to show them
| You want | Use |
|---|---|
| One strong photo behind your name | A Container with Image Fill set to Scale to Fill. Use Adjust Focus Area... to keep the face in view on phones |
| Photos that change behind your text | Slide Show Fill on the same Container or TextBox |
| A slideshow across the page | Image Slider |
| Your portfolio | Responsive Image Gallery (Responsive pages) or Image Gallery (Centered Layout) |
| Testimonials with a photo each | Carousel |
| A film or showreel | A shape with its Fill set to Video, with the film on Vimeo or YouTube |
For step-by-step help with slideshows, see Add a slideshow to your website: Image Slider, Carousel, Slide Show Fill or a gallery.
Gallery settings that matter for photographers
In Responsive Image Gallery, under Inspector > Widget Settings:
- Style: Masonry keeps every photo's shape, which suits mixed portrait and landscape work. Cover makes a neat grid of equal tiles, cropping the edges. Max Columns (2 to 5) applies to the grid styles.
- Optimized Thumbnail: select a photo and choose a smaller copy here. The grid shows the small copy and the large view opens the full photo. Worth it for a portfolio page of 20 to 40 photos.
- Slide Show Background Color: black or a dark grey for most work, white for bright, airy styles. Untick Show Thumbnails for a cleaner large view, and choose a Transition such as fade.
- Caption and Image ALT Text: put the story in the caption ("First dance, Aberdeen"). Use the ALT text to describe the photo for screen readers and Google Images.
On a Centered Layout page, Image Gallery has an Image Size: setting for the large view: Small (500 pixels), Medium (750, the default), Large (1200) or Original Size. Choose Large for a portfolio.
Effects: use them on the frame, not the photo
Overlay Effects (Brightness, Grayscale, Blur and others) and Overlay Color are great for making text readable over a photo, but leave your portfolio photos as you edited them. Scrolling Effects, Parallax scrolling and Animation draw the eye on a heading or one key photo. On every photo they slow the page and distract from the work. See Make text readable on top of a photo: overlays, masks and image fill options and Add animation and scroll effects to your pages.
Make it fast
- Go to File > Edit Publishing Settings and tick Export Optimized Images. EverWeb also publishes WebP copies, which are smaller. Compare a few photos afterwards: if colours shift, untick it.
- For photos lower down a page, select the photo and tick Lazy load image under Fill in Inspector > Shape Options. Leave it off for the photo at the top.
- Keep one gallery or slider per page. Split big portfolios into pages such as Weddings, Families and Pets.
- Put films on Vimeo or YouTube, not in your project.
- Publish with File > Publish Entire Site, then test your Mobile score in Google PageSpeed Insights.
More detail: Make your website load faster.
Check it on a phone
Most couples and families will first see your work on a phone. Click Preview, choose Preview QR Code and scan it. If a wide photo at the top crops badly on a phone, add a second, taller crop of it and use Show on Device in Inspector > Metrics > Responsive to show one on phones and the other on computers.
Good to know
- The Live Photo widget shows an iPhone Live Photo. In Photos, choose File > Export Unmodified Original and add both the .JPG and .MOV files to the widget.
- Large photos also fill your hosting storage, which is shared with your email.
- Find Unused Assets... makes your project file smaller, but it doesn't change how fast your live website loads.