Smaller images load faster.
The best way to optimize images for your website is to use an image editing program like Photoshop or Gimp. Do a “save for web” to decrease the file size. You can also find free online utilities that do the same thing (see a list of free online optimizers).
Facebook automatically optimizes images. We posted a 410k image on Facebook and then we downloaded the image. The original was almost 10 times the size of the Facebook-optimized version with little loss of resolution when viewed at 100%. Images for websites should always be optimized so they’ll load faster, but not everyone owns image editing software like Photoshop.
How to optimize images for the web without Photoshop:
- First: Post the images to Facebook
- Second: Download the photos from your Facebook post to your computer
- Voilà—the images are now optimized for the web and can be uploaded to your website or blog.
Be sure to re-name the image file before you upload it to your site, because it will now have a Facebook designation, like “11890922_464771667027316_n.jpg.”
Search engines favor names that mean something, like “gardening-with-wheelbarrow.jpg”
Always add a few words to the “alt text” so that the visually impaired know what the photo represents (e.g., “woman in garden with wheelbarrow”).
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.
Images on your website should never go straight from your camera to your site.
Large image files take up space and bandwidth and also increase load time for users. Fast-loading websites require small image file sizes, and furthermore, speed is a search ranking factor.
A quick way to optimize/reduce image file sizes for your website:
Post the image (or batch of images) on Facebook and then go to the post and click on it in order to see the larger version. Right click on the image and copy it to your desktop. Delete the image/post after downloading the optimized images. Rename the FB image files something that makes sense (for example, “locally-grown-produce” instead of the random numbers that Facebook uses). Naming image files on your site meaningfully is important for search rankings.
There are lots of free image optimizers online. We were able to reduce the image above to about half (118k) 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.
Website image rules:
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 for speed
- Use jpgs for photos and pngs for flat (vector) images
- Image file names should describe image
When you share a link on your Facebook page you can choose the image. Here, we wanted to share a link to an article that mentions a restaurant we like, but the image that pops up automatically is for a different eatery. Follow the steps below to display the link image of your choice.
Shared link images are 484 x 252 pixels—a larger image upload recommended (e.g., 1200 x 627).
Tag business pages mentioned in your post as a courtesy.
A simple way to differentiate raster and vector images is to think of photos as raster images and type and logos as vectors.
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.
You should have your logo 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.
Yellow pages advertising is extremely expensive, especially considering its ever diminishing value due to decreased usage. And in most markets there are multiple books, each taking value from the others. Here on California’s rural north coast, The Black Book is probably the most used and the best buy—YP has no white pages, and the type is tiny, even though it’s a larger format, and the “Local Pages” is from Salt Lake City, and its listings are out of date.
Think about these problems before you enter into a contract for yellow pages advertising:
Expense: think of the online ad programs that your yellow pages ads would pay for.
Diminishing usage: every year, your potential customers are going to the web first.
Multiple books: most counties now have competing phone books—each with some of the market.
Lack of flexibility: contract is for an entire year, far in advance of publication.
The job of the ad sales reps is to get advertisers to spend the same or more money in next year’s book — this is reflected in a pricing structure that punishes clients for trying to decrease the size of their ads (what a way to thank your loyal clients). Ad reps also try to sell clients into every applicable category, but some categories are scarcely used. A category could sound reasonable, but rarely be referenced: Some yellow pages have a category for “internet—web design services,” but nobody looks for a web developer under “internet”— and how many business owners would even look for a web developer in the yellow pages? And some types of businesses don’t benefit from yellow pages advertising — for example: what benefit could a corner market get from the yellow pages?
Online advertising offers control and flexibility. With online advertising, the advertiser can change the message any time, and can control the reach of the ads. For example, one company we work with uses Google Adwords — they turn up the amount they pay per click when they are slow, and lower the amount they pay when they are busy.
There’s some value in yellow pages for some business categories, but if you are not a criminal attorney or an emergency plumber, the yellow pages is probably not a sound investment.
Profile images on Facebook are automatically cropped into a 160 pixel square and reduced to a 32 pixel thumbnail that shows up next to your comments. When you create your profile image, use a larger square. Facebook will automatically reduce it to 160 pixels. Leave a bit of a margin, since Facebook snips a few pixels off all the way around.
Most logos are not ideally presented in a square (and worse, a 32 pixel thumbnail) but there are workarounds. For many logos, simply using an initial(s) from the logo in the recognizable branded colors is an excellent alternative (remember, the name of your company is written in large letters on your Facebook page next to your profile picture, so your profile image does not have to be fully legible).
Here’s an example of a horizontal logo we want to set up a Facebook page for, so we’ll need to create a square profile image that looks good at thumbnail size.
The problem with a horizontal logo is that in order to make it fit in a square it has to be reduced. As a thumbnail (the smaller image to the right), it’s impossible to read and starts to lose the branding.
You need a profile image for most social media, and though this post is about Facebook specifically, the same concept applies elsewhere.
Favicons are the 16 pixel square images that precede the website title in browser window tabs. When it comes to branding thumbnail images (of which, favicons are the smallest), few logos can be represented in their entirety, so we recommend a piece of the logo, or simply, the branded color(s).
To make a favicon, create a simple square image that incorporates some aspect of the brand. Import the image into an online favicon generator. Choose the multiple sizes for the .ico, which includes 16, 32 and 48 pixel images which will be included in the file. It may take a few tries to get a look you like. Place the favicon.ico file in the top level (root directory) of your website, and you’re done.
Favicons are hilariously complicated, and new devices are beginning to demand a variety of icon sizes, but for now, this method works in most cases.
With the loss of so many letterpress job printing shops in the ’70s and the explosion of inexpensive four-color offset printing in the late ’90s, graphic designers have reacted by creating four-color jobs that mimic the appearance of two or three-color jobs. It’s considerably more expensive now to print two spot colors than to print in full color, because presses are now set up to run full-color (four-color or process color) with minimal press adjustments between jobs.
We came across this example of the phenomenon in a vector tutorial by Rype (Ryan Putnam) on his Vectips site. To complete the illusion, 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 presses and large sheet-fed printing 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?