Joomla Blog

Tutorials, reviews, case studies and other tips to help website owners and website developers master the Joomla content management system.

Picnik Replacement

Posted by on in Tutorial
  • Font size: Larger Smaller
  • Hits: 5098
  • 6 Comments
  • Subscribe to this entry
  • Print

You must have the Adobe Flash Player installed to view this player.

In lesson 10 of our free Joomla tutorial course for beginners called The Basics, I point out that the greatest mistake beginners make is not resizing images before inserting them into articles. This produces two problems; first the physical size of the image might be too large and not display on the page as you would like. This is easily overcome though by dragging the image in the editor to your desired size. However this creates problem number two. Although doing this may make the image look okay, it does not reduce the file size of the image. So the physical size has been reduced, but the file size remains the same. Modern cameras capture a lot of detail and each photo can be several megabytes in size. Inserting one of these images into a web page means the page will take a long time to load. And if you have several photos on a page, it could take a couple of minutes to load, which is unacceptable.

So it is vital to resize your images before uploading them to a web page. In The Basics, I introduce an online tool called Picnik. However this application has been devoured by Google and it looks like it is set to become part of their overall set of tools. This won't suit everyone, so let's take a look at a alternative called PicMonkey. This is ridiculously easy to use and a lot of fun. Click the first box and choose the image from your local computer that you wish to edit. Click resize, enter the width you want to use and click Apply. Then click save at the bottom of the left column, give it a name and save it back to your local computer. Note that you could also have simply resized it from the save dialog.

Now getting the right size will vary from one template to another and therefore it might take a bit of trial and error at first. A lot of the sites I work with will accommodate around 500 to 600 pixels in width. So perhaps start with this and note that PicMonkey will adjust the height automatically. There are a heap of other options such as cropping, colours, exposure and effects.

PicMonkey is a great online tool to help you resize images quickly for your Joomla site or any other purpose. At the time of recording, this is very new and some of the advanced features are likely to come at a cost in the future. But for simple resizing, this is the perfect solution.

Rate this blog entry:

Comments

  • Ian Hayward
    Ian Hayward Thursday, 5 April 2012

    Hi Richard

    I stumbled across a free utility that I have found invaluable. It's called Fast Stone Photo Resizer - http://www.faststone.org/FSResizerDetail.htm

    If you are setting up a slideshow or a picture gallery, sizing pictures one by one is a real pain. This will batch resize an entire folder of photos in one go. Saves hours.

    Ian

  • John Miley
    John Miley Thursday, 5 April 2012

    Richard,
    Another tool is at http://www.imageoptimizer.net/Pages/Home.aspx


    John

  • Richard Pearce
    Richard Pearce Tuesday, 10 April 2012

    This post was shared at LinkedIn and created a lively discussion. So for more thoughts, see http://lnkd.in/pa8cEx

  • Guest
    beth Thursday, 17 May 2012

    I'm having difficulty wrapping bulleted text effectively around a photo. Even when I assign alignment to "right", the bulleted text looks broken.

  • Richard Pearce
    Richard Pearce Thursday, 17 May 2012

    Yeah that's not so easy. You need to know how to control this via the CSS file which is somewhat beyond the scope of a comment here. You might like to jump into the forum and ask there.

  • Blake Burroughs
    Blake Burroughs Thursday, 16 May 2013

    Richard-- I am devouring your tutorials today and have learned so much. I currently use Photoshop's "save to web & devices" option; I will try using these tools and compare the results.

Leave your comment

Guest Saturday, 18 May 2013