How to Re-Size Your Photos on Google

Nov 182011
 

One of the many reasons that I switched from my hosting provider’s webmail to a gmail account is the sheer size of the images clients send via email. Which brings up a valid question for a lot of clients who want to add their own images to their WordPress site: How to resize the multi-megabyte images that even a basic cellphone camera will take so that the pictures do not interfere with a site’s layout and load time?

Since not everyone has Photoshop, is there a way for someone to re-size a large picture to be used on a website or to send via email without jamming the recipient’s inbox? Yes! With Google’s image tools, Picasa and Picnik, there’s an easy way to work with your images to resize them online and then use them however you need.

Step 1: If you don’t have one already, get yourself a Google account.

I love a lot of Google’s free services. There’s gmail of course, which enables me to receive emails on my phone with no hassle and gives me over 7,000 megabytes of storage. Then there’s Feedburner which allows me to offer subscriptions to a web site via RSS. Google Analytics is also another great tool to take advantage of. For this tutorial though, we’re going to look at two media tools; Picasa and Picnik. So go to google.com and sign up for account if you don’t have one already.

Step 2: Now that you have your Google username (email) and password, sign in and get started with Picasa.

Your Google account's top toolbar as seen from Gmail window

To find Picasa, sign in and then you will see more on the far right of the top toolbar.

 

Click that to open a menu where the last item is “even more”.

 

Click on Even More down at the bottom

 

 

Under the Media section, you will see Picasa on the left and Picnik on the right.

Google's Media Products

TIP: The direct url to your Picasa account is https://picasaweb.google.com/home
You should probably bookmark this page so that you don’t have to go through Google’s admittedly convoluted click-throughs every time.

Saving a bookmark in Firefox

Now you can get to Picasa without jumping through Google’s hoops!

Easy one-click access!

Step 3: Create your album and upload pictures.
If you decide to just start to upload photos that’s fine. Just understand that Google needs to sort them into albums so if you upload a batch of images today, Google will prompt you to create an album with today’s date (you can always give it a custom name).

Step 4: Once photos have been added to an album, select one to resize.

Link to your existing albums on Picasa's home page

Click on the album to open it

Click on a photo to open it

Click on the album that contains your images to open it. Then click on the image you need to resize. Once the image is in its own window, you will see a toolbar at the top with a little landscape icon at the top. Click on that to launch Picnik.

Click landscape icon to launch Picnik

You can also click on Actions and then select "Edit in Picnik"

TIP: If you want to bypass Picasa, you can just launch Picnik right away and upload photos directly from your harddrive. I just suggest uploading to Picasa if you are fairly mobile and you want to get the whole process done on the web as opposed to being chained to whatever computer has your images. Also, once the image is resized, you can always add it to your site via its URL on Picasa.

Step 5: Edit your image with Picnik.
Go to Re-Size on the leftside toolbar. Then simply enter in the dimensions that you would like the image to be to use on your site.

Editing toolbar in Picnik

Depending on the layout of your theme, maximum size can vary, but for the sake of example, I usually save my images at 450 pixels wide as the maximum width. Make sure you choose to retain the proportions as well.

 

Original photo's dimensions. Too big for a blog!

Enter in the new dimensions (width and height in pixels)

Step 6: Save your image and either download or get url.
Picnik will allow you to save your edits and then you can either download the image back to your computer or, on Picasa, you can get the url of the image.

Save to your Picasa album

Now you can download the re-sized image to a folder on your computer

Then, when you add an image into your WordPress post or page, it’s simply a matter of pasting that images url into the add-image pop up window. If you choose to download the re-sized image, then all you need to do is add your images the regular way and the smaller file size will take a load off your server!

Site Renovation: Beacon Insurance

Jan 192011
 

One of my first clients, Beacon Insurance, had a site that was a good candidate for a WordPress makeover. Even with using the Library feature in Dreamweaver, changes to the navigation and content were cumbersome, especially when they wanted to add a new newsletter page. After creating a sample site and letting them check out the dashboard end of things, they decided to give me the go-ahead. Continue reading »

Google Hack! Copying a webmail signature into a gmail message

Jan 262009
 

To be honest, there’s a real workaround out there that you can install with the Greasemonkey Firefox extension, but this is a quick trick if you are on the go, or don’t have the time to deal with the install just yet. I found this down and dirty method when I wanted to reply to a client’s email with some links to show them some examples of social networking in action.

Step 1: In your Webmail account, go to your Settings folder and select Compose. Then,create your webmail signature with interactive links in the compose window and save the changes.
My Doteasy webmail Settings>Compose window
Tip: Make those links as user-friendly as possible. Luckily my Doteasy webmail GUI lets me include tooltips in a link. That way people will have some idea of what they are going to see when they click the link.
Step 2: Go to your webmail mailbox and send a message to your Gmail account with that new signature.
Step 3: Go to your Gmail account and open up the message you just sent and give it a test drive.
Step 4: Now you can keep that message handy and copy and paste your signature from there when you want to include it in a Gmail message. When you want to include that signature, simply view that message with your signature, highlight the signature and then copy and paste it into the new message.
Please Note: This only works if you launch Gmail in its own window. (top left corner of inbox window;”Launch Full Gmail”)
Easy!
Signature from webmail email copied and pasted into new Gmail message.

Google’s mysteries revealed

Nov 052008
 

This is an article I found today on Lorelle’s amazing WordPress blog. It’s the perfect answer to that ever-popular question, “How do I get my site to rank high in Google?” I wish there was a “silver bullet answer” to this question too, but it’s a not so much a magic formula as it is a carefully planned campaign.
Lorelle does a great job of explaining the various factors, but in a nutshell, Google bases it’s page ranking system on a combination of the following factors:

Links: Quality over quantity. Don’t go for those “pay for us to link to you” services. Google prefers a few links to your site on well established web sites rather than a ton of links on spam sites.

Domain Age: Spam sites tend to be fly-by-night operations and the longer your site has been around, the better. However, just letting your site sit there on the server isn’t enough. Google also notices the freshness of your site’s content.

Click Through Rate: Google checks on how people find your site and how they get there, whether via a search engine or from a bookmarking site.

Trends, fads and seasons: Keywords have trends too. So you can probably stop typing in “Paris Hilton Video” into your meta-tags now. ;^}

Posting Frequency: Like Alex the Lion says in Madagascar “You know, keep it fresh!”. The more you reward your loyal visitors with useful new information, the more they will visit and recommend your site via incoming links.

Keywords: There are a few areas where it’s really important to place the words that you think people will use to search for your site. Titles, as in the title that shows up at the top of your browser when you view a page, links, headings and tags.

Traffic: How heavily your site is visited, which pages people go to and how long they spend clicking around.

Code: It’s important to keep your site’s code clean and easy to scan through. Hiding your text in a fancy animation or burying important info under tons of scripting makes the engine work harder. I tend to think of code as being like motor oil, the cleaner it is, the smoother your site runs.

Getting Photos into your Google Map

Feb 132008
 

Since I’m currently working on 3 different sites that require working with Google’s map feature, I’ve had a chance to find a few quirks in their map interface. Continue reading »