Menu

Joomla Blog

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

Picnik Replacement

{jwplayer}http://www.youtube.com/watch?v=1Gi6nXw1aHQ&width=560&height=315{/jwplayer}

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:
Joomla's greatest threat
Google Webmasters Warning

Related Posts

 

Comments 6

Ian Hayward on Thursday, 05 April 2012 02:05

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

0
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 on Thursday, 05 April 2012 09:54

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


John

0
Richard, Another tool is at http://www.imageoptimizer.net/Pages/Home.aspx John
Richard Pearce on Tuesday, 10 April 2012 20:34

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

0
This post was shared at LinkedIn and created a lively discussion. So for more thoughts, see http://lnkd.in/pa8cEx
Guest - beth on Thursday, 17 May 2012 06:39

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

0
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 on Thursday, 17 May 2012 14:50

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.

0
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 on Thursday, 16 May 2013 07:50

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.

0
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.

Free Joomla TutorialLearn Joomla for free with our 16 lesson, 2 hour course.

Get Started