Tips for Successful Content Management: Part 4, Raster Image Effects

Search Options
Blog Search
Sign up for our monthly marketing trends enewsletter
  • 4/14/2020
    Welcome to part four of five of our content management series featuring tips for the marketing coordinator or manager flying solo without a front end-development team.
     
    You’ll learn how to better manage your content’s technical side and deliver a polished finished product to your audience, especially in your graphics. The full series is now available:
     
    In part four, we’re diving deeper into your website’s image management. Let’s take a quick look at effects that can be applied to raster images and how those effects influence the selection of image assets in your CMS.
     

    Parallax


    Parallax is an effect where a background image moves at a slower speed than the rest of the site does as the user scrolls. The strength of the parallax effect is determined by how much faster the site is moving than the background image.
     
    bquys0z3bc

    In this example, the main hero background image (behind “Distribution Redefined”), and the subsequent background image behind “Our Principals Drive Us”, move at a different speed than the rest of the page.
     
    This effect, while visually impressive, comes with a few caveats. Parallax works by intentionally making the aspect ratio of the space different from that of the image so that the image will have space to move around. We call this extra space “slack.” The greater the difference in aspect ratio, the greater space is available for the slack, and the stronger the parallax effect can be. 
     
    This can make cropping a subject into full view much more difficult, since only part of the image is going to be shown at a time. With a very strong parallax effect, it’s even possible that no part of an image will appear at all scroll positions.
     
    As we learned in part 2 of this series, the types of spaces where parallax applies well may have dynamic aspect ratios which change across screen sizes. This further complicates image selection. To further complicate parallax with responsive design, the computational work that devices perform to make parallax happen is more taxing on phones which have limited resources.
     
    Due to these two factors, we often disable parallax on mobile devices and keep it only as a feature on desktop devices. We find that this design decision works well because mobile aspect ratios tend to be taller, showing more of the image asset at once, while desktop ratios tend to be wider and reveal the full image through parallax. This allows us to waste less of the image content from screen to screen, improving performance and making photography selection for parallax spaces much easier.

    pasted-image-0-(10).png
     
    Parallax uses constantly-changing photo crops at different scroll positions. Depending on the strength of the effect and amount of slack, this might not be appropriate for photographs which focus on a single subject.

    pasted-image-0-(11).png
     
    A dynamic aspect ratio on a desktop creates enough slack to add a parallax effect, while the mobile ratio uses the entire image. In order to put parallax on mobile, the asset would need to be even taller, creating waste on desktop screen sizes.
     

    Animated Panning and Zooming

     
    Animated techniques like panning and zooming tend to work well for hover states, situations when a user hovers over a page element, triggering a visual. These animations are similar to parallax in that they need some slack between the image asset and the space that it’s mapped to. The greater the amount of slack, and the tighter the crop imposed by the space, the greater the strength of the animated zoom or pan effect.

    The difference between zooming in versus out or panning one direction versus another is simply a matter of swapping the before and after states of the photo or web element. With zooming, one state is going to be cropped more tightly all the way around, and the other is going to show the full image in order to zoom in or out. With panning, the crop is uneven to give the image more space to move into. Panning and zooming can also be combined into a single, slightly more complex effect.
     
    These don’t often cause image selection difficulties, but it’s important to be aware that the crop zones are sometimes going to be seen differently than the original asset. Test frequently and have photo options on hand to ensure your animations don’t distract from the strength of the original image.
     

    Overlays

     
    We can use overlays to create the illusion that a webpage isn’t confined to rectangular zones. A simple overlay might involve covering part of an asset with something that looks like it’s part of the next and/or previous section:
     
    unnamed-(1).png
     
    The previous section (red) and subsequent section (blue) look like they partially cover the image, but in fact it’s merely an overlay covering the top and bottom of the asset (right).
     
    For these, you’ll need to know how much of the image is covered. However, for more complex overlays, you’ll need multiple images that need to align to each other:
     
    unnamed-(2).png
     
    The effect (left) is that the bottle, hand and some of the beverage being poured are in the previous section. The implementation (right) is that a cropped, transparent version (red) is overlaid between the rest of the image and the previous section (blue). In most cases, these assets should be made together to ensure that they align properly.
     
    The most flexible way to accomplish this is to make both the overlay and the background image identical, occupying the same space and with the same aspect ratio and place them from there. 
     
    Note that while any of these effects can be accomplished with either raster or vector graphics, they’re most commonly seen with raster graphics.
     

    Any questions?

    We’ve been diving into some complicated stuff when it comes to content management best practices. Remember, making a website beautiful, functional and interactive is no easy task and it typically overwhelms the average marketer.
     
    That’s why we’re here to help. If you have any questions on making your website a work of art, get in touch and let’s talk!
    Previous: Part 3, Image Dimensions and Formats
    Next: Part 5, Vector Image Effects
    About the author::Benjamin John is a Senior Lead Front-End Developer at thunder::tech. He's responsible for programming interactive user interfaces and developing production processes. He enjoys creative problem solving and appreciates a clever riddle.
Sign up for our monthly marketing newsletters