• Like
What you need to know about images in blogs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

What you need to know about images in blogs

  • 54 views
Published

Have you loaded a lovely image to your blog post and then wondered why that page takes ages to load when you view it in the browser? Have you re-sized an image by dragging on the little handles …

Have you loaded a lovely image to your blog post and then wondered why that page takes ages to load when you view it in the browser? Have you re-sized an image by dragging on the little handles around it only to see it appear in your blog just the size it was before? Have you had warnings from your website host that you are running out of space?! Then this week's slideshare is for you.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
54
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
2
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Image Sizing Getting images the right size for your blog and why it matters Arthur’s Guide to
  • 2. Too big? Typical of a dog to steal the show…
  • 3. Too small
  • 4. Or Just Right
  • 5. Size matters! Why? • It is important to get images the correct size on your website/blog. Why? – Over-large images will take an age to load – Slow loading-pages are a rapid turn-away for visitors and not appreciated by search engines either! – The ‘wrong’ image size can mess up galleries and sliders on your blog – They also block up your site hosting with unnecessary large files
  • 6. But I can drag my image smaller If you click on an image on your blog page or post you will often see a frame appear round the image. By dragging with the cursor on this frame you can make the image larger or smaller. Don’t. - It is not a sure-fire way of resizing the image - The large image will still need to load in the browser before it ‘resizes’ itself so you are still wasting loading time and server space!
  • 7. But WordPress offers size options? Yes, when you load your image in WordPress it will ask you want size you want to display the image on the page/post. That’s fine. The thing to remember is: Only make your images the maximum size you are likely to need them on the site (Hint: and that’s probably smaller than you think!)
  • 8. So how do I know what size? • If you use the Firefox browser there is an Add-on called Grab. – In Firefox go to Tools / Add-ons – Search for Grab – This is a screen capture tool but you can also use it to estimate the size your image needs to be. Grab Add-on shows you the size of the box you pull out with the mouse on screen.
  • 9. More sizing tools • If you are using the Chrome browser try the add-ons: ruul. Screen Ruler or Page Ruler • If you are using Internet Explorer search in help for a ruler – in certain versions of IE there is a ruler built in. • If none of these work, test an image or download one from your site that is the right size and then keep a note of the ideal size range for your site.
  • 10. Sample image sizes Here is a section from my website. The image on the left is 600 pixels wide by 370 pixels high. The cat picture on the right is 310 pixels wide by 200 pixels high. (See the original page here: http://rosemariegant.com/keep- your-clients-save-contact-forms/)
  • 11. Two types of size When we talk about the size of an image, there is the physical size of it (dimensions) and the file size. You need to think about both. 35kb / 4MB 345 pixels wide by 234 pixels high
  • 12. Small picture/big file size?? You may find that you make a picture quite small and yet the file size is still big. Why is this? It’s to do with DPI – dots per inch – an old fashioned term more associated with printing. But basically it is the resolution of an image.
  • 13. Resolution • You need good resolution for printing – say at least 250 dpi and probably 300 dpi minimum. • You need lower resolution if you are just viewing the image on screen, e.g. on a website, e.g. 72 dpi – 150 dpi.
  • 14. Where do I change this on my image? You might see resolution on your image editor or you might not. You certainly will in Photoshop for example. But you might just have “save for web” or you might be able to choose the quality for a jpg image. That is all to do with the resolution of the image.
  • 15. Some numbers Let’s look at one of the images from my website that we looked at earlier. Original image dimensions: 3264 x 1836 pixels Original image file size: 2.1MB Image dimensions on website: 310 x 200 pixels File size on website: 23kb So the original image is much bigger not only in dimensions but in file size, because it is a file that could be printed. So hopefully you can see from that how quickly you could s…l…o…w… down your website loading!
  • 16. To sum up • Check what size (dimensions) you need your image before your load it to your blog or website • Aim for a small file size with the best quality picture • If you are buying or downloading files from an online stock photo shop check the dpi – you will need 300 dpi if you want to print the image but only 72 dpi if it’s just going on the web • Don’t resize over-large images on your website – take them off and resize them in an image editor
  • 17. More content like this? Head over to http://www.rosemariegant.com For lots more tips and hints on Wordpress, email newsletters and social media.