Working with Images for your Website

The following two tabs change content below.

Donncha Hughes

Sole Trader/ Proprietor
Donncha Hughes is a mentor, trainer and business advisor. I deliver group and one to one training on Wordpress. My background is assisting business with development of marketing, business plans, grant and finance applications. See www.startuphughes.com for more...

Last week a client sent me an email asking how she could ‘save’ a brochure as a picture so that she could use the image in a presentation for a potential customer. She had included the brochure as an attachment and it took me all of 5 minutes to send her back what she needed. This got me thinking that the ability to work with images and other media is very important for anyone looking to manage a business website. This is a two part blogpost that aims to set out a few things that I have learned about ‘working with images for your Website’. It is two parts as it is a big topic. The second part will discuss how to insert Media in WordPress; how to use the Media Gallery; and my experience of a very small number of the many image and media plugins available in WordPress. This first post is where do you get the images in the first place and how do you edit them to your requirements.

Starting point: I am not a graphic designer

Everything I know about WordPress and now about images is self-taught … figured out when I needed to and keeping an eye out for new developments. I would consider myself a skilled ‘image manipulator’ whereby I can take a photo or a graphic that someone else has created and manipulate them for use in my web projects. Through the use of different tools, I can do things like adjust colour and sizes, and combine images and change the shapes and positions of different elements of the graphic; and add text. Here is a (clever) image that I created for a blogpost about Listening on my other website.

listening banner

A graphic designer has illustration skills whereby they can create graphics from scratch – starting with a blank slate using image-editing software the most popular (and expensive) being Adobe Photoshop. The advantage of using a graphic designer like Louise Lawlor of Blink Design in Limerick is that they can create files that can scale (more on SVG or Vector files below). So if you have a brand logo it will appear perfect as a small image on the web or on a big sign on a building. The work will also have a higher creative quality. I helped Robert to create the O’Mahony’s Travelling farm website last year and it happened that he knew how to use Adobe as he studied it in college and was able to create a banner for the website.  A local graphic designer could create something very professional in a few hours for a good value price (starting around €100) if you have a good idea of what you are looking to achieve.

 

O'Mahony's Travelling Farm, Munster

Using Images on Your Business Website

Within WordPress there are lots of occasions to use images and other media.

  • Header image for your website + images for sections depending on your theme
  • Display images in the Sidebar and Footer
  • Background images
  • Images presented in pages and posts
  • Add your Favicon …. or favorites icon used to decorate your site in the bookmarks and tab bar of browsers.

Visitors to websites expect the experience to be visually appealing and knowing how to ‘manipulate’ images is a key skill.

Before I discuss sources of images for your website and working with sizes and how to edit images, a quick word on file types.

 

File Types – Quick overview

Most people know that a Word document is saved as a .doc; and that a PowerPoint Presentation is a .ppt. Files are saved in formats so that when you go to open them again, the computer knows which package to use to open them.

  • A pdf is a document that can not be edited by the receiver. So if you have a Word document or Powerpoint presentation it is good practice to save it as a pdf (in the File >> Save As and change file type) before sending it to someone. I also use Cutepdf which is a neat free application that allows you to print any document as a pdf (useful for printing individual Excel spreadsheets as pdfs for example). There are lots of pdf reader applications and Adobe have premium Pdf readers which have lots of functionality to include the ability to fill in forms.
  • A JPEG is probably the most recognisable file format for an image used on the web. These can be opened and manipulated in Paint.
  • A PNG is very similar to a JPEG but is very useful as it probably won’t have any background. If you have an image in PNG it will ‘blend’ into the background of a presentation, word document and your website as per the image below. These can be viewed in Paint but can not be changed ie the new file will be converted to JPEG.
  • An SVG file is a format used by graphic designers which is scalable ie the quality of the image or logo is maintained at all sizes (small and big). There are free online file converters if you want to convert a PNG or JPEG to a SVG and vice versa. Here is a super post about these SVG or Vector files written by Pixabay – which refers to a free progremme called Inkscape for editing SVG files.  Pixabay is a source of free high quality images – over 690,000 free stock photos, vector and art illustrations.
  • An EPS is a file format used by Commercial Printers like SNAP …. just keep on file but you won’t be able to open them.

 

JPEG v PNG in powerpoint

 

Image Sizes

There are two inter-related aspects to image size.

#.1 File Size

Small file size images allow your website to load faster. Most digital cameras and smartphones take images that are 2MB (you can play with the sizes to make them anything from 1MB to over 10MB) on the basis that the higher the MB the higher the quality when you print them professionally. But websites are different. Smaller images work better as they improve site speed. Most images should be under 1MB and indeed the Cars image above is 202KB (20% of 1MB) and is of sufficient quality for viewing on screen.

Your File Manager will tell you the file size of your image.

File size provided in the Properties of the file

File size provided in the Properties of the file

#.2 Image dimensions or pixels

The file properties will also tell you the dimensions which is the  second key aspect of image size as measured in pixels.When working with images in WordPress, pictures can be displayed as a Thumbnail (150 width x 150 height); medium (300 x 225); large (550 x 412) or full size and these standard dimensions can be changed for your website if you wish. So when you want to display a thumbnail of an image, you select the thumbnail format as the image is inserted. Using standard sizes gives consistency to your site. In any event most WordPress templates will automatically resize the display size of your image so that full size images are displayed properly to your viewer.

Changing Image Size

It is useful to know how to change the dimensions of your image so that the image file size is reduced so that the webpage loads faster (image quality is not noticably reduced). More importantly some images are required to be of certain dimensions for optimal display.

  • In my two websites, the FEATURED image, has to be 600 pixels wide to display properly. This is the image that is displayed with the blog excerpt on the blog home page where all the posts are listed.
  • Similarly many HEADER or banner Images have to be set dimensions to display correctly – the exact dimensions that apply will be provided in the instructions for the chosen Theme.

The inbuilt Image Editing functionality within WordPress can be used to edit an image after it has been uploaded. So an image can be cropped, scaled, rotated and/or flipped. This is useful as there is an option to make changes to all image sizes; just to the Thumbnail size; or to all sizes to exclude the Thumbnail. And I was reading last week that WordPress 3.9 is going to make working with and resizing images even easier (pull and drag).

But I still like to know how to edit an image before uploading to WordPress using stand-alone software applications. I use a small number of tools:

#.1 Morguefile Free Photos

Morguefile.com free stock photos

As the image above describes these are FREE photos. They are free to download and royalty free. At this point I must stress to first time web creators that images can not be taken from other sites and used freely. Premium (they charge) Photo and Graphic sites such as iStock and Getty have a higher quality and bigger range of photos and images but with some creativity you can work with an image to get your message across. Another site for free images is Wikimedia.org while this post lists 50 websites to find stock photos for your business and this one lists 53+ Image Sources for your Blog and Social Media.

 

#. 2 Take a ScreenGrab and copy into Paint

A screen grab (screen capture or screenshot) is a neat way to take an image of what is on your screen. In Windows 8, hold down the Windows Button at the same time as Insert (Prt Sc) or in Windows 7, it if Function (fn) and Insert (print screen). You might be working in Word or most likely PowerPoint and want to save what is on screen as an image. Open up Paint and paste in the Screenshot (Cltr + V) and then you can:

>> Save >> the image to a folder on your hard drive (as a JPEG).

>> Select >> the part of the image that you want and crop the image or delete part of the image

>> Rotate >> the image

>> Resize >> the image {remember resizing changes the pixels and in turn the filesize of the image)

As well as add text and shapes in terms of basic editing – but I prefer to do all this in Powerpoint before I take the screengrab as there is a greater range of fonts and text can be added with a background which is partly transparent as per the featured image for this post.

Picture paints a 1000 words

At the top of the post I mentioned that I was asked how to ‘save’ a brochure as an image. You can not really but what you can do is open the pdf and take a screengrab. The printer/ graphic designer would probably give you all original images as part of the project.

 

#.3 – Easy to use (learn) editing tool for resizing and adding fonts and Creating Logos

 

I was watching a Tyler Moore WordPress video on YouTube recently and he suggested two free online tools which are really good.

 

The first is PicMonkey which is great for adding text and resizing images and they have a collage creation feature also.

Picmonkey website

The second is Logomakr.com which facilitates the creation of logos by adding text to a large and very good  search databank of graphics. Interestingly it allows SVG graphics to be used (saves as Png). Other icons can also be used by dragging them in from your desktop – a good source of icons is from the noun project.

 

#.4 Advanced editing using Pixlr Editor

Open source (free and almost as good) alternatives to Photoshop include: GIMP; Paint.net (which can actually open and edit Photoshop files); and the one that I learned to use – Pixlr Editor. These offer much greater functionality to manipulate photos, specifically:

– To convert a JPEG with a background into a PNG without a background

– To add what are called layers so that images can be blended together nicely to create nice effects  (yes that is Santa coming out of the globe that is my logo and those are snowflakes)

Christmas 2013 Two

– Pixlr is a free online application that allows images to be cropped, scaled, resized, recoloured and multiple functions that I have not learned yet. It is not easy to learn how to use but if you are inclined and have time then I suggest watching some YouTube videos and working on a specific project so that you can learn the software. It really is rewarding. The one I watched is here…. after watching this you will appreciate the skill involved in graphic design.

BTW, Google Picasa is superb (free) Photo editing Software that I also use … very easy to use Red Eye reduction for instance. Overall, it is marketed as the easy way to file, store, share and edit your photos. As can be expected with Google it is being integrated with Google+.

Related:  How to use Picasa to create slideshows that can be displayed (embedded) on your website.

 

#.5 Optimise your images

As I mentioned earlier website performance benefits from correctly sized – and what is referred to as ‘Optimised’ images. I use a website called Image Optimizer.net to individually optimise my images (for free).

In conclusion

Working with images comes naturally to me now – after lots of practice. I think the visual appeal of your website is so important and it is worth spending time to add images to your pages and posts. I am particularly proud of my latest slideshare presentation which I think has a strong message and strong visual appeal.

 

As always I hope you found this blogpost of interest and value. Appreciate any comments … Part 2 of this post to follow soon will  cover Image based plugins, such as ones to make Gallery look good, and how to add a slider like this one

regards

donncha (@donnchadhh)

Donncha Hughes is a mentor, trainer and business advisor. I deliver group and one to one training on Wordpress. My background is assisting business with development of marketing, business plans, grant and finance applications. See www.startuphughes.com for more...

Posted in Blog Startup Web Training, Wordpress Tagged with: , , , , , , , ,