Follow

Images in Spark Page

There are two kinds of photos in Adobe Spark Page: those that crop and those that don’t. The fill screen and window image types might crop the photos depending on the photo and the size of your viewer’s screen. The inline and full width photo types will never crop the photo.

imageTypes.png

What is very important to understand here is that some image types (like Fill screen and window) are not possible without cropping. What makes things even more confusing is that we also can’t tell how these images will be cropped. This is because a Spark Page can be viewed on any device of any screen size. This means these images will be cropped in thousands of different ways all at the same time!

If you don’t understand why that is the case, don’t worry! We’re going to walk through an example now to demonstrate. Imagine that we have an image like this one of 5 people walking down the beach:

sample.png

Credit: Unsplash

Let’s look at how this image would look to two customers viewing my Spark Page at the exact same time. One of those customers is using a cell phone and the other is using a desktop. As shown below there are two ways your viewers can experience this image in Spark Page:

 

Option A - Allow Cropping

What your viewers see:

compare1_r3_c1.png

The Tradeoff

The viewer gets a very immersive experience at the expense of cropping the image.

Some screens will show less than 5 people on the beach. How many people are shown depends on the size of the customer’s browser window.

Spark Page Image Types to Use 

  • Title Image
  • Fill screen Image
  • Window Image
  • Glideshow
  • Split Layout

 

Option B - Don't Allow Cropping

What your viewers see:

compare1_r1_c1.png

The Tradeoff

The image is not cropped, but the experience isn’t very immersive.

All 5 people are always in view to all customers.


Spark Page Image Types to Use

  • Inline Image
  • Full Width Image

 

Explaining Option A - Allow Cropping

Notice that these photos always fill the entire screen on whatever device you are looking at them on. If you rotate that device it changes the size of the screen (going from tall to wide or vice versa) and yet the photo still fills the whole screen. You don’t see any white gaps around the sides of the photo.

This effect makes your photo look really immersive on any sized device that your viewers may be reading it on. Even if they resize their browser window or rotate their device the photo will always fill the entire screen.

This immersive effect comes at a cost: sometimes your picture will need to be cropped in order to accomplish it. This is because the photo has a single aspect ratio, but will be viewed on screens with many different aspect ratios. Even if this photo perfectly fit on desktop, it wouldn’t fit at all on the phone.

So we have a choice to make... do we shrink the photo and put white bars on the sides so that the whole image is in view, or do we stretch and crop the image so that some portion of the image always fills the screen completely. When you choose the “fill screen” photo type you are essentially telling Spark Page that you are willing to sacrifice cropping because it’s more important to keep the photo filling the entire screen.

 

Explaining Option B - Don't Allow Cropping

If you decide that your photo should not be cropped you can instead choose the “Inline” or “Full width” photo types. Neither type will do any cropping of the image. Note that you may need to scroll to see the whole image, but the whole image will be there.

These image types are useful when you can’t sacrifice the cropping in order to achieve an immersive feel that a fill screen photo gives you. This isn’t to say that one photo type is better than the other. Both photo types can be used to great effect depending on what the photo is and its context in the document. Inline for example is very good for logos since you rarely want those stretched across the whole screen.

 

A Note on “Title,” “Window,” “Glideshow,” and “Split Layout”

We’re not going to go into detail about the title/window/glideshow/split layout photo types here other than to mention that they essentially act the same as the “fill screen” photo type above as far as cropping behavior is concerned.

 

Tips

If you didn’t fully understand the explanations above that’s ok just remember these tips:

  • Use the fill screen photo type to create an immersive experience on screen, but remember to use photos where it is ok that some of it will get cropped.
  • Remember that the cropping of fill screen images will be different on different devices and screen sizes so check your output looks ok in various situations. You can check this very quickly on desktop by resizing your browser window to explore different aspect ratios.
  • Make sure you set the “Focal Point” in each fill screen photo. This gives Spark Page a hint as to what the most important part of the photo is so that it can try to keep that point on screen when it crops.
  • If the framing of your photo is important or there are details on the edges that should not be cropped then use inline or full width images.



Tips for Photographers - How do I take photos that work well with Fill screen?

Frame composition, or how subjects are positioned inside a photograph, is probably the most important part of what makes a great photograph. If you take the world’s greatest photo and crop it slightly differently it can significantly reduce the quality of that photo. Similarly taking an average photo and cropping it slightly differently can take it up a level. Photographers use many composition techniques, some of which are listed here.

Take for example a few of these rules listed in that article:

  • Rule of thirds
  • Frame within the frame
  • Golden Triangles
  • Golden Ratio

These are all rules that are extremely sensitive to cropping. Photographs that use these rules are often not great candidates for fill screen images in Spark Page because of the cropping that will occur on some devices.

But if photographers do want to use the immersive image types in Spark Page they will get the best results by understanding the above fact and working with it. That means using Spark Page’s Focal Point feature wisely, having a single subject in the photo, and avoiding those crop sensitive rules.

Another option is to avoid the crop sensitive rules above and focus on other photographic rules listed in the article above that can really make fill screen photos shine:

  • Centered composition and symmetry
  • Leading lines
  • Patterns & Textures
  • Simplicity and minimalism

Understanding these photo limitations and working with them is the key to truly unlocking the best looking Spark Pages for your audience.

 

Was this article helpful?
1 out of 2 found this helpful
Have more questions? Submit a request