This topic is one that I must say is a bit close to home. Maybe its a bit of therapy to say some things out loud, and maybe its a cry for help. Either way, it’s something I felt I should bring up to get you (our readers) to comment on. When I got into the web design or design industry, I had taken no prior classes, courses, lessons, drawing, nada. My background was in IT. Break just about any device and I could fix it. Now when I decided to walk into the design field, I jumped all in. Pestered my friends to let me use their computers to try out Photoshop. Bought really old versions of Macromedia desktop publishing software. I tried to get my hands on all the tools I would need to be a success.
After attaining all the things I needed, I really got involved in learning. However the more I learned the more I learned I had a lot to learn. So then I started to learn less new things, and develop skills in the things I knew or wanted to be better at. And that’s when the problems started. I became pretty good in creating wireframes and websites, basic business logos, flash animations, and more. However when opportunities came to me for more complex jobs, I shied away from them. Sure I would take some but most I wouldn’t because I knew I’d be getting in over my head. What I should have done was take all that as a sign to become a master at one thing at a time.
When you’re a solo-preneur in this industry, you almost don’t have a choice but to try to learn and do everything yourself. My advice is to learn a trade at a time. Get to be great at design, then move to web. When you’ve conquered those then move to mobile. But being “ok” in all of those and more will end up hindering you on seeing big picture and acquiring bigger clients. I mean that’s the goal isn’t it? To get bigger contracts that allow you to continue to do what you love. Now if you don’t have time to learn more, hire someone who already does know more than you. In fact surround yourself with people who know a heck of a lot more than you. It helps you stay humble, but also makes you aspire to be a greater designer.
Have you ever been to a website that loaded very slowly? Did that website have some images that loaded abnormally slow, even though they weren’t that large in size? The reason for that may be that the images were re-sized improperly, most likely with a WYSIWYG (What You See Is What You Get) webpage editor such as Adobe Dreamweaver. This problem could have been avoided if the images were optimized.
Adobe Dreamweaver is a very powerful webpage editor that can be used to customize just about everything on your website, including specifying or adjusting the resolution of your images. When you click on an image you have inserted into Dreamweaver, you get the properties window, which allows you to specify the size of the image (resolution) and a host of other options.
Notice in the the above example the image file size is 4162K. That means it’s about 4162 kilobytes (or about 4 MB) which is very large. Also notice that the W and H (width and height) values are both in bold. That means that the current size of the image (266 x 140) is not the actual size of it (4096 x 2160). If you click on the refresh button next to the image size Dreamweaver will resize the image to the proper size (4096 x 2160).
If you change the size of an image using Dreamweaver’s image properties tab, you will just be changing the image’s resolution and not the actual file size. Using this method to downsize large images will make the images load very slowly.
This is NOT a good method for re-sizing an image for a webpage!
Dreamweaver wasn’t designed to be used for editing images. The purpose of the width and height boxes in the properties tab is to specify a resolution (size) for the image or object you have selected if there are no dimensions specified. A much better way of optimizing images is with Adobe Photoshop.
Using Photoshop to Optimize Images
If you have Adobe Photoshop, then you have the perfect tool for optimizing your images to display on your website. Here are some quick and easy steps to optimize your image in Photoshop:
1. Open the image (File > Open)
2. Re-size the image with the image properties window (Image > Image Size)
Notice at the top of the window where it says “Pixel Dimensions:” that the file size of the downsized image is now 109.3K which is a whole heck of a lot smaller than the original image file size of 25.3 MB.
3. Instead of “Save” or “Save As” use the “Save for Web & Devices” option (File > Save for Web & Devices).
If you look at the top right corner of the Save for Web & Devices window you will see these options:
Most of the time, I alternate between the 70 and 60 quality setting depending on the size of the image. I have set this image to the JPEG High preset, which gives the image 60 quality by default. If you are re-sizing an image for a thumbnail (320 x 240 or below) 60 is a great setting because you won’t see any degradation in quality from the original. I use the 60 quality setting most of the time, unless the image is very large (1024 x 768 or larger).
Original quality vs 60 quality
The original on the left is full quality (no compression) and the optimized on the right is 60 quality. At this smaller size, it’s hard to see any degradation in image quality at the 60 setting. As you can see, the optimized image on the right has an estimated load time of 3 seconds for a 56k dial-up connection. Of course, most users today have cable and other much faster connections, but it’s nice to know that even on the slowest connection, the image still won’t take too long to load.
4. Upload the new and improved image to your website!
Now you’re ready to load the optimized image(s) into Dreamweaver or whichever editor you use for your website.
Video of Image re-sized using Dreamweaver vs. Photoshop Method
As you can see in this video, the image that was optimized using my Photoshop method (on the left) loads a lot faster than the image that was re-sized using only Dreamweaver (on the right). The optimized image loads almost instantaneously!
Assuming you’ve already signed and contracted your client, the stages of actually building their website can be crucial. As a fellow web designer I can tell you some of the tricks I’ve learned over the years that I now have down to a process.
1) Domain name. These days domain names are being bought up by the hour, and even the unique ones aren’t safe. A trend of using country extensions is starting to catch on. Using .us, .es, or .de to finish out a brand name actually works well when you can’t secure the actual business name.
2) Get the client show you other websites they’ve seen and liked. Why? Because they will secretly compare your work to that of which they already like from either their competitors or what they’ve found through searching online. With that, you’ll also find some inspiration for your own design too.
3) Paper and a pencil. Yes you heard right. Before you launch Dreamweaver, or Photoshop, get out your trusty sketchpad and draw out the framework for the site. Start with the home page. Add your banner, your columns, navigation pane, footer, logo and key image locations. Then draw up the next few pages the same way. This will save you so much time and offer you ways to visualize before you even start coding or working up the site structure on your computer. If possible, also play with some color paletting ideas too.
4) Start bringing the site to life. With having your layout or wireframing done, this next step should be a breeze to put everything together. If you happen to need content from the client, this is the time to secure that. If they’re not ready to provide it (which is also common), Google for for Lorem Ipsum filler. It may throw your client for a loop when they see it, but it will also stress how much content you actually need to fill the page to suit.
5) Get another opinion on your work. If you’re just starting out, its a good idea to build a network of other more knowledged designers to learn from and also to have them critique your work. They’ll give you sound and sometimes crucial advice that you may not have noticed yourself. This may also save you from your client bringing up costly concerns while adding new requirements that were never in the original scope of work. Remember you want to work smart not hard and you never want to have to redo something completely over.
This topic is one that I must say is a bit close to home. Maybe its a bit of therapy to say some things out loud, and maybe its a cry for help. Either way, it’s something I felt I should bring up to get you (our readers) to comment on. When I got into the web design or design industry, I had taken no prior classes, courses, lessons, drawing, nada. My background was in IT. Break just about any device and I could fix it. Now when I decided to walk into the design field, I jumped all in. Pestered my friends to let me use their computers to try out Photoshop. Bought really old versions of Macromedia desktop publishing software. I tried to get my hands on all the tools I would need to be a success.
This is NOT a good method for re-sizing an image for a webpage! 
