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:
- Preview or iPhoto for Apple
- Paint for Windows
- a professional level editing tool such as Photoshop
- or an online image editor such as Picasa, Phoenix, FotoFlexer or Photobucket (see Photobucket > edit photos) - these options are all free!
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.
- Ensure your image type is appropriate for upload. Your image must be in the file format .png, .jpg, .jpeg or .gif.
- 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.
- 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.
- 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:
- 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.
- 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, but 2000kB should be considered the maximum (e.g. 8 images at 200kB each = 1600kB = 1.6MB).
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.
- Navigate to the TinyPic web site.
- Click the Choose File button.
- Select the image from your computer to be uploaded.
- Leave all the settings at their default and click the Upload Now! button.
- 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.
- If you don’t already have a Dropbox account, create one at the Dropbox web site.
- Ensure that your files (e.g. images, pdf’s, etc.) are prepared for upload on your computer and note their location.
- Log in to your Dropbox account.
- If you do see a folder named Public:
- Locate the folder named Public and click on it.
- Click the Upload button located above the file list on the following page.
- Select the files from your computer to be uploaded and Start Upload.
- 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.
- Select Copy public link from the top menu.
- Copy and save the complete URL provided – this is your public URL.
- If you do not see a folder named Public:
- 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.
- Click the Upload button located above the file list on the following page.
- Select the files from your computer to be uploaded and Start Upload.
- 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.
- Select Share link from the top menu.
- On the following page click Copy link to this page
- 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 - Replace the www near the beginning of the address with dl, for example:
https://dl.dropbox.com/s/696hn15f2jk6739/my-image.jpg - Click enter and test that your image loads in the page without any surrounding controls or Dropbox branding.
- Copy and save the complete address (as shown in the above example – item H) – 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