画像書き出し設定のススメ

HTML書き出し機能の実用度とDreamweaver

　実は、PhotoshopやFireworksなどのツールには「HTML」自身を作成する機能が備わっています。保存時のダイアログボックスで、「フォーマット」に「HTMLと画像」という設定項目がありました。これを選んで保存すると、画像パーツと共にHTMLが自動生成されて、そのままWebブラウザで表示させることができるようになります。

　画像のalt属性やリンクの設定なども、それぞれプロパティパネルなどで行うことができ、Webページとして機能するようなHTMLを生成することも可能です。

　ただ、残念ながら少なくともCS3の段階では、まだまだ生成されるHTMLの精度は低く、Web標準準拠、HTML＋CSSコーディングとは言えないものになってしまいます。非常にレイアウトが簡単なページなどを、いったんこの機能で作り出しておいて、細かな部分をエディタ等で調整して使うといったことであればできるかも知れませんが、きちんとしたWebページを作る時には、やはり初めから手作業でHTMLを制作するのが良いでしょう。

　そんな時に、最もよく使われるツールと言えば、Adobe Dreamweaver（以下、Dreamweaver）です。実は、Dreamweaverには画像形式に関する便利な機能がいくつかあります。

Dreamweaver＋Photoshop／Fireworks

　例えば、PhotoshopやFireworks上で画像を作成している時、ある一部分を選択してメニューの「編集 → コピー」、または、Photoshopでレイヤーが入り組んでいる場合は「編集 → 結合部分をコピー」を選びます。この状態で、Dreamweaverのデザインビューで、メニューの「編集 → 貼り付け」を選択してみましょう。

　すると「イメージプレビュー」という画面が表示され、ここで画像形式などを設定することができます。実は、Dreamweaverは貼り付けられる要素が、PhotoshopやFireworksの画像形式だった場合は、自動的に変換ツールを起動して、JPEGやGIFに変換してくれるのです。

　そのまま保存をすれば、画像を保存してDreamweaverに貼り付きます。ちょっとした画像パーツを生成したい時などに、スライスを作ったりするのに比べて非常に素早く作業することができます。

　また、Webページでレイアウトの変更などに伴って画像の大きさを少し小さくしたり、大きくしたりしたいことがよくあります。ここで、HTMLのwidth属性（幅）やheight属性（高さ）で調整することもできますが、HTMLの大きさの指定はあくまでも「見た目」の変更だけで、画像自体の大きさは変わっていません。

　そのため、Webブラウザの性能によっては画質が著しく落ちてしまったり、無駄なデータの送受信が発生してしまいます。やはり、画像ツールであらためてサイズを変更して表示したいところです。

　こんな時もDreamweaverを利用していると非常に便利に作業することができます。まず、デザインビューを使って画像の大きさを変更します。この状態では、先の通り属性を使って大きさを変えているに過ぎません。ここで、プロパティパネルの「リサンプリング」ボタンをクリックしましょう。すると、画像の質がグッと上がることが分かります。

　そのほか、切り抜きや明るさの調整などの簡単な編集も行うことができます。もう少し細かい調整が必要な場合は、「編集」ボタンをクリックするとFireworksが起動して編集することもできます。このように、画像ツールと連携して編集することができます。

　なかなか面倒な画像形式の変換作業ですが、ツールをうまく活用して手間をかけずにより質の高い画像を作れるようにしましょう。

　次回は、今注目を集めるPNG形式について紹介します。