Dev Practical

How to upload a picture to Codepen

There are some common challenges that you are going to face while using codepen.
One such challenge that you will face is where to store the images that to use with your HTML & CSS project. When it comes to images and files, Codepen has a few limitations that might give you a headache such as:

    1. You can only host images on Codepen using a Pro or a Super Pro account. That means you have to pay to store images on codepen. You get 1GB and 5GB respectively.
    2. The maximum allowed file size is 2MB. Any image or file above 2MB will not be uploaded on codepen.
    3. You can only link to these images inside of Codepen. So if you want to use these images elsewhere, you will have to download them and then upload them to the new place you want to use them.
    4. You can only upload 10 files at one go. To upload more files, you will have to wait for the first 10 to finish uploading before adding the second batch. If you have many files you want to upload, this might be a big headache for you.
  • So let’s figure out how to overcome these two challenges.

    You can only host images on Codepen using a Pro account.

    If you can afford and are willing to pay for a pro account, by all means pay for the account and use it to host your account.
    For those who cannot be able to pay for a pro account, or Codepen file storage services dont suit you, you can store your images elsewhere and then add a link to your image.
    One of the places that you can save your images is on Github.
    You can checkout a quick tutorial on how to upload images to github.

    You can also save your image on Flickr.

    Once you save the image, copy the URL/ link.

    Open the codepen that you want to add the image.
    Write the html image tag
    Inside the double quotes, add the link that you copied previously so that it look like this.
    Your image should now be visible on the codepen. You can add as many images as you want.

    The maximum allowed file size is 2MB
    To overcome this, you will need to reduce each of your image file size to a size of less that 2MB. You can achieve this by:
    Saving the file as a .jpg instead of .png.
    Lowering the quality of the image so that they are less than 2MB.

    The image assets are only link-able through *codepen.io domains.
    If you want the ability to link your images from any website, please use other services like Github or Flickr or Drive of Dropbox since you won’t be able to do that with codepen.io.

    You can only upload 10 files at one go.
    If you have lot of image that you want to upload, you can either be very patient and upload 10 image at a go or use a different service to upload and link the images on codepen.