How To Edit Images On Joomla
I just wanted to make some notes about editing images for the web. A few users have had trouble with it. And I often take what I know for granted, because I deal with these things on a daily bases. So it may be basic for some of you, but hopefully someone finds it useful.
Joomla!’s media manager doesn’t do much in the way of image editing, none in fact. It’s not facebook. You’re expected to upload images at the correct width and height. And its up to you to control the file size of the image. Even if it did manipulate images for us, its still good to know a little about the different image types, especially if you’re maintaining a website.
A few of our users have been uploading 500Kb PNG images for articles. That’s about half a MB or the size of a small Youtube clip. Not ideal for an article. Years ago when internet speeds were slower, Gerben Hoekstra was recommending that file sizes shouldn’t exceed 25Kb http://www.weballey.net/html/plaatjes.html He has some practical advise for beginners and is responsible for getting me into HTML before XHTML came out. He also said you should only use JPG or GIF file types, because not all browsers supported PNG. This was because Microsoft’s Internet Explorer 6 (IE 6) couldn’t support the transparency of the PNG (when all other browsers could). PNG can actually be a great file type, when used for the right graphic. I might get into that in another article though. And at the time of Gerben writing that I think IE6 was at its peak usage. Thankfully things are changing, last month its use was down to 7% on the w3schools site http://www.w3schools.com/browsers/browsers_stats.asp (also a great learning place).
File Size
So Internet speeds have increased, but its important to remember not everyone is on a high speed connection. And in some countries (including NZ) some home users don’t understand the point for broadband. So we’re dealing with a range of internet speeds. And as I’m sure Gerben would agree, even on high speed connections, page load is still important. Not only is it the users page load we’re concerned about but also server strain. If your site suddenly gets a burst of traffic you don’t want the server to crash, and stop the free publicity you’re receiving. And with services like Facebook, Digg, Twitter, Stumbleupon, any site can potentially experience these peaks. So you want to be prepared.
You can check the size of a file on Windows, Ubuntu (I assume Mac as well) by right clicking on the file, and select the properties option at the very bottom. A pop up appears with seemingly useless info. There are three major uses I have for this.
- Is the Size value, indicating how much space the file/image takes up on the computer. And in the web world indicates how long its going to take to transfer from the server to the users browser.
- The Created value, lets you know when the file/image was made.
- And “Type of file” lets you know if the image is JPEG (the web short hands this to JPG), PNG or GIF.
You should also be able to right click on an image in your browser, and similar options should come up. This will differ depending on the browser you use.
Number Of Images On A Page
Yes the obvious one is the more images on one page, the more data there is to transfer, making the page load slower. But its not just the combined image file size we’re worried about. The amount of images does matter, because modern bowers limit themselves in the number of requests the can make to one server at one time. That might be a mouthful to take in, but think of it like you can only carry 10 bricks at one time, after you’ve dealt with those heavy bricks you can then start to think about the next 10. With 30 images on a page, the browser can only think about the first 10 before thinking about next 10. For a standard article, I’d try and keep image usage to around 5 (if I’m lucky to have 5 images on the topic). There are exceptions. Either the page is an image gallery of some kind, in which case the user should be aware they’re going to an image gallery, and hopfully prepared to wait. Or it’s a long instructional article where 30+ images are required to illustrate how to do something, again the user shouldn’t mind waiting for this.
There are advanced techniques for those of you who want it. Lazy loading images seems to be all the rage at the moment http://en.wikipedia.org/wiki/Lazy_loading If you Google Lazy Load you should find some Javascript libraries that do this for you. Lazy loading loads the images when the screen space of the image appears on the users screen. So the browser doesn’t have to worry about the images at the bottom of the page unless the user scrolls that far.
I think this article is getting too long to go into file types here. So I’ll wrap up. If you have the commercial software Photoshop, great. The short cut to export for web is Shift + Ctrl + Alt + S you’ll then be able to select your file type and see the file size before you save. If you don’t have Photoshop but want to get into making you page load more efficient, and become a better web publisher, then use Gimp! I found it a little harder to learn than Photoshop, but that may be because I’m used to using Photoshop. Its free open source like Joomla! compatible on most operating systems http://www.gimp.org/ There is enough documentation to publish a small book, and translated into many languages http://www.gimp.org/docs/ And these days it capabilities are phenomenal, it can do 90% of what Photoshop can do.
If you can learn to effectively save images you might help SEO your site as Google will be soon (if not all ready) be factoring the page load of a sites into the influencing factors.
I hope that was useful. There is quite a bit in the way of images. I might continue on in another post 
Bear Beer – Thanks Freakedout.de
I try to keep this blog on the topic of helpful Joomla tips but some good friends of ours over at freakedout.de just sent us a pic I thought just begged to be posted. Thanks Alexis. What tickled me even more is that they are apparently sending us a six-pack as well! All the way from Malta to New Zealand.
http://freakedout.de/ make some very cool Joomla extensions and you should check them out. A list of their extensions is also at http://club.freakedout.de/
JoomalBear Newsletter November 26th – Web Based Version
This newsletter in brief:
A FREE Christmas Joomla Template – Animated Falling Snow!
TransBear updated – New dropdown menu and transparency fix
Welcome to Little Bear who is doing an awesome job in the forums
Premium Member Badges
A new service we are offering – SlideshowPro+Director and Joomla Installation
——————————————————————————–
Free Christmas Joomla Template – Our Christmas gift to you.
We’re very proud of this little number – a lovely animated snow effect for your Christmas website promotions.
Check the demo: http://artificialchristmastrees.me/
Read about it on the blog: http://blog.joomlabear.com/free-joomla-christmas-template-falling-snow/
Enjoy!
——————————————————————————–
TransBear Updated
The template now features built in Son of SuckerFish dropdown menus, and we have integrated Drew McLellan’s Transparency Fix for IE6. Note you must add a module class suffix of _sf to the menu you publish in postion Top-Nav – this activates the CSS that drives the dropdown menus.
It’s a very good read that covers everything you need to know about making your own Joomla 1.5 Template from scratch, and should suit people of all skill levels.
Read about the updates here: http://blog.joomlabear.com/transparent-joomla-template-transbear-updated/
If you are a previous Premium Member of Joomlabear and wish to upgrade your TransBear just drop us an email and we’ll sort you out.
——————————————————————————–
Welcome Little Bear
Supporting people who use our templates is a big task – and it was getting too much for BigBear alone – BigBear also had the flu, and when natural disaster like this strikes it’s even harder to keep up. So we brought in an old friend to help out and she has been doing a fabulous job helping people out in the forums. Welcome Little Bear! If you have a burning question – or something that was missed while BigBear was sick then please post again.
——————————————————————————–
Premium Member Badges
We’ve made some changes and Premium Members now have a special badge that displays beside their profile – as seen here:
Forum administrators are also notified of Premimum Members posts immediately.
——————————————————————————–
A new service we are offering installing SlideshowPro and Director
We have built quite a few sites in recent months with Joomla and SlideShowPro/Director. The results have been really good and our clients have been exceedingly happy.
One example that showcases Video with SlideShowPro is http://mickcoote.com/clips.html
Another excellent example is http://filmscouts.co.nz – a site that recently received a raft of traffic from stumbleupon – over 35,000 visits last month. We like to think it had somethign to do with the JoomlaBear designed template and Slideshow installation.
We have also added a SlideShowPro installation to http://transbear.joomlabear.com as a demo.
Having the power of Joomla’s content management combined with SlideShowPro’s image gallery management provides a solution we think is hard to beat.
If you are needing a gallery/CMS solution for your next project we invite you to make use of a very limited offer we are trialing – We will setup your Joomla and SlideShowPro Director website for a one time fee of $347 – this does not include content – but includes the Joomla installation, essential extensions for SEO and advanced WYSIWYG editror, SlideshowPro and Director installed, Your logo/branding placed, A template from our collection and 6 months of downloads and forum support from JoomlaBear.
We are limiting this to 10 setups initially so if you think this is for your next site you need to get in quick!
http://joomlabear.com/Subscription/membership.html#ssp-install
——————————————————————————–
Lastly, If you’ve created a website you’re proud of with a JoomlaBear template then send us an email and let us know, we’ll get you up on the wall of fame! If you’ve emailed us before and we have not put you up yet then please send us a reminder! We currently receive over 100 emails per day on a variety of topics, and it’s tricky keeping track of them all sometimes…
Kind regards,
Big Bear
