Skip links

Visual Asset Optimization Best Practices

Visual Asset Optimization Best Practices

Images and Video account for most of the downloaded bytes on a web page, and also often occupy a significant amount of visual real estate. For digital publishers, optimizing visual assets used in online advertisements can have a huge impact on visibility and viewability.

When creating your digital ad, it’s important to make sure that you’re utilizing assets optimized for the web. The visual formats, sizing, and file conventions you choose to use in your ad build will depend on the specifications of the ad you are creating.

Images

Adventive will automatically compress image assets in our platform. As a result, we recommend that you upload high-resolution images, up to 10MB. For best results, use image files at 72 DPI. You should also avoid using TIFF files, as they are too large and will load creatives very slowly.

Transparent images can significantly increase your file size. This is comwith PNGs. While sometimes unavoidable, try to only use transparent PNGs for assets like buttons, logos, and/or animated elements.

If your ad does not require a specific or branded typeface, using Adventive’s type tool will add custom text and help reduce your overall file size.

JPG images will compress better than any other image format. We recommend this image format to be used for any large images in your project, such as background images. For static ad units, we always recommend uploading a flattened JPG rather than individual layer assets. If working with your clients to receive assets, this should be on your list.

 

More Ways to Optimize:

Some additional tips and techniques to keep in mind as you work on optimizing your images:

  • Choose vector formats when possible: vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high-resolution world.
  • Experiment with optimal quality settings for raster formats: don’t be afraid to dial down the “quality” settings, the results are often very good and byte savings are significant.
  • Serve scaled images: resize images and ensure that the “display” size is as close as possible to the “natural” size of the image. Pay close attention to large images in particular, as they account for the largest overhead when resized!
  • There are plenty of free online resources you can use to compress large image files. Try https://tinypng.com/ to optimize your .JPGs and .PNGs.

Video  

When you think about video, it’s important to remember that most video comes in the aspect ratio of 4:3 (e.g 640×480), or 16:9 (e.g 640×360). When videos are uploaded to Adventive, we automatically compress the video to reduce its file size, but maintain the aspect ratio of the source video. That means that if the production studio provides a 4:3 clip, we will always maintain 4:3 (no letter-boxing) on the top and bottom of the video, likewise for 16:9.

The Adventive platform accepts .mp4, .mov, .ogg, .flv, .avi, .ogv, and .webm video file formats for custom hosted video.  (VAST URL tags and YouTube video url’s also are accepted).

Most video assets under 30 seconds will be around 1MB after encoding and compression. MP4 videos should be H.264 encoded to render properly in the browser.

Once imported into the Builder, video assets are automatically compressed at the lowest possible file size depending on the dimensions of the actual video player in the ad unit. For example, if you have a full screen interstitial with 1080 video, Adventive would need to encode a larger video to ensure quality.  Likewise, if you have a 300×250 ad with a tiny video, Adventive will encode and process a lower res/small file size video.

If you receive a massive video file (i.e. over 30MB), there are several tools available to resize large videos to more appropriate dimensions and file weights for ad delivery.  Most of them are paid products like Final Cut Pro, or iMovie, however, we have used HandBrake in the past to compress and resize videos (it’s free to download and use):  https://handbrake.fr/