List of Free Image Tools Every Frontend Developer Needs
Tags: webdev, ux, css, productivity
Published: 2022-07-31 14:04:19

This is a list of free tools every frontend developer probably will google for one day. These websites lets you resize, reformat, edit, generating or downloading images and videos to use on your website or blog.

1. [Photopea - Online Photoshop Web Client](#1-photopea-online-photoshop-web-client)
1. [Adobe Color Wheel - Working with Colors](#2-adobe-color-wheel-working-with-colors)
1. [Generating a Theme From an Image](#3-generating-a-theme-from-an-image)
1. [Generating Solid Color Background Images in Base64](#4-generating-solid-color-background-images-in-base64)
1. [Turning Images and Files to Base64](#5-turning-images-and-files-to-base64)
1. [Generating CSS Background Images](#6-generating-css-background-images)
1. [Removing Background From an Image](#7-removing-background-from-an-image)
1. [Converting Images Into Different Formats](#8-converting-images-into-different-formats)
1. [Royalty Free Images, Graphics and Videos](#9-royalty-free-images-graphics-and-videos)
1. [Generate a favicon](#10-generate-a-favicon)
1. [Create a Profile Picture From an Image](#11-create-a-profile-picture-from-an-image)
1. [Multi Purpose Tools](#12-multi-purpose-tools)
1. [Where To Learn More](#where-to-learn-more)

## 1. Photopea - Online Photoshop Web Client

[Photopea](https://www.photopea.com/) is like Photoshop, but online. It's a very powerful tool for editing images and can also be used to convert images into different formats while changing the quality of the images. Adjusting lights and colors is very easy to do via the _Image_ toolbar menu. Just google how to do what you want in Photoshop and Photopea will often work in a similar way. Only your fantasy restricts what you can do with Photopea.

## 2. Adobe Color Wheel - Working with Colors

[Adobe Color Wheel](https://color.adobe.com/create/color-wheel) has great tools for working with colors. You can easily create your own theme by finding complementary, analogous or shade colors, or even extract a theme from an image. You can work effectively with HSB, LAB and RGB colors and check contrasts between colors. It's a tool I have used a lot through out the years.

![Adobe color wheel](https://www.perssondennis.com/images/articles/list-of-free-image-tools-every-frontend-developer-needs/adobe-color-wheel.webp)
_Adobe Color Wheel is a great tool to use when working with theme colors_

## 3. Generating a Theme From an Image

As mentioned, Adobe Color Wheel lets you to [extract a color palette theme from an image](https://color.adobe.com/create/image). It's not the only tool that allows you to do that. If you are not satisfied with the result you can use [Picsart's tool for that](https://tools.picsart.com/color/palette-from-image/).

![Extract theme colors from background](https://www.perssondennis.com/images/articles/list-of-free-image-tools-every-frontend-developer-needs/extract-theme-colors-from-image.webp)
_Don't wanna create a theme palette on your own? You can generate one!_

## 4. Generating Solid Color Background Images in Base64

Sounds pretty useless, but sometimes you actually need solid color pictures in Base64 format, then you can use [PNG Pixel](https://png-pixel.com/). Tiny Base64 images can sometime be embedded directly as CSS which the site shows you how to do, and a semi-transparent colored background image can give a nice user experience when using it as a blurred image placeholder while lazy loading an image. You can check out what it looks like on [my website's meme page](https://www.perssondennis.com/memes).

## 5. Turning Images and Files to Base64

If you find it useful to work with Base64 images, [Base64 Guru](https://base64.guru/converter/encode/image) allows you to convert images, audio and other file types into Base64 format. It's maybe not a tool to use daily, but when you need it it's nice to know about it.

## 6. Generating CSS Background Images

Do you want a simple CSS-only background for your website? [Hero Patterns](https://heropatterns.com/) allows you to generate SVG files you can use directly as CSS backgrounds. Choose a pattern and select a color and opacity and you are done. I provides you with generated CSS code ready to be copy pasted. Another similar site is [BG Jar](https://bgjar.com/).

Or why not generate a [cool smokey background image](http://dragdropsite.github.io/waterpipe.js/) with [Waterpipe.js](https://github.com/dragdropsite/waterpipe.js/)?

![Generate smokey background tool](https://www.perssondennis.com/images/articles/list-of-free-image-tools-every-frontend-developer-needs/generated-smokey-background-image-orange.webp)
_Smoking can be harmful, but smokey backgrounds are totally safe!_

## 7. Removing Background From an Image

Enough of tools for generating backgrounds. Maybe you don't even want a background. If so, there are tools for that as well! Picsart has a [background remover](https://tools.picsart.com/image/background-remover/) and [remove.bg](https://www.remove.bg/) is dedicated for that. And of course, old gold' Adobe Express can [remove backgrounds](https://express.adobe.com/tools/remove-background) as well. Make sure to checkout Adobe Express' other free tools, they have many of them.

![Tool to remove background from image](https://www.perssondennis.com/images/articles/list-of-free-image-tools-every-frontend-developer-needs/where-is-my-background-meme.webp)
_Grandma wants her background back_

## 8. Converting Images Into Different Formats

[Convertio](https://convertio.co/jpg-webp/) allows you to convert images, videos, audio and other kind of documents into different formats. [Adobe Express](https://www.adobe.com/express/feature/image/convert/png-to-svg) can also convert images and videos, but they don't support as many formats as Convertio.

![Convert images to different formats](https://www.perssondennis.com/images/articles/list-of-free-image-tools-every-frontend-developer-needs/convertion-convertion-formats.webp)
_Convertio offers to convert between plenty of formats_

## 9. Royalty Free Images, Graphics and Videos

Royalty free images can be found at different sites. Some of them costs money, some of them requires an attribution note, others are completely free to download, make sure to read the licence for that specific image. Here are a few alternatives.

- [Pixabay](https://pixabay.com/)
- [Feepik](https://www.freepik.com/)
- [Unsplash](https://unsplash.com/)
- [Picjumbo](https://picjumbo.com/)
- [Pexels](https://www.pexels.com/)
- [StockSnap](https://stocksnap.io/)

There are also sites that offer illustrations that you can customize on your own.

- [Blush](https://blush.design/)
- [UnDraw](https://undraw.co/)

Do you need a video instead of an image? Sure, that exists too!

- [Coverr](https://coverr.co/)
- [Pixabay](https://pixabay.com/videos/)

![Free royalty free images](https://www.perssondennis.com/images/articles/list-of-free-image-tools-every-frontend-developer-needs/unsplash-royalty-free-images.webp)
_Search and scroll to find images you never knew you needed_

## 10. Generate a Favicon

Every web page needs a favicon. Why not generate one directly? There's no need to draw it pixel by pixel, you can [generate one from an image](https://realfavicongenerator.net/)! That tool supports creating icons for different platforms on both web and mobile. The tool is unfortunately a bit slow to use, so if you want a quick and easy option you can use [favicon.io](https://favicon.io/) which allows you to generate a favicon from images, emojis and texts.

## 11. Create a Profile Picture From an Image

Do you want need a profile picture for you site? You can generate one using one of these tools.

- [PfpMaker](https://pfpmaker.com/)
- [Picsart](https://tools.picsart.com/design/profile-picture/)

If you would want to generate an avatar rather than uploading your own photo, you can use one of these tools.

- [Avatar Maker](https://avatarmaker.com/)
- [Random Users](https://xsgames.co/randomusers/)

![Free avatar maker online](https://www.perssondennis.com/images/articles/list-of-free-image-tools-every-frontend-developer-needs/free-avatar-maker-online.webp)
_What should we call her? Suggest a name in the comments!_

## 12. Multi Purpose Tools

Some tools can be used for a lot of things. These ones are tools you definitely should check out and save for later.

- [Adobe Express](https://www.adobe.com/express/)
- [Picsart](https://tools.picsart.com/)
- [Web Code Tools](https://webcode.tools/)

## Where To Learn More

If you liked this article, you are maybe interested to read similar articles. You can do that here on DEV or by checking out my [website](https://www.perssondennis.com/). I'm also active on [Instagram](https://www.instagram.com/perssondennis.com_webdev/) where I post more programmer memes. Make sure to follow me if you find it interesting!

_&nbsp; {% embed https://dev.to/perssondennis %}_