The following best practices for Image Optimization will help to ensure the best visibility and viewability for your ad units, as well as to help avoid any ad unloading from Chrome Heavy Ad Intervention.
In this article, you will learn about:
This article will provide an overview of Image Asset Optimization. Check out this article for more information regarding video asset optimization.
Image Sizing & Best Practices
- Images 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 images used in online advertisements can have a huge impact on visibility and viewability.
- When creating your digital ad, it's important to make sure you are utilizing assets optimized for the web.
- The Adventive platform supports JPG, PNG, SVG, and GIF image formats. The image formats you choose to use in your ad build will depend on the specifications of the ad you are creating.
- 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 common with 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.
Asset Guidelines
| Format | Use Case | Best Practices |
| .png | Best used for product shots, design elements and transparent backgrounds | Upload a high resolution file, up to 4MB. *See note below |
| .jpg | Best for full-color backgrounds, flattened images and custom typography | Upload a high resolution file, up to 4MB. *See note below |
| .gif | Animated assets best for quick, short, or looping sequences | Use the smallest image size without sacrificing quality *See note below |
| .svg | Best for logos, text, iconography and CTA buttons | Upload a high resolution file, up to 4MB. *See note below |
* Note - While Adventive natively supports up to 50MB file sizes, we highly recommend keeping combined assets for each ad unit below 4MB to help avoid any unloading from Chrome Heavy Ad Intervention. More information on this below.
Chrome Heavy Ad Intervention
Chrome announced its plans to begin the implementation of steps to block ads that consume a large amount of device resources before the user interacts with an ad unit. The implementation of this functionality within Chrome is now being slowly rolled out and has the possibility of impacting your ads.
The purported reason for these new rules is to reduce the strain on device batteries and data plans, and to provide a quality online experience for users with mobile devices, however, these rules extend beyond mobile devices into the core Chrome desktop browser as well.
In the most simplistic terms, Chrome has determined that any ad unit which exceeds any of the following is at risk for removal:
- 4MB of network data usage
- 15 seconds of CPU usage within a 30 second period, or
- 60 seconds of CPU usage in total
The above thresholds are enforced for any ad type, including non-video ads, and VAST ads. Therefore, it is important to adhere to the requirements set forth, or risk the ad being removed by Chrome. Failure to do so produces the following experience in those ad slots for viewers of your site:
- We recommend keeping combined asset sizes per unit around 4MB, and to keep in-banner video length below 15 seconds, to help avoid unloading from Chrome Heavy Ad Intervention.
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.