Image files should not go straight from camera to website
Large image files take up space and bandwidth and also increase load time for users. Fast-loading websites require small image file sizes.
One quick way to optimize images for your website:
Post the image (or batch of images) on Facebook. Go to the post and click on it in order to see the larger version of the image. Copy or download the image. Rename the file something that makes sense (for example, “locally-grown-produce.jpg” instead of the random numbers that Facebook uses to name files)—naming image files on your site meaningfully is important for search rankings. Delete the post after downloading the images.
A better option: free optimizers:
There are free image optimizers online. We were able to reduce the image (above) to about half the size of the Facebook-optimized image. Try a few of these online tools and bookmark an optimizer that you like. Your goal is sharp-looking images and a small file size.
Best way to optimize:
Use Photoshop to “save for web.” Also Gimp, Corel or any other image-editing program.
Website image best practices (it’s not all about size):
There are a few basic rules for website images that you should learn and try to follow, and file size is number one:
- Optimize images—small images load fast
- Use jpgs for photos and pngs for flat (vector) images
- Image file names should describe image
- Use “alt text” for ADA compliance and search rankings
A favicon (or “favorite icon”) is the 16 pixel square image that precedes the website title in browser window tabs (see illustration). Nowadays, favicons are used for tile and touch icons, iPhones and Android/Chrome apps, so they need to be larger (WordPress likes a 512 x 512 pixel image) so that they can be distributed correctly on different devices and apps. Thumbnail logo images, of which browser tab favicons are the smallest, are not legible, so we recommend a simplified logo, or an initial or monogram in the brand color(s). This applies to avatars and social media profile images as well.
You can see how spare our logo looks here at 75 pixels, but it looks appropriate in a browser tab or as an app image. Favicons have become hilariously complicated over the years, but the WordPress soultion has at made favicons easy to implement for millions of website admins.
Old fashioned two and three color printing often overprinted spot colors (colors generated by a single press run) to create a third color. Both of these Hungarian matchbooks are two-color press runs of the same red and turquoise green. The print on the left makes use of a third, “black” color by running the red on top of the green (overprinting).
Four color process printing practically makes two or three color printing obsolete, and we know the reasons for this, but there’s a charm to two and three color printing. Skill and imagination were required to make use of overprints that created new colors without additional press runs.
Raster (or bitmap) images are fixed-resolution images, made of a grid of pixels. If enlarged they will be blurry and pixelated, with a “stair-stepped” edge.
Common raster file formats are jpg, gif, tiff, bmp and png.
Vector images can be enlarged to any size with no loss of resolution.
Vector images are created by a series of points that are joined using a mathematical formula that determines the vector between points.
A purely vector file format would be svg (scalable vector graphic). Adobe Illustrator files are typically vector, but Illustrator supports placed raster images, just as Adobe Photoshop files now support vector layers. Pdf and eps files also support both vector and raster images, so asking for an Illustrator, pdf or eps file does not guarantee that you’ll end up with vectors. If you need vectors, ask for a vector file. It may be delivered as an eps, pdf, svg or ai file.
Your logo should be in a vector format so that it can be reproduced at any size. Ask your designer for a vector pdf with type converted to paths to guarantee excellent reproduction at any size.
If you’re still spending money in the various yellow pages publications in your region, consider this:
- Expense: How much could you do online with what you spend on yellow pages?
- Diminishing usage: Every year, a yet larger percentage of your potential customers find phone numbers online.
- Multiple phone books: Competing books each offer only their fraction of the diminishing market.
- Lack of flexibility: Yellow pages contracts are signed for an entire year, far in advance of publication.
Online advertising offers control and flexibility. With search engine advertising, you control the message and the reach. One company we work with loves Google Adwords—they turn up the amount they pay per click when they are slow, and lower it when they are busy. Bing is used for about a third of searches, so Bing Ads is also an economical way to advertise online.
How do we turn this complex logo into a social media avatar?
Profile images on Facebook are automatically cropped to 160 pixels square for the profile page and reduced to a 32 pixel thumbnail in comments. Most logos are not ideal in a square (and worse, a tiny thumbnail) but there are workarounds. For many logos, an initial from the logo, or a visual detail in the branded colors will work— remember, the name of your company is written in large letters on your Facebook/LinkedIn/Twitter page next to your profile picture, so your profile image does not have to be legible.
Here we use the monogram detail from the logo, which retains legibility even in the 32 pixel thumbnail.
Here is another example, using a letter in the branded typeface and colors—simple and legible.
The same principles apply to formatting a branded favicon (a yet smaller representation of your brand).
In any case, look sharp—even when you are tiny.
With the loss of so many letterpress job printing shops in the 1970s and the explosion of inexpensive four-color offset printing in the late ’90s—presses are now set up to run full-color (four-color or process color) on all jobs. It’s considerably more expensive now to print two spot colors than to print in full color.
Some designers have reacted by creating four-color designs that mimic the appearance of two or three-color jobs. We came across an example in a vector tutorial by Rype (Ryan Putnam) on his Vectips site. He has given the piece an off-register look, as if the colors had not been perfectly aligned by the pressman. Color registration was a common problem in the past with web and large sheet-fed presses in which several jobs were run simultaneously (newspapers, the yellow pages, matchbooks, etc). Who could have imagined that someday we’d be nostalgic for low-quality printing—but it was appealing in many ways.
Guidelines for email signatures:
- Text only is dependably consistent
- Avoid attached images (logos, social media links, photographs, etc)
- Avoid HTML formatting—some recipients will see text-only
- Wise sayings and witty aphorisms may not be appreciated
The illustration shows how confusing images (logos, social media links, etc) can be. The sender believes that the message has no attachments, but the receiver sees five attachments. If there were a file attached, how would the recipient know which of the (now six) attachments is it? In addition, attachments in emails may be viewed with suspicion by spam filters and security software.
One thing that this sender did correctly was to make the contact portions of the signature live text—it can be copied and pasted. He also used a web-safe typeface (Georgia). There is simply no guarantee that the recipient will see your message in the typeface you specified, but the chances are increased with web-safe fonts.
- Don’t hire a third party to post for you.
Nobody knows your business like you do.
- Vary your posts.
Combine a mix of content about your business (product info, trade shows, behind-the-scenes images, sales events) with other content, such as links and shares of third-party posts.
- What seems dull to you may be of interest to followers.
A vineyard owner may see after-harvest pruning as a mundane chore, but for others it may be interesting.
- Create regular features.
A “sale item of the week,” or a regular event (product demonstrations, or “meet the maker” mixers) will keep it fresh.
- Make it pithy.
Keep it brief.
- Encourage comments.
Treat your followers like friends — respond to comments.
- Follow other business pages.
Follow pages and share posts associated with your trade and with local businesses.
- Tag other businesses.
To tag other pages in your posts, type “@” and follow with the name of the page you wish to tag. The autofill will add the name and create a link.
We design custom holiday cards, so why send expensive but mass-produced, boilerplate greeting cards to your clients? We’ll create a unique holiday greeting, branded for your business. Now’s the time!