# Working with images in IPFS
**URL:** https://discuss.ipfs.tech/t/working-with-images-in-ipfs/7592
**Category:** Help
**Tags:** js-ipfs, files
**Created:** [March 31, 2020, 11:56am UTC](https://discuss.ipfs.tech/t/working-with-images-in-ipfs/7592 "2020-03-31T11:56:25Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@smn](https://discuss.ipfs.tech/u/smn)
#### Post date: [March 31, 2020, 11:56am UTC](https://discuss.ipfs.tech/t/working-with-images-in-ipfs/7592/1 "2020-03-31T11:56:25Z")
Are there good examples of working with images and IPFS? A scenario I’m thinking about:
1. Upload an image to IPFS.
2. Show this image from IPFS on an HTML page.
3. Make a preview of an uploaded image, so it could be loaded faster on UI.
4. Anything special about gifs?
---
### Author:  [@achingbrain](https://discuss.ipfs.tech/u/achingbrain)
#### Post date: [March 31, 2020, 2:27pm UTC](https://discuss.ipfs.tech/t/working-with-images-in-ipfs/7592/2 "2020-03-31T14:27:46Z")
Images can take a data URL as a `src`, which you can create from a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob), which you can create from a [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) so you could do something like:
```javascript
const toBuffer = require('it-to-buffer') // or it-concat for more performant BufferLists
const buffer = await toBuffer(ipfs.cat(cid))
const blob = new Blob(buffer)
const myImage = document.querySelector('img')
myImage.src = URL.createObjectURL(blob)
```
---
### Author:  [@postables](https://discuss.ipfs.tech/u/postables)
#### Post date: [March 31, 2020, 9:08pm UTC](https://discuss.ipfs.tech/t/working-with-images-in-ipfs/7592/3 "2020-03-31T21:08:57Z")
One other option would be storing your images and other formats as “unixfs objects”. The nide thing about this is that if you view the content over a gateway, the gateway will do mime-type detection and enable serving the content via the gateway.
---
### Author:  [@smn](https://discuss.ipfs.tech/u/smn)
#### Post date: [March 31, 2020, 9:27pm UTC](https://discuss.ipfs.tech/t/working-with-images-in-ipfs/7592/4 "2020-03-31T21:27:48Z")
> storing your images and other formats as “unixfs objects”
How to do this?
---
### Author:  [@postables](https://discuss.ipfs.tech/u/postables)
#### Post date: [March 31, 2020, 10:57pm UTC](https://discuss.ipfs.tech/t/working-with-images-in-ipfs/7592/5 "2020-03-31T22:57:14Z")
For `go-ipfs` you can use the `ipfs add` command. I dont personally use `js-ipfs` so I’m not 100% sure what the equivalent command would be, but it should be something like `add`, `addFromFS` and there may be one other one.
In the case of the `js-ipfs-http-client` package it’s `instanceOfAPIClient.add`, and `insanceOfAPIClient.addFromFS`
---
### Author:  [@achingbrain](https://discuss.ipfs.tech/u/achingbrain)
#### Post date: [April 1, 2020, 7:27am UTC](https://discuss.ipfs.tech/t/working-with-images-in-ipfs/7592/6 "2020-04-01T07:27:44Z")
Yes, the equivalent here would be just:
```javascript
const myImage = document.querySelector('img')
myImage.src = `https://gateway.ipfs.io/${cid}`
```
But you’re not really getting any of the benefits of IPFS here as the image is being served over HTTP.
There’s also a caveat that the gateway is a shared public resource and not one that you should rely on to power your app, instead you should set up your own gateways.
---
### Author:  [@smn](https://discuss.ipfs.tech/u/smn)
#### Post date: [April 1, 2020, 8:17am UTC](https://discuss.ipfs.tech/t/working-with-images-in-ipfs/7592/7 "2020-04-01T08:17:03Z")
> [@achingbrain](#):
>
> But you’re not really getting any of the benefits of IPFS here as the image is being served over HTTP.
Key point here! Thanx @achingbrain
---
### Author:  [@postables](https://discuss.ipfs.tech/u/postables)
#### Post date: [April 1, 2020, 8:36am UTC](https://discuss.ipfs.tech/t/working-with-images-in-ipfs/7592/8 "2020-04-01T08:36:02Z")
I mean if you’re using a remote gateway sure, but you can always use a local gateway on your laptop or whatever. Gateways have their uses, locally, or publicly; A gateway isn’t an exclusively public resource unless you make it.
---
### Author:  [@bgits](https://discuss.ipfs.tech/u/bgits)
#### Post date: [September 14, 2021, 5:03pm UTC](https://discuss.ipfs.tech/t/working-with-images-in-ipfs/7592/9 "2021-09-14T17:03:50Z")
The API seems to have changed. Trying to apply this exact code to an svg stored on IPFS seems to corrupt the data, while retrieving from the gateway works fine.
`https://ipfs.io/ipfs/QmZsU8nTTexTxPzCKZKqo3Ntf5cUiWMRahoLmtpimeaCiT/face_parts/Asset%20331.svg`