An extremely important part of having a professional looking web site is having images that look good, are the right size, and load quickly on the page. A lot of our clients don’t know how to make images the right size, or they use images that are way too large and make the website software do the work of resizing the images, causing distortion or causing the image to take way too long to appear on the page.
TWO KINDS OF SIZES:
There are two kinds of sizes involved in an image. The first is the image dimension – how wide and how tall is it? This is measured in pixels (px), the little dots on your computer screen that are used to create what you see. The second is the file size – how many bytes of information are used to create the picture? The two do not necessarily correlate. The trick is to have a good looking image of the correct dimension, using the fewest number of bytes so the image shows up quickly on the web page.
Here’s a quick and easy way to get your images sized properly at no cost.
PICMONKEY, FREE ONLINE IMAGE EDITING
Your web designer will have created great looking images on your site. Now it’s up to you to maintain that great look as you add or edit content on your site. Here’s how to do it:
1) Find out what the dimensions are for the images on your site. Your web designer can and should tell you this. For instance, as you add blog posts to your site, you want to keep them looking uniform. I like to make them square, but you can make them wide or tall if you like. The key is consistency. We’re going to use a square image with a dimension of 400px wide and 400px high as an example.
2) Find an image that is AT LEAST 400px wide AND tall. Do not resize images larger, they get blurry. Only resize them smaller. I’m going to use an image that is 1100px wide and 500px high.
3) Go to http://www.picmonkey.com/
4) Mouseover the Edit icon and choose an image to edit. I’m going to upload an image from my computer but you can also get images from your Facebook page, Drop Box, Flickr and OneDrive.
5) When your image is loaded into Picmonkey, choose the Resize option. In the box that has the smallest dimension, type in the smallest dimension you want to end up with. For our example, I’ll change 500 to 400. Make sure the “Keep proportions” box is checked. Click apply. I now have an image that is 880px wide and 400px tall.
6) Click the crop tool. This allows you to “crop” or cut out the part of the image you don’t need or want. You can resize the crop tool manually or type in the numbers. Now position the crop tool exactly where you want it and click apply. I just cut out part of the left and right sides and have an image that is 400px square.
5) Save the image to your computer by using the Save option at the top. On the left, name the image and choose the “Pierce” option (Great quality, good file size). This will give you the best looking image at the smallest file size. Then use the “Download it” button at the bottom left and save the image to your computer so you can upload it to your website.
“Voila!”
Need a beautifully designed, effective, professional site that gives you the credibilty you need on the web? That’s what we’re here for. Call us at 646-808-0249 or email me at hello@thirteen.com
