When I get asked by clients how to create web images for their blog or website, I generally point them to Canva, the outstanding web-based freemium image editor. My youngest daughter is a blogger, and I taught her about Canva — she was amazed that her old mom had taught her, a 29-year-old, about a piece of useful technology.

I use Adobe Creative Suite apps Adobe Illustrator and Adobe Photoshop to create and edit my images, but these apps are expensive and have a steep learning curve. Canva is an excellent alternative.

Why it Matters

Websites are full of images that help tell your story and illustrate your copy. Web images break up large bits of copy and help attract readers’ eyeballs.

With Google’s increasing emphasis on site speed as a ranking factor it’s not only important to have beautiful, professional images on your site, but it’s a vital part of your site’s design process to optimize the images for fast loading.

Types of Web Images

There two basic types of images: raster and vector.

A raster image is made up of pixels and cannot generally be enlarged significantly. If you try to enlarge a raster image it will become blurry and pixelated. A photograph is an example of a raster image.

Vector images, as described by Adobe, are built by mathematical formulas that establish points on a grid. They can be infinitely resized without losing sharpness or clarity. An example of a vector image is a logo or piece of line art.

When to Use What Format

With the exception of logos, most images you’ll find on a website are raster images. That’s because many, if not most, of the images you see on websites are photographs.

There are two basic raster image formats you’ll see used on the web:

Joint Photographic Experts Group (JPEG) and Portable Network Graphics (PNG). If your image needs transparency, it needs to be a PNG file. For example, you can use this format for your logo. Any image you’d like to appear without a background should be a PNG.

A JPG image is compressed to an extent controlled by the user, to reduce file size and therefore increase load speed. You’ll see a noticeable file size difference between PNG and JPG even with the same image.

My oldest daughter sent me this beautiful Pacific Ocean sunset image. I saved the image twice, once in JPG format and once as a PNG file, with identical pixel dimensions, 1000 x 750 pixels. The JPG version you see above is only 75kb, while the PNG version of the same file is 1.1MB. Unless you need transparency, use JPG.

The exception to that is a relatively newer format called WebP, which loads faster than both JPG and PNG. Some WordPress speed optimization plugins convert all images to WebP to help boost page speed. As of now, many image editing programs won’t work with WebP images. You can convert them without cost and easily at Convert.IO. There are numerous similar sites, most of which are free. You’ll find them with a simple Google search for webp to jpg converter.

For vector images, SVG (Scalable Vector Graphics) is the optimal format. It generates a smaller file, preserves scalability, and yields a sharp, clear image. However, WordPress doesn’t allow SVG uploads because they can be insecure and open your site up to vulnerabilities. If you want to use SVGs with WordPress, you’ll need to install the SVG Support plugin, which allows you to upload SVG images. For security purposes, check the box that disallows anyone except an administrator from uploading SVGs. Only use images you create or from trusted sources.

How to Create and Edit Images for the Web

One place that bigger is not better is on the web. Save your images only to the size you need them. Be sure your file sizes are substantially below 1MB. You don’t need images larger than 2500 pixels and you don’t need resolution above 72 pixels per inch (ppi).

Now I’ll walk you through how to create an optimal web image. Find your image from your own collection or download it from any of the numerous free stock photo sites.

Raster Images

If You Have Photoshop

Open the image and go to Image > Image Size. This will tell you how large your image is. Since this image is just over 4000 pixels wide, it’s obvious we need to resize it to display it on the web.

Go to File > Export > Save for Web (Legacy)or use the keyboard shortcut (on Mac) Shift + Option + Command + S or ⇧⌥⌘S. On Windows, type Alt+Shft+Ctrl+S.

In the dialog that pops up, choose JPEG, quality Medium, check Optimized and Convert to sRGB. Choose whichever metadata setting you prefer. Then, in the Image Size section, enter the desired width. Photoshop will automatically keep your image proportional. Click Save and give your image a name.

If You Use Canva

After you log in to Canva, you’ll see a purple button at the top right that says, Create a design. Click this button and choose Custom Size at the bottom. If you’re creating an image for a specific purpose, such as Instagram or Pinterest, you can use Canva’s built-in settings for those platforms.

Since we’re going to upload this image to our website, for now we’ll use the Custom Size. I’ve given this image a size of 1920 x 1280 pixels, which is plenty large for full-width header image.

You’ll see a blank screen. Click Uploads in the right column, second from the top. Then click Upload media at the top of that section. Select your image from Facebook, Google Drive, Dropbox, or your computer. Your image will now appear in the Uploads section with any other images you’ve uploaded to your account. Drag it into the box and size it with the handles until it fits perfectly. Then click Download at the top right, and click the drop down indicator to choose your file format.

Vector Images

Here’s a vector image of a desktop computer I’ve opened in Adobe Illustrator. These are often used online to depict web pages as they appear on an actual computer.

If I want the computer to display on the web without a white background, I’ll have to save it as a PNG file with transparency. Remember, as this is a vector file, as long as it’s still in vector format, I can resize it at large as I like and it won’t lose resolution or crispness.

I’ve deleted the background in this image. Now I’ll use the same command combination as I did in Photoshop: Shift + Option + Command + S or ⇧⌥⌘S. On Windows, type Alt+Shft+Ctrl+S.

Note that the controls are largely the same as in Photoshop, but be sure to check Transparency. Also notice that the preview of the image now shows the checked grid, which means it’s transparent. So we’ll see the actual outline of the computer.

Save as PNG and you’re good to go. If you want to save as SVG, go to File > Export > Export As and choose SVG.

In Canva

The process is pretty similar. You can see that I’ve added a colored background so that you can see that the image has transparency where it’s called for.

I can download this image from Canva in the same way I downloaded our beach image, just drop out the background and choose PNG format in the save dialog if you want just the image with no background.

Canva requires a paid account to export as SVG, so if you’ll be using it often it might be a worthy investment.

How to Optimize Images for the Web

Use a (free) service like TinyPNG.com to further optimize your images for display on the web. It’s easy to upload them, then download the optimized images.

If you use WordPress, use an image optimizer plugin like WP Smush or Imagify to slim them down even more and make your page load faster.