fbpx

Save Your Photos for the Internets

So you have some lovely photos for your website but don’t know the optimal way to save them? This simple guide will take you through step by step and shortly you will be the master of your own web destiny!

WhyOptimize_v1

Why Optimize?

• People are Impatient. Because who really wants to wait for a photo to load? A Microsoft Bing report showed that a less than 2-second increase of delays in page responsiveness reduced user satisfaction by -3.8%, lost revenue per user of -4.3% and a reduced clicks by -4.3%, among other findings. (http://en.oreilly.com/velocity2009/public/schedule/detail/8523)

• Robots care too. Your Google rank is affected by your page speed. The more optimized your site, the higher it climbs in Google’s eyes.

• People love pictures! Dr. Nielsen’s analysis on reading behaviors shows that people only read 28% of the text on a web page and decreased the more text there is on the page. (http://www.nngroup.com/articles/how-little-do-users-read/)

Tools-of-the-trade_v1

Tools of the Trade (i.e. Programs!)

We’ll be showing you how to save your photos with Adobe Photoshop for this tutorial but if you don’t have the program and aren’t inclined to spring for it, you can use Sumo Paint (http://www.sumopaint.com/app/); a free browser app that has the same basic photo editing tools. Let’s boogie!

Word-of-warning_v1

Word of Warning

Don’t save over your original high res file! Make a new folder labelled Saved for Web (I like to include the specific dimensions like 800 x 600 in the folder name so I know what’s what at a glance).

picking-the-right-file-format_v1

Picking the right file format

Select a file format that’s appropriate for your image.
For flat illustrations or artwork, use the 8-bit PNG or GIF formats and reduce the number of colors used in the palette to greatly reduce your file size. The smaller the palette, the smaller the file, the faster the load!

For more detailed artwork and photos, use JPG or 24-bit PNG (which both have larger color palettes). A PNG is definitely has better image quality but with that quality comes file size. When possible, use a JPG and compress the image quality as much as you feel looks good.

Long-road-short-road_v1

Long Road

Step 1: Open your image file in your program of choice.

Step 2: Go to Image > Image Size

Photoshop

Step 3: Make sure Constrain Proportions and Resample Image are checked.

Step 4: Set resolution to 72 pixels/inch

Step 5: Uncheck Resample Image.

Step 6: Type your desired image size under Pixel Dimensions. 800px for the largest dimension usually works best.

Step 7a (JPG): Save As > Format: JPEG, click Save. On the next window that pops up, reduce your image Quality to 8 (High) and click OK.

Step 7b (PNG): Save As > Format: PNG, click Save. On the next window that pops up, reduce your image Quality to 8 (High) and hit OK. Another window (PNG Options) will pop up; select None. Click OK.

Step 7c (GIF): Save As > Format: CompuServe GIF. On the next window that pops up, reduce your color palette  (64 colors usually works well) and uncheck Transparency unless you absolutely need it. Then select Normal for Row Order. Click OK.

Sumopaint

Step 3: Make sure Constrain Proportions is checked. Type in your desired dimensions. Click OK.

Step 4: Go to File > Save to My Computer…Select PNG or JPG.

Step 5: Select where you want to save your file. Click OK.

Short Road> Photoshop only!

Step 1: Open your image file in your program of choice.

Step 2: Go to File > Save for Web & Devices. A warning may pop up (This image exceeds the size Save for Web was designed for) if you’re working with a large file, but it’s ok! The program will run slowly but you can still click yes and move forward.

Step 3a (JPG): Select Preset JPEG High. This will adjust the file format to JPEG and the image quality to 60. Under image size, type in your desired pixel dimensions and click Save.

Step 3b (PNG): Select Preset PNG-24. Depending on the flatness of your artwork, you can drop to PNG-8. Uncheck transparency unless you absolutely need it. Under image size, type in your desired pixel dimensions and click Save.

Step 3c (GIF): Select Preset GIF 128 Dithered, uncheck Transparency and adjust Colors as long as you can while still keeping the image looking good. Under image size, type in your desired pixel dimensions and click Save.

 

Comment

This post doesn't have any comment. Be the first one!

hide comments
Follow Tw .Fb .Ig .Drb .Yt .
...
Back

Your cart

0

No products in the cart.

Total
$0.00
Checkout
Empty

This is a unique website which will require a more modern browser to work!

Please upgrade today!

Do NOT follow this link or you will be banned from the site!