{"id":488,"date":"2014-11-22T12:06:28","date_gmt":"2014-11-22T17:06:28","guid":{"rendered":"http:\/\/blog.index.pe\/?p=488"},"modified":"2015-02-04T12:30:49","modified_gmt":"2015-02-04T17:30:49","slug":"formatos-de-archivos-de-imagen-optimizados-para-la-web","status":"publish","type":"post","link":"https:\/\/blog.index.pe\/en\/formatos-de-archivos-de-imagen-optimizados-para-la-web\/","title":{"rendered":"Web-optimized image file formats"},"content":{"rendered":"
\n

To save images for your web page you can choose between four formats:<\/p>\n

1.JPEG: <\/strong>In most cases, it is the most appropriate format for saving photos.<\/p>\n

2.PNG-24: <\/strong>Like JPEG, it is a good format for photos. Choose PNG-24 instead of JPEG only when the image has transparency. (The JPEG format does not support transparency; you must fill with a matte color.) PNG-24 files are typically much larger than JPEG files of the same image.<\/p>\n

3.GIF: <\/strong>The GIF format is used for lines, illustrations with large areas of consistent color and sharp detail, and text. Also, if you want to export an animated image, you must use GIF.<\/p>\n

4.PNG-8: <\/strong>PNG-8 is a lesser-known alternative to GIF, so you can use it for the same purposes (except for animations).<\/p>\n

Images in the GIF and PNG-8 format, sometimes called indexed color images<\/i>, can be displayed with up to 256 colors. To convert an image to indexed color format, Photoshop Elements creates a lookup color table. If there is a color in the original image that does not appear in the lookup table, the application selects the closest match from the table or simulates it using a combination of available colors.<\/p>\n

JPEG and PNG-24 files support 24-bit color, so they can display up to 16 million colors. Depending on the format, you can specify image quality, transparency or background halos, color display, and the method the browser uses to display the image during download.<\/p>\n

How an image looks on the web also depends on the colors displayed by the platform, operating system, monitor, and browser. If you want, you can preview images in different browsers and platforms to see how they will appear on the web.<\/p>\n<\/div>\n

\n
\n

About the JPEG format<\/h3>\n
\n

The JPEG format supports 24-bit color, so it preserves the subtle variations in brightness and hue that photographs have. A Progressive JPEG file displays a low-resolution version of the image in the Web browser while the full image is downloaded.<\/p>\n

JPEG image compression is of lesser quality because it selectively discards image data. A higher quality setting discards less data, but the JPEG compression method can degrade the sharp details of an image, especially ones that contain text or vector images.<\/p>\n

Note:<\/span> <\/span>Every time you save an image in JPEG format, artifacts are created, such as wave patterns or blocky banded areas. Therefore, you should always save JPEG files from the original image, not from another previously saved JPEG file.<\/div>\n

The JPEG format does not support transparency. When you save an image as a JPEG file, the transparent pixels are filled with the matte color specified in the Save For Web dialog box. To render the effect of background transparency, you can match the matte color to the background color of the Web page. If the image contains transparency and you don't know the background color of the Web page, or if the background is a pattern, you should use a format that supports transparency (such as GIF, PNG-8, or PNG-24).<\/p><\/blockquote>\n<\/div>\n<\/div>\n

\n
\n

About the GIF format<\/h3>\n
\n

The GIF format uses 8-bit color and effectively compresses areas of solid color while maintaining sharp details, such as those in lines, logos, or text. The GIF format is also used to create an animated image while maintaining transparency. Most browsers support the GIF format.<\/p>\n

The GIF format uses LZW compression, which is a lossless compression method. However, because GIFs are limited to 256 colors, optimizing an original 24-bit image as an 8-bit GIF may strip the image of colors.<\/p>\n

You can choose the number of colors in a GIF image and control how they are dithered in a browser. The GIF format supports transparency or background halos, allowing the edges of the image to blend with the background color of a Web page.<\/p><\/blockquote>\n<\/div>\n<\/div>\n

\n
\n

About the PNG-8 format<\/h3>\n
\n

The PNG-8 format uses 8-bit color. Like the GIF format, the PNG-8 format efficiently compresses areas of solid color while maintaining sharp details, such as those in lines, logos, or text.<\/p>\n

Since the PNG-8 format is not supported by all browsers, it is best to avoid it if you are distributing the image to many users.<\/p>\n

This format uses more advanced compression schemes than GIF, so a PNG-8 file can be anywhere from 10 to 30% smaller than a GIF of the same image, depending on color reasons. Although PNG-8 has lossless compression, if an original 24-bit image is optimized as an 8-bit PNG file, color may be washed out of the image.<\/p>\n

Note: <\/span>With certain images, especially those with simple patterns and few colors, GIF compression can create a smaller file size than PNG-8 compression. View optimized images in GIF and PNG-8 formats and compare file sizes.<\/div>\n

As with the GIF format, you can choose the number of colors in an image and control how they are dithered in a browser. The PNG-8 format supports transparency and background halos, allowing the edges of an image to blend with the background color of a Web page.<\/p><\/blockquote>\n

\n
\n<\/div>\n

About the PNG-24 format<\/h3>\n
\n

The PNG-24 format supports 24-bit color. Like the JPEG format, PNG-24 preserves the subtle variations in brightness and hue that photographs have. Like the GIF and PNG-8 formats, the PNG-24 format preserves sharp details, such as those in lines, logos, or text.<\/p><\/blockquote>\n

\n

The PNG-24 format uses the same lossless compression method as the PNG-8 format. For this reason, PNG-24 files are often larger than JPEG files of the same image. It is preferable to avoid the PNG-24 format if the image is to be distributed to many users.<\/p>\n

In addition to supporting transparency and background halos, the PNG-24 format supports transparency at multiple levels. You can use up to 256 degrees of transparency, from opaque to fully transparent, to smoothly blend the edges of an image with any background color. However, not all browsers support multi-level transparency.<\/p><\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n

\u00a0About animated GIFs<\/h3>\n
\n

Animated GIFs create the illusion of movement by presenting a sequence of images or frames. Photoshop Elements provides an easy and efficient way to create animated GIFs from a multi-layered image.<\/p>\n

To create an animated GIF file, you'll work with layers. Each layer is converted to a frame when Photoshop Elements generates an optimized animation. Animated GIFs are compiled into an RGB color document.<\/p>\n

With the Open command, you can open an existing animated GIF file. For each frame in the file, Photoshop Elements creates a layer. To see a particular box in the document window, make that box's layer visible in the Layers panel and hide the other layers.<\/p><\/blockquote>\n<\/div>\n<\/div>\n

<\/div>\n

<\/g><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n
<\/div>","protected":false},"excerpt":{"rendered":"

To save images for your website you can choose between four formats: 1. JPEG: In most cases, this is the most appropriate format to save photographs. 2. PNG-24: Like JPEG, this is a good format for photographs. Choose PNG-24 instead of JPEG only when the image has transparency. (JPEG format does not support transparency; you must fill with a matte color.) PNG-24 files are typically much larger than JPEG files of the same image. 3. GIF: GIF format is used for line art, illustrations with large areas of uniform color<\/p>","protected":false},"author":1,"featured_media":489,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[8,68,9],"tags":[98,95,96,94,97],"class_list":["post-488","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-photoshop","category-web-design","tag-gif","tag-imagen","tag-jpg","tag-photoshop-2","tag-png"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/posts\/488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/comments?post=488"}],"version-history":[{"count":0,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/posts\/488\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/media\/489"}],"wp:attachment":[{"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/media?parent=488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/categories?post=488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/tags?post=488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}