Image Editing Tools

Resizing an image in Sqoosh

Here are some of the tools I use when finding images, editing images and optimising them for web. There are also a couple of icon libraries and a CDN.

Unsplash

Unsplash is a website dedicated to giving away freely usable images that have been uploaded by the community. All of the photos in Unsplash's giant collection have been uploaded by the community and are free for anyone to use in any way they like such as using the images on their website, blogs, PowerPoint presentations, adverts and much more.

There are a wide range of photos from landscapes, nature, animals, patterns, colours and business related photos such as offices, computers, people working and remote working. This means there is always something you can use no matter what it's being used for.

The images are all high resolution so there's no need to worry about quality. They also integrate with platforms such as Trello, Adobe Spark, Medium, Squarespace, Google Slides, Codepen and many more so you might be using one of their images already without even knowing it. After many years of using Unsplash I have also become a contributor to give back to the community.


Price: Free
Link: Unsplash
Undraw

Undraw is a site with free to use illustrations, similar to Unsplash. You can search for different kinds of illustrations, from basic ones such as walking outside, mobile devices and downloading files to more specific ones such as building a website wireframe, product photography and syncing files. If illustration the way you want to break up long format content or just to add something different to your site then Undraw is great.

On the site itself, before downloading, you can edit the colours of the illustration so it's on brand which is a great feature for someone who isn't comfortable either doing this in CSS or an image editor. You can download your illustration in either and SVG format if you're comfortable using that on your website or as a PNG for posting on social media or is you don't have the ability to use an SVG on your site.


Price: Free
Link: Undraw
Illustration Packs

Similar to UnDraw these are free illustrations you can use on your website. The difference between these illustration packs and UnDraw is these are grouped into packs rather than indivudual illustrations and unlike UnDraw you can't edit the colours in the browser. You would have to download them and edit them in Illustrator/Photoshop.


Price: Free
Link: Illustration Packs
Pexels

Pexels is very similar to Unsplash as it is a large collection of images uploaded by contributors that are high quality and free to use for whatever you'd like. It's great to use both Unsplash Pexels as sometimes Pexels has the kind of image you want and Unsplash doesn't or the other way round, also, quite a lot of the Unsplash contributors also post on Pexels so if you have a preference between the two sites it's not like you're missing out on certain content.


Price: Free
Link: Pexels
Raw Pixel

Raw Pixel is similar to Unsplash and Pexels and has a large collection of free images that you can use. It's not any better or worse than Unsplash or Pexels but if you're looking for a particular image and can't find it on the other platforms this is another good site to use.

They also have a premium collection of pictures which starts at $3 per month for unlimited personal use or $19 for unlimited commercial use. I haven't used the premium side of things but it looks similar to Shutterstock, Adobe Stock, etc.


Price: Free with paid plans available
Link: Raw Pixel
Flat Icon

Flat icon is a collection of thousands of icons. Most of the icons can be found for free and used with attribution or you can get a premium plan where you have access to all of the icons and no attribution is required. Icons can be downloaded on their own or as an icon pack and come in a variety of formats such as PNG, SVG, EPS, PSD and Base 64.


Price: Free with paid plans available
Link: Flat Icon
The Pattern Library

A simple tool which has a selection of free to use patterns and backgrounds. Great for website header images or to use in print.


Price: Free
Link: The Pattern Library
Venngage

Venngage is a tool to create simple infographics and is perfect for a small business without access to a graphic designer. To begin with, you choose one of their templates to give you a basic layout. Then all you need to do is add any charts and visuals to help show your data and then you can customise it to fit your brand by changing fonts and colours.

This tool has a free plan which limits you to 5 infographics and applies the Venngage branding to your infographic and the paid plans start at $19 per month.


Price: Free with paid plans available
Link: Venngage
Imgix

Imgix allows you to transform and optimise your images using URL parameters and then host them with their CDN. Using the URL parameters you can resize, crop, overlay text, add & place watermarks, enhance images, compress them and then have them served through their CDN.

You may not have to re-upload any of your images depending on where they're located as Imgix can access cloud buckets with its own set of credentials. They currently support Amazon S3, Google Cloud Storage, Microsoft Azure or web folder.

As they operate on a pay as you go model they don't have a free plan but they give you $10 in free credit so that you can play around and test the platform before commenting to anything. As it's pay as you go they charge $3 per 1000 master images you access. Master images are the ones stored in your cloud storage and if they're accessed it counts as one of your 1000 images but if you have a page which uses one of your master images but no one ever goes to that page then you won't be charged. However you can crop, overlay, enhance, etc the same master image multiple times and it only counts as a single use.

You are then also charged for the bandwidth you use through their CDN, which is charged at 8c per GB so this probably won't be a massive cost factor unless you use a lot of large images or have a high volume of traffic. One thing to take note is that there is a minimum spend of $10 per month to keep your account active. If you spend over $10 a month then this won't be an issue but if you only serve a small number of images then it may turn out to be more expensive than you think.


Price: Starting at $10 per month
Link: Imgix
Lorum Picsum

Lorum Picsum is simply Lorum Ipsum for pictures. To use it simply use their URL and add your width and height to the end of it and you'll be given a random placeholder image in those dimensions.

If you're using a CMS like WordPress then this may not be much use to you as you'd need to download the image and then add it to your media library before using it as a place holder.


Price: Free
Link: Lorum Picsum
Free Stock Photos

Free Stock Photos is pretty much what it says on the tin. It's a site with free stock photos you can use and is similar to Unsplash, Pexels, etc. While this isn't my favourite site for free photos to use online and in my marketing it's great to have as another resource in case the other sites don't have what you're after.


Price: Free
Link: Free Stock Photos
The Noun Project

The Noun Project is similar to Flat Icon as it is a collection of 2 million royalty free icons that you can use in your projects. If you choose the free plan you'll have to attribute the creator of the icon in your project or you can opt for a paid plan which costs $39.99 for a year and allows you to use all the icon without attribution.


Price: Free
Link: The Noun Project
Adobe Spark

Adobe Spark is a design tool similar to Canva and allows you to create simple social posts, webpages and short videos.

It comes with templates for all of the major social media networks so you always have the right size you need and there are also a wide range of design ideas which help you to get started with Spark.

You can also let your creativity flow and start with a blank canvas where you can add photos from a wide range of sources such as Dropbox, Creative Cloud, Google Photos. It also has a search feature which lets you search for free images you can use across the web and also allows you to upload your own images from your computer.

You can then overlay your text, add icons to your design and any other finishing touches you need. Once you're happy with your design you can either download it or share it straight to Facebook, Twitter, Email or a custom link, straight from Adobe Spark.


Price: Free
Link: Adobe Spark
ImgOptim

ImgOptim is a free bit of software for Macs which allows you to compress images before uploading them to your website. This is the best image compression tool I have used either on desktop or a plugin/web solution as it's easy to use and offers the best compression without noticeably reducing image quality.

To use this tool just drag and drop your images or folders with images into the tool and it will go through each image and run several compression algorithms to see which one reduces the image size by the most and then applies it.

You can use ImgOptim to compress pretty much any type of image that you would use on the web such as PNG and JPG. In the settings, you can specify if you would like lossy (where the image quality is reduced by removing pixels) or lossless (where the pixels aren't removed) compression. I tend to use lossy and set the quality level to 75 for JPGs and 80 for PNGs which gives me the best results however it's always best to check you're happy with the results.

The downsides to this tool are that it's only available on Macs however, this can be overcome by creating a mac virtual machine. The other downside is that depending on the compression level, algorithms selected and the number of images you're compressing in one go, it can take a while to compress all of the images.


Price: Free
Link: ImgOptim