How to create images for a website

If you are trying to add content to your own website, you definitely need images.

Why bother with an image if my content is 100% text?

When you go to a bookstore, you will see many books that have a cover.

Somewhere in the process, the author or the publishing company decided that the manuscript needed a cover.

Even Leo Tolstoy’s books have a cover.

The goal is to get people to click on your page from an external source.

At the end of the day, your website pages need a cover because by creating a page, you are putting it up for viewers on the bookstore that is Google, Facebook, Twitter or some other large traffic source.

Having good images also allows you to rank on Google’s image search, so that gives you another source of traffic.

Stock photos for websites (free and paid)

Depending on how much money you want to spend, here are some of the places where I’d recommend people to get their images from.

Free stock images

Adobe Stock (Free) – Adobe Stock is a professional-grade stock photo provider and they came out with some free offerings of photos, videos and illustrations.

Pexels – mostly for photos and videos. The quality here is very good. No illustrations or vectors. Pexels’ photos are generally very good, but they don’t have the same diversity in content.

Pixabay – you can get free photos, vectors, illustrations here. The best part about Pixabay is that they host a lot of varied content. The worst part is that the quality can be quite low.

Go to these sites and find the image that you need and download them. You might have to sign up in order to download full-res images.

Copyright caveat emptor

I’d definitely get photos from Adobe Stock’s free collection before I continued down the list. One of my previous clients got hit by a copyright troll who went through his website and asked for the licences of his images. He was able to produce most of them, except one image. He ended up paying the troll a few hundred bucks as a settlement.

While Pexels and Pixabay claim that their images are CC0/no attribution/commercial OK, it’s a bit harder to know what to do if a copyright troll comes your way. 

In the end, it’s all about faith and crossing your fingers, and it’s easier to do so with Adobe behind you.

Entry-level paid stock images

I personally subscribe to Envato Elements and I can wholeheartedly recommend them.

I paid US$198 for a year’s subscription and I get a whole bunch of photos, videos, Photoshop actions, brushes and other assets that help me do my marketing work.

Some of the graphics on the blog come from Envato. It really saves me a lot of time from designing my own assets.

I personally would recommend Envato wholeheartedly.

High-end paid stock images

If you want the largest variety, then consider paying.

Generally, stock image companies like iStock or Adobe Stock charge you by a monthly subscription (e.g. $100 for 30 credits) or you can prepay for your credits ($200 for 30 credits).

The upside to the former system is that you get credits at a cheaper rate. The downside is that they expire. You can usually roll them over for a month and then they get wasted.

The upside to the second system is those credits don’t expire but you do pay a higher rate per download.

I have used iStock and I can say that you do pay for what you get.

If you compare the monthly subscription cost of Envato versus Adobe or iStock, you’ll see the cost is significantly more on Adobe or iStock.

For example, iStock photos are generally 3 credits, which is $36 CAD. That’s a whole month’s subscription to Envato.

But having access to stock images from these premium sites can sometimes save me time because they really have almost everything you can imagine.

Free emojis

If you know how to do image manipulation, you might find these emoticons provided by Twitter to be very useful.

I use Twitter’s Twemoji in my images to express a certain feeling, and I also like using the pointing finger to highlight certain things. The finger is certainly more eye-catching than a nondescript arrow.

The only thing you need to know is that Twitter requires you to attribute them. You can view the full text on their website, but here are the important lines: 

“The graphics are licensed under the CC-BY 4.0… [we] will accept a mention in a project README or an ‘About’ section or footer on a website.”

How to download Twitter emojis

1. Go to this link
2. Click the “Code” button and click “download ZIP”
3. Once downloaded, extract it. You will probably want to examine the 72×72 folder or the SVG folder for the vector images.
   1. If you have software that can open vector files, use the SVG files first.

How to find the perfect Twemoji

One of the challenges I faced was that the Twemojis weren’t easy to search through. They were all serial numbers.

However, by using this search engine, you can enter some keywords and find the correct serial number to use.

In order to do so, go to this website and type in what you’re looking for in the search bar.

Then, click on the search result you’re looking for.

Scroll down until you reach the Codepoints. It will likely be U+[XXXX].

Find the XXXX serial number in the SVG/72×72 folder you just downloaded. That’s what you’d want to use.

How to put text and other edits on your image

Once you have found the image that you want to use, head to Canva.

I find Canva to be very easy to use and I use it sometimes for inspiration and for the ease of being able to do a lot through the browser.

You can also find a whole page of tutorials there if you want to achieve something more complicated.

You might be asking, is it worth learning Photoshop/Illustrator? I’d say yes as I use it a lot for my professional work.

But they do take a while to learn and you can accomplish much of the same on Canva without paying the high subscription cost for the Adobe suite.

Optimization before uploading

If you are going to upload your pictures, you definitely would want to optimize them before they go online.

This helps you ensure that your website will load quickly.

If you are using WordPress, it automatically sizes images for you, but ultimately it’s still ideal if you uploaded an image that is already compressed because it reduces the space requirements on your server and also reduces server load during upload.

You can use a desktop tool like Adobe Photoshop, Lightroom, Bridge. I personally use Picasa, which is no longer available.

I try to keep images to less than 2000 pixels on the wide side, but usually websites can work with 1200-pixel images. This is a good rule of thumb, but if you can find out how wide your images are displayed on your website, that would be ideal.

Here are some online options you can try

Bulk Resize — not only can you resize, you can also watermark, crop and compress images.

Shortpixel — image compression and optimization (supports JPG, PNG and GIF)

Need more help?

If there’s something that I have missed or you would like more clarification on, please email me. I’d love help you get things done.