How to Make Website Graphics

make website graphics

It’s hard to have a website without images. Website graphics and photos can help break up your text, illustrate your points, help you promote your website on social media, and keep your visitors interested longer. There are plenty of places to get graphics for your website, these are just a few of our favorites.

Finding Free Images

Some popular sites where you can find photos that are free to use are:

We use the Featured Image from URL plugin with WordPress which lets you type in a keyword and pull suggested images from unsplash.com (the paid version also searches pixabay) to use as the featured photo for your posts. If you are in a hurry and want to find an image fast, this is super helpful!

One drawback of using free images is that you may end up with the same image as your competitors. (Do you recognize that one nurse who seems to work in ALL the doctor’s offices?) The other problem is that the images you find may not exactly fit the idea you hope to get across to your audience. For cases like these you might need more than what you can find from free image sites.

Purchase Stock Photos

One way to get better quality images is to pay for them. By purchasing your images you can avoid some of the more common and overused images – but you can’t guarantee that your competition didn’t (or won’t) purchase the same one.

  • Shutterstock (subscription plans start at $29/month for 10 images)
  • iStockPhotos (subscriptions start at $29/month for 10 standard images to $70/month for 10 premium images)
  • DreamsTime (subscriptions start at $25/month for 15 images)
  • Getty Images ($175-499 per image – depending on size/quality)
  • Adobe Stock Photos (subscription starts at $29/month for 10 images)

Create Your Own Images

The best way to create images for your website is to make your own. This way you can ensure that your images are unique and you have full rights to them. With graphics software you can turn even a mediocre photo into a great image for your website.

  • Canva has a huge selection of templates for all kinds of graphics: logos, brochures, social media sharing, and more. They have a large collection of stock images that you can search in addition to uploading your own photos. Not all of their images are free to use. Some require a one-time payment and others are only available to subscribers. Subscriptions start at $9.99/month for individuals. Canva tools get our vote for the best templates and ease of use.
  • Pixlr allows you to edit your photos online for free. They have a selection of effects and templates that you can use to turn your own photos into images for your website or social media promotions. Additional images and templates are available to subscribers with plans from $4.90-29.00/month. Pixlr has better photo editing than Canva, but fewer free images and templates and a little harder to use.
  • Photoshop is the industry standard for photo editing. Adobe offers a cloud version of Photoshop starting at $9.99/month. More expensive subscriptions include additional products to create and edit images and videos. Photoshop is a professional tool and has a steep learning curve.
  • GIMP is an open source alternative to Photoshop. Like Photoshop, GIMP is a professional tool with a steep learning curve. (There are a lot of YouTube videos to help you learn GIMP if you are interested.) GIMP is a more traditional software product with downloads for both PC and Mac.

Optimize Your Images for the Web

One important metric to keep in mind is website speed. In order to keep your website fast, you want to make sure to optimize your website graphics.

The photos from my phone start out at something like 4000px (and 7MB). That’s GREAT quality – and photographers and stock image companies love to talk about their high quality images. If you are going to print a magazine, then these images are important as high-end printers actually use all that image data to print beautiful pictures.

Online images are different. Even large desktop monitors are not 4000px wide – so they have to compress your image to display it. There is also an image depth (dpi) that is typically 300-1200 in print, but less than 100 for your monitor. That means you have a lot of extra data in your image that no one will ever notice except when they are waiting for it do download.

Crop Your Images

The first thing you want to do is to crop your image. This is especially important for photos you take yourself. Cropping the image lets you highlight only the part you want to emphasize – eliminate the extra part on the edges and appear to “zoom-in” on your subject.

After you have cropped the image, you will want to resize it. The exact size will depend on where you are going to use it. Your image does not need to be larger than what will be displayed. If your webpage is 800px wide, then your images should not be more than 800px wide. Even though the web browser will resize the image to fit – graphics programs will give you better quality when they do the resizing. If you want to display your image with text beside it then you can reduce the size even more.

Optimize Your Images

Optimizing your images means making the file size as small as possible – without losing any noticeable quality. We like using Optimizilla, an online image editor to compress our cropped images before uploading them to our website. This tool lets us see a preview of the image as we experiment with how small we can make the file size.

You can see your results as you edit, both visually and with the estimated file size.

About the author

WCD

Karen Freeman-Smith currently makes a full-time living from a small portfolio of websites. She has 25+ years of experience in programming and web development for companies like Lockheed Martin, PBS, Daimler and many others. She has a BS in IT with a minor in Business Systems Analysis. Karen lives near Portland, OR with her partner, two grown children (in and out of the basement), and a cats: Havoc and Shiva.
You cannot copy content of this page