We’re dedicating this newsletter to website imagery. We’re sharing some tips, tricks, and free tools you can immediately use to produce amazing images for any of your online projects. If you need additional help or don’t have the time, we offer a full suite of graphic services. We can even train you on the tools mentioned below.

Where Can I Find Free Images?

We’re all about saving you time and money. If you’re looking for great images for your online project, there are plenty of free options available. We’ve found that using the two sites below is enough for the average user.

Pixabay.com is our go to website for free images. They have over 1.3 million images and videos that are free to use without limitation. Although it’s not required, we recommend signing up for a free account. Here’s what you can find at Pixabay:

  • Background videos for use on your headers or sliders
  • Amazing photographs in various formats and sizes
  • Vector graphics to use for logos or other print jobs

Google allows you to search for images that are labeled ‘free for reuse’. Simply type your search term in Google and head to the images tab. Once there, click on the tools tab to reveal additional search options. Next, click the ‘Usage Rights’ tab and select ‘Labeled for reuse with modification.’ Google doesn’t own these images and can’t guarantee that they aren’t copyrighted. You should follow the image link and ensure that the site that owns the image allows you to use it commercially.

How Can I Edit My Images For Free?

There are two editing tools we recommend for every DIY web developer. They are both free and have been around for a long time. Although there is a learning curve to these tools, there is a huge user base that provides plenty of free tutorials, videos, and how-tos. This means you’ll have plenty of free training via Google and YouTube.

GIMP from gimp.org is an open-source (free) raster graphics editor. With GIMP, you can resize, crop, convert and even create amazing images for your project. It’s available for all major operating systems and comes packed with more filters and effects than you’ll know what to do with. If you’ve ever used Photoshop, you’ll feel right at home with GIMP.

Inkscape from inkscape.org is a professional, open-source (free) vector graphics editor. If you’re looking to make a logo or create vector artwork for any of your marketing materials, you can’t go wrong with this tool. With SVGs being more prevalent on the web, you’ll definitely want to learn how you can utilize them on your site. Most modern browser now support SVG rendering.

What Are The Different Image Types?

JPEG/JPG – A raster image format that supports millions of colors. This is the format most digital cameras and phones store photographs in. Best for blog photos or large background pictures. You can use GIMP for these types of images.

PNG – A raster image format that was meant to replace the GIF format. Best for logos and images that require transparency. You can use GIMP for these types of images.

GIF – An older format that supports animations and a small color palette. This format is rarely used and has been replaced by PNG. Best for logos, animations, and line art. You can use GIMP for these types of images.

SVG – An XML-based vector image format used for images that scale without distortion. Although this format is primarily used in print, most modern browsers now support SVG rendering. You can use Inkscape for these types of images.

How Can I Optimize My Images For Web?

There are two primary methods to optimizing images for web. The first is to use a website like tinypng.com to compress the images before uploading them to your site. We like this method best as it reduces the image size before it gets stored in WordPress. Larger files take more disk space on your hosting account. Even if you think your image is compressed by your graphics software, it’s worth running it through tinypng to trim any excess fat.

The second method is to use a plugin that optimizes images within WordPress. We don’t like this method as much because it requires another active plugin on your site. Active plugins require upkeep and don’t always play nice together. Popular options are WP Smush and EWWW Image Optimizer.

Once you locate or create an image you’d like to use, follow these steps to optimize them for use on the web:

  1. Create two local folders on your computer where you can store the images in both non-compressed and compressed states. The two folders can be named something like originals and compressed. You’ll want to keep both copies of the images in case you have to make changes to the original.
  2. Run the original image through tinypng.com and download the newly compressed version. Place the compressed version in the compressed folder and add an identifier to the filename that let’s you know it’s compressed. We typically use ‘_tiny’ on the end of the compressed file version so we know we sent it through tinypng.com. Example: myimage1.png and myimage1_tiny.png
  3. Upload the compressed version to WordPress.
  4. Run a speed test on your page to ensure that ‘Optimize Images’ isn’t one of the factors keeping your page from loading quickly. We like GtMetrix.com, Pingdom.com, and Google Page Speed for this.

How Can I Make My Own Logo?

Logos are best created using a scalable vector format like SVG. Using an SVG allows you to edit and resize the image for use in different marketing media, including web. You’ll need a tool like Inkscape to create and edit this format.

If you have a generic idea for a logo but have no artistic skills, you can search for and use an existing vector graphic from pixabay.com. Download the image in vector format, open it in Inkscape, and edit until your heart is content. If you possess artistic skills, you could start from scratch and create the entire logo with Inkscape. There are plenty of video tutorials on how to design with Inkscape.

Once you have the logo design you want, you’ll need to export it for use on your site. We recommend using the export->png option in Inkscape. You’ll probably want to export it with a height of around 75-100 pixels. This allows the logo to fit nicely in the header without taking up too much vertical space. With the PNG format, you’ll also have the transparency you need to place the logo over any color background.

Remember to always save the SVG file you’re working on. This gives you the ability to come back and make edits for colors, fonts, sizes, and general design. Once you have this SVG image, you can use it to make business cards, t shirts, and other marketing materials for your business.

How Can I Protect My Images?

If you create images that you’d like to protect for one reason or another, we’d recommend a simple watermark. This is a great way to keep people from using your images on their sites. You obviously don’t need to worry about protecting stock images you obtained elsewhere, but you may want to protect photographs and other visuals you created for marketing purposes. It’s very easy to steal an image from a website and many people do exactly that.

Watermarking also serves another purpose. Google’s bots also search for and index images on your site. These are the images you’ll find under the Images tab on the search results page. If you have images on your site, Google makes those images available in their search for anyone to see. Give it a try by typing “site:yourdomainname.com” in Google and click the images tab. If you sell widgets on your site and someone searches for images of widgets on Google, your images will show up in the results. Having a watermark on the image helps build brand identity and may increase traffic to your site.

If you need to watermark a bunch of images, we’ve created a tool to do just that. Give us a call to learn more.