Introduction
Your website will feature images and since you'll be managing some of the images yourself, you'll need to know the best way to handle them. In this article, we explore the methods available for resizing images. You'll need about 30 minutes to read through and practice, so choose a time when you're not too busy!
If you are in need of stock images, you can these Royalty Free Image sites:
Quick Video Tutorial On How To Resize Images (for the web)
To watch a video on how to easily resize your images - click this link
Read on to get the full idea!
Contents
1 – Decide on your image
2 – Decide on the image size
3 – Crop it to size
3 – Upload the image to your article
1 – Decide on your image
Images are very important. You should add at least one image to each post article or page. Images entice your viewers into the article and obviously, images sell products and services! However, too small and it will look odd, too big and you’ll come unstuck (lots of big image files = lots of server space AND slow website loading time!).
You should also choose an image that will best represent the product / service as seen from the customer’s view point. What you think is a great image, might not be the most obvious image for the product – so think carefully before selecting which image to use. You'll need to compromise between size and quality so that the image loads fast.
"Web ready" images are images that have been cropped to the optimal size. The "optimal size" depends on how big you want the image to be on your article – but roughly should be kept to 200-300KB or less in file size. More explanation follows…
2 – What image size do I need?
About image sizes:
Image sizes can be a bit confusing as they are referred to in different ways, so let's just clear this up straight away!
You've probably heard of photos being 4 x 6 or 8 x 10 etc. That’s a measurement in inches and this terminology is used with regard to printing images. Likewise, some people refer to DPI or PPI (Dots Per Inch or Pixels Per Inch). Again, this is another term that applies to printed images. DPI / PPI settings are not used in web images. Images on the web, retina displays, on mobile or otherwise, are displayed by their pixel dimensions (width and height) not by PPI/DPI settings and not by inches 8 x 6 etc.
I repeat: Web images are measured in pixel dimensions – also referred to as PX – so 600px X 450px means 600 pixels wide by 450 pixels high (typically, width is quoted first).
Web images are also measured in file size (i.e. 200K or 2MB !). The reason for measuring in pixels and file size is simple: computer monitors and internet speeds! Think screen pixels = monitor size and file size = load time. So thumbnails are small images with a small file size and are therefore fast loading. Think speed is not an issue because everyone has broadband? Think again! Images need to be accessible and FAST, otherwise your visitor may not experience your site in the way you had hoped!!
So - what size do I need?
Exact sizes will vary from site to site, so do ask us if you need clarification. However, here is a brief overview.
If you want your viewer to be able to enlarge the image when they click on it, you should upload an image that has a big enough overall dimension: Let's choose an example of 1024px (w) x 768px (h). This is a good dimension size, because it is the typical width / height of screen monitors.
When you upload your 1024 x 768 image, an options screen will offer a range of display choices. The size selection option; e.g. Thumbnail, Medium or Full Size, along with alignment etc. - allows you to choose how you would like to display the image on the actual page or post. The physical space on the post (e.g. page width) is limited too, so that must also be considered.
Usually, you will want the image to fit nicely with the text on the page / post, so in this case, a thumbnail or medium size would be appropriate. Now, your page / post will display the image according to your selection, If you selected link to "media file" in the options screen when you uploaded it, the original size will display (in this example, 1024 x 768) when the visitor clicks on it.
If you don't want or need the image to enlarge when clicked on, or if it's a featured image, a category image or similar - you should simply choose an image size that's suitable for that job.
3 – Crop it to size
Images need to be "web ready" before they are uploaded. The maximum size that you can upload will depend on the settings for your individual site, but is generally around 2MB. However, you will quickly run into trouble (server space) if you always upload large file sized images.
Therefore, not only do we want to crop the image to the correct dimensions as discussed above, but we must also try to reduce the file size. An ideal file size is no more than around 200 – 400K.
Although WordPress does offer an image editing tool, which allows you to crop and resize the image once it has been uploaded, it is a little bit "fiddly" to use. For maximum control over images, I recommend that you resize and crop the image before uploading.
If you don’t have a lot of experience in cropping images, now’s your time to practice! It’s not that hard once you get the hang of it and in no time, you’ll be a whizz!
Tools of the trade
First off, you’ll need an image editing tool (software) on your computer. Photoshop is the image editing tool of choice for professionals, but it is not cheap to buy and some people find it takes a while to learn. However, it is worth mentioning because it's what I use and it is the best photo editing tool that money can buy. You may also be able to find free versions on the web.
A simple and free solution for the beginner is an online tool called Pixlr. It's a powerful image editing tool that works - although once again, you'll have to spend some time to learn the ropes. http://pixlr.com.
To watch a video on how to easily resize your images - click this link
Whichever software you use is up to you. Your first job will be to read the help pages so that you understand how to use it and how cropping and resizing works. You’ll need time to test out your skills! Of course, if it is all too much for you, simply get in touch with us and we will do it for you at standard rates.
How to actually crop an image is outside the scope of this article, but you should be able to find a tutorial or three on Google once you've decided what software to use.
Saving as an Optimised Image
Once you have cropped your image to the desired dimensions, you'll want to save it as a copy (e.g. don't overwrite the original that you might want to use later).
When you are saving the image, you should try to ensure it is OPTIMISED for web, by reducing the file size - ideally around 200 – 400 KB or less.
In Photoshop, there is a specific tool for this - it's called "Save For Web" which offers compression features to reduce the file size. In Pixlr, you are usually presented with compression settings on save.
You will need to play around with the compression settings to determine the best result - but you should know that it's always going to be a trade-off between quality vs file size. so you may want to try a few times before settling on the best version.
A NOTE about Featured Images
A Featured image is an image that you select independently of the actual image used on the page or post. Depending on your WordPress theme, it may display on your site as a preview image (possibly a thumbnail).
4 – upload the image to your article
Following is a basic guide. For the full information including helpful screen shots, please read adding images to WordPress.
1. Log in to your wordPress admin section
2. Select the post / page you wish to add the image to
3. In the body text, where you want the image to appear, click the cursor.
4. Then click on "Add Media" and select the image that you’ve re-sized on your local computer
5. Hit upload and then fill in the post upload options (TITLE & ALT are important as this is what search engines read, as well as alignment and rize selection as discussed above)
6. Click "Insert Into Post"
7. Save or Update your post and then check the front / article page to make sure it looks correct.
Once you’ve previewed your work on the live site, you can always go back and edit the image size in the article admin page – just click on the image you inserted, then the edit button - and now you can reduce the image dimensions further if required.
You can also click and drag the image around the article space to reposition it. Remember – if at first you don’t succeed..........
--