Back to Top

How do I upload images or files for my Big Cartel page content?

Filed in Creating and customising content

Your Big Cartel account does not include tools for uploading and inserting general (non-product) images or files for use within your page content.

The following no-cost options provide the tools to easily upload images and files to a separate location to use in your Big Cartel pages.

Image Editing Tool

To edit your images before uploading them, you will need an image editing tool such as:

Not Sure How To Edit Images?

If you are not sure how to use your preferred image editing tool to resize and prepare your images, refer to the help resources provided by your tool or use Google - e.g. search "resize image with Photoshop tutorial" - to find online tutorials.

If following our support articles and reviewing online tutorials is still not allowing you to achieve the results you desire, consider using a photo editing service to prepare your images. These services can be easily located online - Google "photo editing service" - and can be relatively inexpensive when you consider how important image quality is to the appearance of your shop.

Important Preparation

Before uploading images it is important to first ensure that they are formatted correctly for upload by reviewing the following items and using your image editing tool to correct the images as required.

  1. Ensure your image type is appropriate for upload. Your image must be in the file format .png, .jpg, .jpeg or .gif.
  2. Size your images correctly. Your image dimensions should not be any greater than 1000px wide and 1000px high, and should generally be well under these limits if they are to be inserted into page content. If you wish to create full-width images refer to What is the size of my header area? or What is the width of my content area? where relevant.
  3. Ensure your image data size is appropriate for upload. Most editing tools will allow you to optimise the size of your image, e.g. PhotoShop’s File > Save for Web & Devices… menu item.
  4. Ensure your image is saved in RGB colour mode and not CMYK. CMYK colour mode is not web safe.

If you are uploading images for a slide show, you must also review the following items:

  1. Ensure ALL OF YOUR IMAGES ARE IDENTICALLY SIZED. i.e. the width of every image is the same fixed value X and the height of every image is the same fixed value Y. Note that the width of your images will equal the width of your slide show.
  2. Keep the number of slide images and their collective file size to a minimum. The higher these values, the longer your slide show will take to load and the less likely the average visitor will remain on your page to view any of your slides. Higher values may also cause your slide show not to work on lower memory devices (e.g. mobile devices). Keeping the total of file sizes under 1000kB is ideal, (e.g. 8 images at 200kB each = 1600kB = 1.6MB = higher than recommended). See the next section Minimise Image Data Size for more details on reducing image data size.

Minimise Image Data Size

Keeping your image data sizes as small as possible helps improve page load times which in turn reduces the risk of visitors abandoning your page and/or site and can even improve your SEO. A slow loading home page, for example, can easily lose a potential customer before they have even seen your product or content.

With this in mind, try to keep the number of images on any given page to a minimum (where practical) and use an image optimisation tool to reduce the data size of your images. We recommend JPEGmini for .jpg/.jpeg images and Smush.it for .png images.

Upload Your Images

Once you have prepared your images, you will need to upload them to a publicly accessible location on the internet using one of the following options (note that this does not apply to header, background and product images, as these are uploaded via you Big Cartel admin area as explained in the relevant support articles).

If you have your own web hosting space, you can use that instead of the following options.

TinyPic

TinyPic is the quickest and easiest way to upload an image for use in your web page.

  1. Navigate to the TinyPic web site.
  2. Click the Choose File button.
  3. Select the image from your computer to be uploaded.
  4. Leave all the settings at their default and click the Upload Now! button.
  5. When the upload is complete, copy and save the URL provided in the Direct Link for Layouts field – this is your public URL.

Dropbox

Dropbox is a more advanced tool for file sharing and can be used for images as well as other file types. We recommend the use of Dropbox for anyone that wishes to share files publicly and privately as well as access their files from multiple locations and devices.

  1. If you don’t already have a Dropbox account, create one at the Dropbox web site.
  2. Ensure that your files (e.g. images, pdf’s, etc.) are prepared for upload on your computer and note their location.
  3. Log in to your Dropbox account.
  4. If you do see a folder named Public:
    1. Locate the folder named Public and click on it.
    2. Click the Upload button located above the file list on the following page.
    3. Select the files from your computer to be uploaded and Start Upload.
    4. Once upload is complete, click near the date / time in line with the file you wish to use on your web page so that it becomes highlighted.
    5. Select Copy public link from the top menu.
    6. Copy and save the complete URL provided – this is your public URL.
  5. If you do not see a folder named Public:
    1. Locate the folder named Photo (or the New Folder button area and create and name a new folder if you prefer) and click on it.
    2. Click the Upload button located above the file list on the following page.
    3. Select the files from your computer to be uploaded and Start Upload.
    4. Once upload is complete, click near the date / time in line with the file you wish to use on your web page so that it becomes highlighted.
    5. Select Share link from the top menu.
    6. On the following page click Copy link to this page
    7. Open a new window in your web browser and paste the copied link into the address area, for example:
      https://www.dropbox.com/s/696hn15f2jk6739/my-image.jpg
    8. Replace the www near the beginning of the address with dl, for example:
      https://dl.dropbox.com/s/696hn15f2jk6739/my-image.jpg
    9. Click enter and test that your image loads in the page without any surrounding controls or Dropbox branding. Note that the URL may automatically change before loading your image.
    10. If you see just your image in the web browser and nothing else, copy the final URL from your browser address bar – this is your public URL.

Note: If you intend to use your Dropbox frequently for uploading and sharing files, we recommend that you install the Dropbox application on your computer to make file upload even quicker and easier. In this case, you can right click files in your local Dropbox folder to obtain the public link.

Check Your Public Image URL

Once you have uploaded your images, you should have public URL’s for your image files, for example:

http://i39.tinypic.com/aemt5j.jpg

It is important that you are using only the URL (i.e. the direct address / location like the one shown above) for your images and that they are public (i.e. available from anyone’s web browser), as this is what our support articles expect as a starting point.

The following checkpoints will help you confirm that you have public image URL’s.

1. View your image

When you load your public URL’s in your web browser they should show a single raw image. For example (click the following link):

http://i39.tinypic.com/aemt5j.jpg

2. Don’t copy HTML tags – just the URL

Our support articles and shortcode require that you begin with only your image URL and not a complete image tag. For example, the following are INCORRECT

<img src="http://i39.tinypic.com/aemt5j.jpg" alt="" />

or

<a href="http://mysite.com"><img src="http://i39.tinypic.com/aemt5j.jpg" alt="" /></a>

3. Your URL must link to the raw image not an image page

Links to image pages, e.g. a Flickr image page, or image slide show code, will not work. For example, the following is INCORRECT

http://www.flickr.com/photos/8243976@N03/8160742355

4. Your URL must start with ‘http’

Public URL’s always start with http as in our example:

http://i39.tinypic.com/aemt5j.jpg

If your URL starts with anything else it is incorrect. For example, the following local computer file starts with file and is INCORRECT

file:///Users/tim/Desktop/aemt5j.jpg

5. Check your file extension

A good indicator of an appropriate direct image URL is that it ends with a valid image file extension – i.e. “.jpg”, “.png” and “.jpeg” – as with our example:

http://i39.tinypic.com/aemt5j.jpg

Related articles...