We always design our websites with your future success in mind, carefully planning and optimizing all content to ensure maximum visibility and long-term profitability

Dreamweaver Tutorial – Change Picture Resolution across Web

The Dreamweaver tutorial helps in customizing image properties. This aids in image alignment, adding margins and borders, managing alternate text and adjusting the image size with the Property Inspection tool.

Several graphic formats are available but only a few are supported and accessible on the web. These 3 file formats are Graphic Interchange Format (GIF), Joint Photographic Expert Groups (JPEG) and Portable Network Group (PNG). Uploading these image formats is easy and can be edited through the Dreamweaver tutorial. You should change the resolution of the picture so that it will not appear pixilated.

The screen size is determined by the Height and Width properties of the image. These properties can be customized using the Dreamweaver tutorial Property Inspector. This helps in smoothly loading the web browser. If the image attributes are unspecified, the browser won’t determine the space size needed by the graphics.

Feel free to check out comparisons of products if you want to convert swf to HTML5.

Changing the Image Size

A specified image Width and Height helps in loading the webpage faster and smoother. Dreamweaver calculates the size attributes of an image once inserted in the page. The calculated Width and Height values are entered in the Property Inspector’s field.

  • Upload the image from the Document Window of your computer.
  • Once uploaded, drag the handles on the bottom, side and lower corner of the image to re-size the image.
  • You can also customize the image size in the Width and Height fields. The W and H settings are measured in pixels. But these do not help in a fast download of the image on the web. A larger value of Height and Weight will make the image pixilated and distorted. It is advisable to use photo editing applications like Photoshop or Fireworks to produce a better image.
dreamweaver tutorial

Image credit: creativebloq.com

Adjusting the Image Size

Aside from the above mentioned steps, you can manually edit and adjust the image size by grabbing the image handles. These handles appear once you selected the image.

  • Adjust the image width by dragging the right edge handle from left to right.
  • To change the height, drag the handle that appears in the bottom of the image.
  • And to adjust both dimensions, drag the handle that appeared I the lower right corner of the image.

While adjusting the image size, keep the proportions steady and unchanged. This is done through holding the SHIFT key while grabbing the lower right corner handle of the image. The image dimension was changed while maintaining the image’s original proportion. You have just done customizing the image size that will fit your website. The image will appear strong and clear once loaded from your page. Moreover, the image is loading fast and efficient. Also you can install other Adobe tools or use another functions of this one.

Aside from adjusting and changing the image size, you can also play on other functions of the Property Inspection tool. With continued practice and experimentation, you can work flawlessly using the Dreamweaver Tutorial. As a novice, you can now insert an attractive and high quality image to your website. If you are using other’s image, remember to ask permission before posting.

Use this Dreamweaver tutorial and feel free to use help of professionals!

Comments are closed.