An increasing number of clients that we work with are utilizing some sort of CMS (Content Management Systems) on their site. One issue plaguing many of them (and many non-clients as well) is that their images are just too large for their site. Either in dimension or in file size. For example, 3000 pixels wide by 4500 pixels tall but only displaying at say… 200px by 200px – all web designers have seen this at some point. That’s not really a web “best practice”. But don’t worry, you aren’t stuck in the Land of The Lost Large Images forever!
We try to give our CMS clients a quick intro to image ideals & optimization when we turn a CMS or even E-commerce site over to them, but it’s not always easy to pick up. So I’m going to give an explanation that you can look back at whenever you need to (and modify/expand on what some of you may have gotten in our documentation packet). And not only that, but show some FREE tools that you can use!
The Ideal Image
When it comes to images and the web, bigger is not better! Many people still remember the days of taking 5 minutes to load a web page via dialup – the text would come down about 20-30 seconds into it (14.4 modem, anyone?) and images would take a bit longer. And while many people have moved on to DSL, cable, or just using T1-T3 lines at their workplace, there is still a large group of folks on dialup. And even on DSL or Cable, you’ll frequently find sites that take FOREVVVEERRR to render. On many sites, this is due to excessive image size.
When it comes to the web, the standard for a long time has been 72dpi and under 50K if possible. What does this mean for you non-designers?
DPI is a measurement used in images regarding resolution. Due to the marketing of digital cameras over the past few years, people often use “resolution” and the size of the image in pixels interchangably. DPI in short stands for “Dots Per Inch”. If you have an image that is 72dpi and printed it onto paper at it’s normal image size, you will have 72 dots of ink per inch. This is a low resolution, but for years that is all that many computer screens could display. As technology has progressed, we have a multitude of 96dpi monitors floating around – I wouldn’t worry about it if you hear someone talking about it. We haven’t progressed far enough yet that your 72dpi image is automatically going to look bad on someone’s screen. Just keep another copy available at a much larger resolution (say 600dpi-1200dpi) for print purposes. Otherwise your logo (or what-have-you) will be pretty pixelated* when you try to print it.
For our theoretical image file, I said that we had a size of 50K. This means that the filesize takes up 50 kilobytes on your harddrive or server. Even today, most images on any given page need to be this size or preferably lower. The more images that you have on a page, the slower it will load, regardless of size, but if you can keep everything as close to this, you’ll be better off. For image galleries and whatnot, most of our clients have software that automatically makes the thumbnails that you see when browsing through quickly. But the larger images that you see when clicking on a thumbnail – typically these are meant to be seen at a large size and 50K isn’t a viable way to go (you want to stay smaller). Taking a photo from… for example Briar Rose Estate’s gallery section (one of which seen at right), those images are a bit over 50K, but pretty clear and decent enough size to be seen on a range of monitor sizes.
That’s just an example. Every site has their own requirements, their own sizes that work for them. Each site has it’s own demographics as well – some sites have 90% of their users accessing with Cable internet service and can afford to have HUGE images for backgrounds and in their galleries. But many others have a good mix of dialup, international, DSL, and Cable services and need to compress everything that they can.
The Apps
Smush.it Screen Shot
I have to say, I just found this the other day via Six Revisions, and I’m loving it (to steal a marketing phrase). With Smush, you can do really basic optimization to your images – but it’s easy. Really easy. It’s probably one of the easiest things to use on this list if for no other reason that you can install a Smush.it plugin for Firefox and optimize images like it was your (real) job. It may not be as rich in features as the other products on this list, but it’s one of the few that I can see myself actually using on a semi-regular basis as a designer. And that is coming from someone with all the newest, coolest, *ahem* most expensive image editing software available.
One of the features that I liked was showing a percentage of your file size savings. Be warned – this will only optimize your images for a smaller filesize, not reduce the image’s dimensions!
Aviary Phoenix
Phoenix is a bit more complicated than Smush, but you can do a whole lot more. Aviary, the makers of Phoenix, are attempting to bring an equivalent to the Adobe Creative Suite (what we use here at LwebG) to the masses online. There are a couple of other applications on the site as well – a vector editor and a painting program. Give them a shot! They are quite up to Photoshop or Illustrator, but considering the amount of $ that gets thrown into those, it can’t quite be expected – yet. As for Phoenix, you can add text (limited typography options for now due to font/web licensing restrictions), resize, apply filters, and many other options.
Picnik's Homepage
Picnik is more of a social app designed for integration with your Flickr, Picasa (which has an image editor), MySpace, Photobucket, etc. accounts. It’s probably an intermediary step between Smush and Phoenix. Besides basic image editing tools, you can use those other services to keep your images arranged in folders and organized. Some of the non-basic features that are pretty neat are Auto-Level correction (for images just a little bit too dark or too light), color filters and effects such as Black & White. You can also use pre-made graphic acoutrements to make some pretty nice collages with your images.
Picnik also has a premium package available for $25/year that includes some really nice features such as image Layers (for nice transition effects), advanced color tools, and an unlimited undo history! It also allows you access to FontShop’s impressive offering of typefaces for use on your images.
OLO from Dynamic Drive
Graciously provided by Dynamic Drive, this app is simple and straight to the point. One reason why I really like it over some others that I’ve listed here is that you can type/copy&paste in the URL of a file already on the web and download the optimized version. So if someone else at your business hasn’t read this article but already uploaded a HUGE image, you can step in behind them and fix their oversight. Once you choose your image and the output format, you will be presented with several versions in various states of compression/optimization. Find the one that suits you best, and right-click (or control-click for Mac) and save your chosen image.
Riot Screenshot
The big “selling” point with Riot is the ability to choose whether you want to use the web version or download an actual desktop application. Unfortunately, it is for Windows (XP & Vista) only right now. Sorry Linux and Mac people! Riot can/will take your images, allow you to save in several web-friendly formats, pan, zoom, flip, and give you a side-by-side or layover view of your original and compressed image.
Gimp Screenshot
Originally a Photoshop replacement for Linux and Unix systems, Gimp made the jump to Win/Mac a few years ago. As it is intended to be an open-source replacement for Photoshop, it’s pretty heavy in features – and heavy in learning curve. If you have a serious interest in learning about graphic work or are an aspiring photographer in need of something to really dig into your shots – I give it a large thumbs up. Otherwise, casual users should probably just remember the old sign in front of Kaelin’s on Newburg Road – “If you can’t stop, please wave”.
There are many more free web apps out there that can help with your workflow on your site. If there are any that you are a fan of, please, let us know! I’m sure that other clients would love to hear about them and give them a shot.
Tags: design, editing, education, free, graphics, help, image, open source, software, support
Phone: (502) 241-2642
