Online Advertising & Marketing Proffesional blog

Minimum Kbs - Maximum quality!

• Fast method: optimization in flash
• Normal method: optimization in photoshop + import to flash

Fast vs Normal – You can try fast optimization before normal, sometimes quality result is the same. 

Fast optimization in flash

brutal force optimization – try first, then think :)

1. Go to library window (shortcut: CTRL+L)

2. Choose Bitmap object (JPG or PNG or GIF)

3. Double click on bitmap – Opens window with options

4. Switch to Custom and set quality rate (0-100). Try 30-50 first.

5. Test Bitmap Size and visual quality (press TEST button), check size, check visual quality

6. If quality is OK, try to reduce size again (type lower custom-quality)

7. If quality is OK press OK button, and try the same optimization steps to next bitmap

8. Re-export SWF and check new size.

9. If overall bitmap quality (during animation) is OK and new size is OK too – work finished. Else try Normal optimization in photoshop

Attention – Adobe Flash CS4 has OPTIMIZATION BUGS. >>>
After bitmap optimization try re-export SWF file and run it. If bitmaps became flickering/disappearing, you have to close FLA file then re-open it and export SWF again. >>>

Normal optimization in photoshop

Saving bitmap file : Adobe photoshop -> File -> Save for WEB (Alt+Shift+Ctrl+S)

1. Save for WEB window view

2. Try optimise

• JPEG (type)
• Quality (0-100) 
• Optimized
• You can try blur (higher blur = lower quality, lower size)
• Set metadata to None (no metadata = lower file size)

1. Goto Library (shortcut CTRL+L)
2. Sort Bitmaps
3. (Put all bitmaps to folder Bitmaps)
4. Optimize individualy

Individual optimization (JPG/PNG/GIF methods)

In Library - Press right mouse button on Bitmap. From contextual menu choose Properties

Choose JPG first (later check with GIF/PNG)

This option is default, but we must use Custom

1. Choose JPG compression 2. Press TEST button 3. Look at result. 4. Check size in kBs. USE DIFFERENT JPG QUALITY SETTINGS for best quality/size results

1. Press: CTRL+ENTER (Publish Preview)

2. If you see error/warning message like this:

You can press Enter Again.
This warning message show you that some objects (imported from Adobe iliustrator) aren’t supported in 7 swf version. Usualy there is no problem with swf version 8.

3. As result we can see flash preview:

4. Press CTRL+B (Bandwidth) – you can see swf information

5. The same result – View->Bandwidth Profiler

Always use “Compression movie” as default. It saves bandwidth and server space.

Sometimes (old Content Management Systems) don’t support compressed swf files. 

File->Publish Settings ->Flash -> Compress Movie

Situation: You have flash banner 728×90 Leaderboard current size=50kb, but size limit = 30kb. Usual problem ;)

Objective: minus 20kbs…  OK read bellow :)

How quickly check banner size

FAST-SIZE-OPTIMIZATION (save your time first):

>70% projects have the same problem – not optimized images (bitmaps).

1. Check “Compress movie” in publish settings (Basic step)
   1. To avoid this situation – use banner templates
      1. Banner template basics
      2. How to create own template
2. Pictures optimization (1-2-3-…)
   1. Arrange images in library
   2. Control compression level for each image separately (from library)
      1. JPG compression
      2. lossless (GIF/PNG) compression
   3. Try to find maximum quality and size compromise
   4. Reimport different bitmap format (JPG/PNG24/PNG8/GIF)
      1. Difference between these formats
      2. Photo for JPG
      3. “Flat colors” for GIF/PNG8
      4. Transparent photo for PNG24
      5. Transparent small photo/flat colors for GIF/PNG8
3. Check file size report (analyze)
   1. Always re-check size report
   2. Check duplicated images
   3. Check re-sized images

COMPLEX-SIZE-OPTIMIZATION:

1. Check “Compress movie” in publish settings (Basic step)
   1. To avoid this situation – use banner templates
2. Pictures optimization (fastest tactics)
   1. for JPG
   2. for PNG24
   3. for GIF
   4. use PNG8 vs GIF
3. Check file size report (analyze)
4. Check graphic symbols
5. Check complex animation
6. Check complex vector shapes
   1. Too many corners/curves
   2. Use Modify->Shape->Optimize
7. Check fonts
   1. Some fonts utilizes too much space
   2. Avoid complex fonts/artistic fonts
   3. Use bitmap or Braked to Vector fonts
   4. If it’s possible – use one type (not bold, italic,extra-bold)
8. Check embedded fonts
9. Check duplicated content (symbols, graphics, bitmaps,…)
10. Check metadata (do not include XMP metadata)
11. Check sounds compression
12. Check video compression
13. Use Vector vs Bitmap
14. Use Bitmap vs Vector
15. Use Vector + Bitmap smart tactics