Web Images Best Practices Web Images Best Practices

Web Images Best Practices

Follow our guidelines belowto ensure your images look great on any device.

Juniper makes formatting your images for the web as easy as possible.

Before You Begin:

To find the size and dimensions of your original image before you upload it to your site:

  • PC - Right-click on the image file and select Properties.
  • Mac- PressOptionwhile clicking on the image file, then selectGet Info.

🛑 Aim for your image size to be no greater than 500,000 bytes or 500 kilobytes KB or .5 megabytes MB🛑

You can this web app to compress and or resize your image to less than 2048x2048: https://squoosh.app/

You can drag and drop an image of your choosing into the tool, at which point, you can pick from compression standards including MozJPEG and OptiPNG. A small slider lets you quickly adjust the level of compression, and you’ll also see a running total of how large the resulting file is expected to be. A second slider can be pulled across the image to let you easily see the effects of the compression.

Best Practices:

Image Size:

Banner or Jumbotron Image?

  • When using our Owl Carousel, aim for images with a height of 1500px x 500px
  • Images smaller than 1500 pixels wide may appear blurry or pixelated

Image Requirements

- For JuniperData & WebManager product images, save images in .jpg format only. Ensure your product image is the same name found in the PhotoName column of your product data.

- For JuniperWeb, you can use images in .jpg, .gif, or .png format only.

File Name

Only use letters, numbers, underscores, and hyphens in file names. Do NOT use "+" or "/" or any other special characters (like question marks ?, percent signs %, and ampersands &) as these may upload incorrectly or cause unexpected behavior.

What Happens After The Image Is Uploaded?

When you upload an image to the Asset Library, it is uploaded to Amazon’s Simple Storage service which offersindustry-leading scalability, data availability, security, and performance.

Your product images are then delivered via Fastly. Fastly serves images faster, decreasing page load times for image-heavy sites.

Need further support? Submit a request