Cargo home Twitter Devlog

Image formatting guide

Last Updated: Dec 02, 2014 11:22AM PST
Each Cargo site has a setting that specifies the maximum width of the images displayed on the site. To change the maximum image size on your site, visit your Admin panel and navigate to Settings → Display Options →  Default image width.*  Changing the default image width is site-wide and retroactive: After changing your width setting, all previously-uploaded images will display at your newly-chosen size. If the original image is smaller than your chosen width, then the image will display at its original size.

Whenever you upload an image, many sizes of each image are generated, and Cargo will choose one of these versions to display in your site, according to the setting shown in your display options.

Hi-res displays (like Retina) are also accommodated. On hi-res displays your site will choose to show the largest available image or one that's roughly twice as large as your default image width, whichever is smaller. This will allow your site to take advantage of higher-resolution screens while keeping loading times to a minimum.

The maximum dimensions of images stored on Cargo's servers are 5,000px wide and 10,000px tall. The maximum file size for any image is 15MB. After uploading an image, you can reach the original image by clicking on its thumbnail below the Image Uploader in the Project Editor.

* SpaceCollective-based designs (SpaceCollective, SpaceCollective-alt, Voyager 1 and 2, Elena, Trillian) have a fixed image width of 640px that cannot be customized.

Tips for creating and exporting images for use on your website
  • Images should be in JPG, GIF, or PNG format.
  • Images must be 15 megabytes or smaller.
  • To accommodate hi-res displays (like Retina) upload images that are at least twice the size of the intended display width.
  • Maximum dimensions are 5,000px x 10,000px. You may upload larger images, but they will be scaled down before they are stored.
  • PNGs are recommended for images of illustrations and vector graphics, as well as images with large areas of flat color. Complex graphics or images with texture/noise (like photographs) should use the JPG format.
  • We recommend using Adobe Photoshop or Illustrator to make sure that your images are correctly formatted for the web. Both of these programs have a “Save for web” feature which will let you be sure that your images display correctly after being uploaded.
  • Make sure that JPG files are in RGB mode before they are uploaded. Images that are in grayscale or CMYK mode will not display correctly in most browsers, and may appear color-shifted or completely inverted.
  • Additionally, photo editing and scanning programs often attach metadata that tell the program displaying the image (the Web browser in this case) how to rotate that image. If you notice that an image is being displayed correctly in one browser and rotated in another, this is what's happening. To clear this metadata, rotate your image to the correct orientation in Photoshop and save them using Photoshop's "Save for Web" feature. This will clear the image's metadata so that it displays correctly in all browsers.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found