Tag: Images

Did you know that using the wrong sized images can drastically affect the performance of your website? Or that most images are subject to copyright and you could be breaking the law by using them?

If you don’t know your kilobytes from your megabytes, your JPGs from your PNGs, or your pixels from your pandas, then fear not! We’re here to bring it all into focus for you.

(Read on to find out who the panda is and how he can help…)

So, what’s the problem?

Feeling congested…

Is your website not performing properly? Do the pages take a long time to load? Website performance is one of the many factors Google uses to rank a page. And many people don’t realise there could be a simple reason for this: the images.

Your internet connection is like a 2-way highway between the internet and your computer. And data is like traffic running in both directions. The more data there is, the slower the traffic gets.

When you visit a web page in your browser, every image has to be downloaded onto your computer. If there are 5 images on the page, with a file size of 100 kilobytes each, that’s 500 kilobytes, or half a megabyte – which basically equates to a lot of traffic on the highway.

Imagine your computer’s hard drive is like a multi-level car park with a certain capacity measured in kilobytes, megabytes and gigabytes. Every file added to your computer takes a parking space, until the car park is full. The size of the file is like the size of a vehicle: scooter, car, van, lorry, etc. Text files, like scooters, can be quite small. But video files are more like juggernauts. They can be huge because they contain a lot more information.

OK, so you get the idea. Image files can vary in size, just like vehicles. And the bigger they are, the more space they take up in the car park (i.e. your hard drive), and on the internet highway.

Looking a little squiffy…

Your images might not be displaying as they should. Perhaps they look stretched, grainy, ‘blocky’ or out of focus.

You might not think this is very important in the grand scheme of things, but let us assure you – details matter. Your website is your shop front. Whether you’re selling products or services, more often than not it’s your website that provides your potential customers with their first impression of your business.

If they’re presented with a substandard website, with spelling mistakes, poor quality images and pages that take too long to load, they’re probably not going to think much of your business. They may even get bored of waiting for a page to load and look elsewhere. We get very impatient when searching or browsing online. We want information instantly.

If a visitor to your website thinks you haven’t taken care with your brand, your words and your images, why would they think you’d take care of them as a customer?

How do I make it right?

Ok, so you get how important it is to have good quality, correctly sized images on your website. But how do you go about making that happen?

Let’s break it down into the 4 things you need to know about creating images online:

1. Where do I find images?
2. How big should my images be?
3. How can I reduce the file size?
4. What do I do with them now?

Where do I find images?

Here are our top tips for finding images online.

No stealing

Google is the most obvious place to search for images. You just type what you’re looking for into the search field, go to Images, and you’ll be presented with thousands upon thousands of images to choose from.

However, we have one very strong word of warning here: Don’t ignore copyright issues!

If you’re running a business online, you should never use free images you’ve found via search engines, unless they’re ‘Labelled for reuse’. Luckily, Google makes it easy to find these. Just select ‘Search tools’ from the menu bar in Google Images and you’ll see a dropdown menu for ‘Usage rights’, which can help you find free images without breaking any copyright laws.

Give credit

If you find the perfect image via a search engine but it’s not labelled for reuse, or you’re unsure if it’s protected by copyright, you may still be able to use it.

Most people will happily let you use their image as long as you credit them for it. You’ll need to find out who owns the image by visiting the website and contacting the individual or company through their email address or contact form. Send them a message asking if they’re willing to allow you to use the image. Make sure you’re specific about which image you want to use and how you want to use it. Give them the URL of your website and a brief outline of what you do.

If they give their permission, you can go ahead and use the image, but make sure you add a caption stating the source of the image, with a link to their site.

Free stuff

Although many online images are subject to copyright, there are some websites that do provide free, high resolution, stock photos. They may not have such an extensive collection as paid image libraries, but you might just find exactly what you’re looking for without putting your hand in your pocket.

Some examples are:

• MorgueFile
• FreeFoto  
• FreeDigitalPhotos
• Pixabay

Visit the library

If you’ve tried the free sources and still can’t find the perfect image, why not visit the library?

Online image libraries are a great way to source high quality, legitimate images. There are millions to choose from and you don’t need to worry about copyright issues or crediting anyone for your image: once you’ve bought it, it’s yours to do what you like with.

You usually pay for your images with credits, which you buy in bulk and then keep your account topped up as you use them.

Our favourite image libraries are:

• iStock
• Shutterstock

How big should my images be?

When it comes to image size there are 3 things to consider:

1. dimension: measured in pixels, e.g. 300 x 400px
2. resolution: the number of pixels packed into a set space like an inch
3. file size: measured in kilobytes (kb) and megabytes (mb)

The higher the resolution, the better the quality of an image because it has more information in each square. But more information means a bigger file. So, ideally we want a balance between image quality and file size.

If you upload an image into WordPress that’s very large, say 1920 x 1080px, it’s possible to resize it within WordPress, but the original file will still be sitting in your media library taking up valuable space. It’s far better to resize the image before uploading it in the first place.

Here’s how:

1. Download the image from your search engine or image library.
2. Use an image editing tool like Pixlr to re-size and/or crop your image.
3. Re-save the image at the correct size.
4. Upload to WordPress.

It’s worth noting, however, that you can’t simply import an image into Pixlr, type in the size you want to change it to and hit enter. I’m afraid, due to a little trickster known as ‘aspect ratio’, that simply won’t work. This is what causes your image to look stretched or distorted because you’re trying to resize it to dimensions it simply won’t fit.

There’s a little more involved in resizing images than first meets the eye, but once you get the hang of it, you’ll be creating perfect images in no time. For a free tutorial video on using Pixlr to re-size and crop your images, simply sign up to our blog at the bottom of this page.

The exact size requirements for your image will depend on the styling of your blog or website. But, as a general guide, an image spanning the width of the page will need to be approximately 700-800px wide.

If you have a blog landing page (like this one), you’ll need to insert a featured image into your blog post so that it appears as a thumbnail next to your excerpt.

If you share your blogs on Facebook and Twitter, you should also create correctly sized images for these social networks, which can be entered into the Yoast SEO plugin within your blog post.

Here’s a rough guide to approximate image sizes:

• Blog main image: 720 x 360px (depends on your styling)
• Blog thumbnail: min. 200 x 200px (depends on your styling)
• Facebook image: 1200 x 628px (recommended by WordPress)
• Twitter image: 1024 x 512px (recommended by WordPress)

How can I reduce the file size?

Ok, so you’ve found the image you want to use and edited it to the right size. But what if the file size is still too big? Well, that’s where the panda comes in.

Say hello to the panda at TinyPNG.

This is a free online tool that will neatly compress your image file without losing any quality. In other words, it optimises your image for using it online.

As an example, I uploaded an image that was 40.3kb and the panda reduced it to 36.4kb, saving me 10% of file space. And the larger the file, the bigger the saving. So, with a 3.6mb file, panda was able to reduce this down to only 307kb, saving me a massive 90% of file space. And here’s the proof that you can’t tell the difference:

The image at the top is the original 50kb file. The image at the bottom has been compressed down to 43kb using TinyPNG. The dimensions are the same but the file size is reduced by 15%. Can you tell the difference?

What do I do with them now?

Once you’ve found the images you want to use, resolved any copyright issues, re-sized them correctly for your different media, and optimised them for the web, what next?

If you’re using a WordPress blog you’ll need to import your images into your library. You can either import them first, by selecting Media and Add New:

Drag and drop the files in, or click Select Files to browse for them on your hard drive. You can then insert them into the required locations by selecting them from your library. Or, you can upload your images directly into the blog post:

Here’s how:

• Main image: using the standard visual editor, move your cursor to where you want the image to be placed within your text and select Add Media from the toolbar (see screengrab above). From here you can either upload a new file or select an existing one from the media library. Be sure to select Full Size from the Size menu so that the image is displayed exactly as you created it.
• Thumbnail image: in the right hand column you’ll see a text box called ‘Featured Image’. Click the “set featured image” link and add your image file in the same way as above.
• Facebook image: if you have the Yoast SEO plugin, scroll down to the Yoast box beneath the main body of your blog post and click the social icon on the left hand side. In the Facebook tab, click Upload Image next to the ‘Facebook Image’ field and add your correctly sized Facebook image (see screengrab below).
• Twitter image: do exactly the same as the Facebook image, but this time select the Twitter tab in the social section of the Yoast box.

You should preview your blog post to check the images are displaying correctly before publishing. Once published, you can check the thumbnail image on your blog landing page. You can then share your post across your social media networks and again, check the images are displaying correctly.

Good luck!

And don’t forget, you can get a free tutorial video showing you how to re-size and crop your images using Pixlr, simply by signing up to our blog below.