Time-consuming, but important

Image editing is time consuming, which is why we charge to edit your images if they are not web-ready.  Images for the web need to be no larger than the widest screen they will be viewed on.   The width of a web site can be restricted to a maximum width on even the widest screen.  Even wide screen slider images would rarely need to be larger than 2400px wide.

If you check the file size of images straight from your camera, you may find they are over 7MB in terms of file size, over 5000 pixels wide and almost 4000 pixels high.  For web sites this needs to come down to less than 200kb with most images being around 600x480px.

Optimise images for Quality .v. Size

The trade-off with images is to get the best quality image perceivable to the human eye using the smallest file size.  Only two things can make an image smaller in file size:

• Reducing the physical dimensions of the image
• Optimising the image using technology

If you search Google for “resize images” you will see plenty of sites offering to resize images online for free.  We recommend you resize your image so that they are the same dimensions throughout the site.  For regular images that might be 600 x 480, 600 x 600, 480 x 600 and 480 x 480 with slider images 1200 x 600 or 1200 x 480 for example.

The easiest way to do this is to use a free image editing programme or online app.  If you have less than 20 images to optimise, go to the online image editing app TinyPNG and optimise them all in one go once you’ve resized them.  If you have a lot of images then try Irfanview, free image editing software.

Image Editing - Cropping & Resizing Images

It may be that you need to use a collection of images from different sources.   These may have different dimensions or ratios or it may be that you only want to use part of the image.  You will then have to use software to crop these images into uniform sizes.

Always keep a master folder of images.  Copy them to a new folder before cropping or resizing so you always have a backup of best quality original images to fall back on.

Irfanview and The Gimp are free to use image editing software that you can install on your computer and use to resize or crop images.  Irfanview can also batch process images to optimise or resize them.

Both these programmes are well documented on the internet so you should be able to do the most import tasks of cropping, resizing and optimising with only a short learning curve.

Avoid Downloading Disaster

Please, do not ever download images from the Internet unless you are purchasing stock images or downloading from a reputable source.  Not only could you be at risk from litigation regarding copyright, but you also expose your computer to malware within images that can cause serious harm to your computer and ours.

If you need stock images then use a free or paid stock image site.

Sources of free images like Pexels, Pixabay and Unsplash can be found using a Google search for “free stock images”.   Always do a reputation search on a site before downloading images.

Paying for Stock Images

Much depends on your market but we often use paid images from Yay Images as our main market areas are food, herbs and design.  Yay Images is a subscription based service which at an affordable $99 per year lets you download as many images as you like.  $199 lifetime is restricted to 10 downloads per day, but that is still 3,650 images per year!

We also use images from Depositphotos which has both On Demand and Subscription pricing but is more expensive.   Adobe Stock is at the top end of the pricing scale but ideal for more exclusive images https://stock.adobe.com/uk/plans

The graphics used on the our site are vector images from Freepik Stories.  They are available free with accreditation or sign up for an account if you don't want to credit.  At $9.99 per month (cheaper yearly) with 100 downloads per day, Freepik is good value for money if you need a lot of vector illustrations of this type.

Editing Vector Images

In our Branding document we briefly cover the importance of using vector images for your logo.

“Your logo should ideally be in vector format.  Unlike bitmap images like photos which are made up of a series of coloured dots, vector images consist of shapes that are filled with solid colour.  Vector images retain their clarity much better when reduced in size and can be enlarged without the issue of pixelization which affects photographs.”

Converting a bitmap photo image to a vector format will not make it a proper vector.  If you need to create a vector logo from a photo you will have to do one of two things:

• Trace it yourself in Inkscape (free image editing software, but installation and use may be a learning curve).
• Rebuild it yourself using Inkscape or paid software such as Adobe Illustrator.
• Pay someone on Fiverr.com or a similar site to do it for you.

Create your own Vector Logo

You can also use Inkscape or Gravit to create your logo from scratch.  Stock vector images can be manipulated to create your own logos.  Make sure you only download from a safe source.

Using a downloaded vector logo and using it for your business without editing is not a good idea as you risk confusion with any other business that has done the same thing.

A safer bet might be to have someone on Fiverr.com create one for you at an affordable price if you cannot afford a local graphic designer.

Keep it Simple

A logo is a device by which a brand can be easily recognised.  It is used in sizes ranging from the tiny 16 x 16px favicon for a web browser to billboards.  When creating a logo for a new business you need to think about where it will be used and how it will be used.

The ratio of your logo will have some impact on the design process.  If you see a web site that you like which uses a square logo, putting a banner logo in the same place will not work.

Keep it Flexible

If possible try to have versions of your logo which work as portrait, landscape, square and banner images if combining long text with a graphic image.  That gives the web designer more scope to represent your brand in a uniform way throughout your site.

Typography & Fonts

It is always a good idea to at least know which font or fonts have been used in your logo.  That font may not be available to use for website text but knowing the name does at least help to search for a near match.

Your logo designer may convert the font used for your logo into an Outline for maximum compatibility.  That means you will not need to own the font to edit your logo as the text has been converted into an image.  It also means, however, that you will no longer be able to edit the text.

The fonts you use in your web site form part of your branding so if you are creating a new logo for your business you may want to check out Google Fonts.  In addition to being easy to use on websites, the fonts can be downloaded and installed on your computer from where they can be incorporated into a logo design.   You may want to read our Typography document before choosing the font to use in your logo.

Useful Links

Photopea – a free online image editing app that can handle a range of file formats including  Adobe .PSD, .AI, .XD; .PDF, .sketch and .xcf as well as the more common .jpg, .gif, .png, .svg  and .tiff.

Photopea exports to common formats including .png, ,jpg, .pdf, .gif, .svg, .tiff, .webp and .bmp.

With filters and layer masks you have a free and flexible tool to create everything from a brand board to social media graphics and adverts.

Creative Fabrica has free fonts and a free web font generator that converts your otf and ttf fonts into a format you can use on your web site.