Creating web graphics with Adobe Photoshop

Header_MoreImageSpacePhotoshop_7

The huge growth of the internet and web services increased exponentially since its inception; as the need for information grew, media appeared to complement a multimedia website. Because people want to present images, videos, music in different places, it is common to find problems with the size and weight of the files since access to them depends on the internet speed you have. The delay in downloading or accessing a web page may result in loss of potential customers and users. Thus, this article will explain how to optimize images must be uploaded to a website and how to creative effective web graphics with Adobe Photoshop.

Optimizing is the process of selecting format, resolution, and quality settings to make an image efficient, visually appealing, and useful for web browser pages. Simply put, it’s balancing file size against good looks. No single collection of settings can maximize the efficiency of every kind of image file; optimizing requires human judgment and a good eye.

When you put images on the Internet, file size becomes important; you want to achieve a file size that is small enough to allow a reasonable download time, but large enough to preserve colors and details to your satisfaction. There are three major graphic file formats that are used on the web: GIF, JPEG, and PNG.

When you put images on the web, you need to think about file size. The goal is a file size that is small enough to allow reasonable download times but that preserves colors and details to your satisfaction.

Thus, the size refers to the dimensions of the image: 13 x 18 cm, 1024 x 768 pixels; and the space occupied by the image in a storage device, disk, memory: 3 Mbytes or 149 Kbytes, is defined as weight.

One can say that a picture is:

  • Great when having a size equal to or greater than 1024×768 pixels
  • Medium size when going from 320×240 to 1024×768 pixels
  • Small when the size is less than 320×240 pixels
  • Very small when it is less than 100×100 pixels

By weight, are taken:

  • Heavy if you have 1 MB or more
  • Medium weight if you are 300KB to 1MB
  • Lightweight if your weight is less than 300KB
  • Very light if the weight is less than 100KB

Three major graphic file formats are used on the web: GIF, JPEG, and PNG. You can optimize images in these formats using one of the following methods:

  • To precisely optimize an image for use in web authoring applications, such as Adobe® Dreamweaver®, you can use the Save For Web command. The Save For Web dialog box lets you preview your image in different file formats and with different optimization settings. You can also set transparency and animation settings.

01ImageWeb

  • For basic optimization, you can use the Save As command. Depending on the file format, you can specify image quality, background transparency or matting, color display, and downloading method.

09ImageWeb

JPEG optimization options

JPEG is the standard format for compressing continuous-tone images such as photographs. Optimizing an image as a JPEG format relies on lossy compression, which selectively discards data.

02ImageWeb

  • Quality Determines the level of compression. The higher the Quality setting, the more detail the compression algorithm preserves. However, using a high Quality setting results in a larger file size than using a low Quality setting. View the optimized image at several quality settings to determine the best balance of quality and file size.
  • Optimized Creates an enhanced JPEG with a slightly smaller file size. The Optimized JPEG format is recommended for maximum file compression; however, some older browsers do not support this feature.
  • Progressive Displays the image progressively in a web browser. The image appears as a series of overlays, enabling viewers to see a lowresolution version of the image before it downloads completely. The Progressive option requires use of the Optimized JPEG format.
  • Blur Specifies the amount of blur to apply to the image. This option applies an effect identical to that of the Gaussian Blurfilter and allows the file to be compressed more, resulting in a smaller file size. A setting of 0.1 to 0.5 is recommended.
  • Embed Color Profile (Photoshop) or ICC Profile (Illustrator) Preserves color profiles in the optimized file. Some browsers use color profiles for color correction.
  • Matte Specifies a fill color for pixels that were transparent in the original image. Click the Matte color swatch to select a color in the color picker, or select an option from the Matte menu: Eyedropper Color (to use the color in the eyedropper sample box), Foreground Color, Background Color, White, Black, or Other (to use the color picker).

For example, it is required to obtain an image in JPG large (greater than or equal to 1024×768 pixels) and light weight (less than 300KB).

04ImageWeb

The preview in a Web browser, can be seen as follows:

05ImageWeb

Tab 4-Up can be obtained variants of the original image with different optimization settings

06ImageWeb

Also, consider that setting minimum internet speed is provided for the image.

08ImageWeb

Similarly you can try optimizing web images for GIF and PNG formats.

COMPRESS A WEB GRAPHIC TO A SPECIFIC FILE SIZE

To compress an image to a specific size, follow these steps:

  1. Choose File > Save For Web & Devices.
  2. Click a tab at the top of the Save For Web & Devices dialog box to select a display option: Optimized, 2-Up, or 4-Up. If you select 4-Up, select the preview you want to optimize.
  3. (Optional) Select the slices you want to optimize and the file format you want to use.
  4. Select Optimize To File Size from the Optimize menu (to the right of the Preset menu).

11ImageWeb

  1. Enter the desired file size.

10ImageWeb

  1. Select a Start With option:

Current SettingsUses the current file format. Auto Select GIF/JPEGAutomatically selects the optimal format depending on image content.

12ImageWeb

ADVICES TO FOLLOW WHEN CREATING WEB GRAPHICS

It is important to know the size of the area where an image is placed on a web page, and know if the web application will be accessed from smarthphones, tablets and / or desktops, since in some cases it is convenient to work with the image in different size and weight.

Moreover, it is important to check you usability and accessibility criteria in a website to know the rules you must follow an image in each of these cases.

REFERENCES

  1. ADOBE (2013), ADOBE PHOTOSHOP Help and tutorials, link [https://helpx.adobe.com/pdf/photoshop-elements_reference.pdf] visited as of 2015-06-12.
  2. ADOBE (2014), Adobe® Photoshop® CC Help, link [https://helpx.adobe.com/pdf/photoshop_reference.pdf] visited as of 2015-06-12.

Add a Comment

Your email address will not be published. Required fields are marked *