{"id":152,"date":"2022-03-31T13:22:37","date_gmt":"2022-03-31T13:22:37","guid":{"rendered":"https:\/\/www.normanbalberan.com\/blog\/?p=152"},"modified":"2022-03-13T12:45:01","modified_gmt":"2022-03-13T12:45:01","slug":"file-formats-used-for-web-design","status":"publish","type":"post","link":"https:\/\/www.normanbalberan.com\/blog\/file-formats-used-for-web-design\/","title":{"rendered":"File Formats Used for Web Design"},"content":{"rendered":"<figure id=\"attachment_153\" aria-describedby=\"caption-attachment-153\" style=\"width: 890px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-153\" src=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/10\/image-file-formats.jpg\" alt=\"image file formats for web design\" width=\"900\" height=\"675\" srcset=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/10\/image-file-formats.jpg 1200w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/10\/image-file-formats-300x225.jpg 300w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/10\/image-file-formats-768x576.jpg 768w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/10\/image-file-formats-1024x768.jpg 1024w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><figcaption id=\"caption-attachment-153\" class=\"wp-caption-text\"><center><a href=\"http:\/\/123freevectors.deviantart.com\/art\/Vector-Multicolor-Rounded-Square-Shape-Background-609908081\" target=\"_blank\"><span style=\"font-size: small;\">123freevectors \/ DeviantArt<\/span><\/a> \/ <a href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/\" target=\"_blank\"><span style=\"font-size: small;\">CC BY-SA 3.0<\/span><\/a><\/center><\/figcaption><\/figure>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.normanbalberan.com\/blog\/file-formats-used-for-web-design\/#Most_Commonly_Used_File_Formats_for_Web_Design\" >Most Commonly Used File Formats for Web Design<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.normanbalberan.com\/blog\/file-formats-used-for-web-design\/#GIF_Graphics_Interchange_Format_and_JPEG_Joint_Photographic_Experts_Group\" >GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.normanbalberan.com\/blog\/file-formats-used-for-web-design\/#PNG_Portable_Network_Graphics\" >PNG (Portable Network Graphics)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.normanbalberan.com\/blog\/file-formats-used-for-web-design\/#SWF_Small_Web_Format_and_Shockwave_Flash\" >SWF (Small Web Format and Shockwave Flash)<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Most_Commonly_Used_File_Formats_for_Web_Design\"><\/span>Most Commonly Used File Formats for Web Design<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\">If you\u2019ve ever tried to save an image in <strong>Photoshop<\/strong> or another similar program, you must have noticed that you have an endless amount of picture file formats to choose from. But which image file formats do you use for web design? In this article, I will explain the correct types of file formats that you should use.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"GIF_Graphics_Interchange_Format_and_JPEG_Joint_Photographic_Experts_Group\"><\/span>GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group)<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Two different types of picture file formats are the most commonly used for web design. These would be <strong>GIFs (Graphics Interchange Format)<\/strong> and <strong>JPEGs (Joint Photographic Experts Group)<\/strong>. They are not the only picture file formats used for online projects, just the most popular. In the future, this may change. But not for several years, I suspect.<\/p>\n<p style=\"text-align: justify;\">Gif file formats are used for vector work. Vector work would be something like a logo or some text; vector work often deals with smaller file sizes. Thus, GIF images often have small file sizes. JPEGs are often used for raster graphics such as photos, illustrations;, etc. Note that JPEGs typically have larger file sizes than vector graphics.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"PNG_Portable_Network_Graphics\"><\/span>PNG (Portable Network Graphics)<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><strong>PNG (Portable Network Graphics)<\/strong> file formats are also possibilities for web design usage. However, they\u2019re rarely used. PNGs are not typically used because they often have larger file sizes than the JPEGs or GIFs.<\/p>\n<p style=\"text-align: justify;\">Of course, this doesn\u2019t matter as much anymore due to high-speed Internet connections. But JPEGs and GIFs are still the norms. In fact, I\u2019ve rarely used PNGs for any web design project that I\u2019ve worked on unless I need to. I have used them for CD or DVD projects but not for the internet. But you could still use them if you wanted to.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"SWF_Small_Web_Format_and_Shockwave_Flash\"><\/span>SWF (Small Web Format and Shockwave Flash)<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Another picture file format that is used in web design is called an <strong>SWF (Small Web Format and Shockwave Flash)<\/strong> file. The SWF file format is created from Adobe\u2019s Flash software. SWFs are often used for animation, video, games; etc. You can also build an entire website using just SWFs and HTML. The SWF file format can have a tiny file size if it is utilized correctly. In fact, the SWF may even rival the GIF in file size and quality if it is used for vector work.<\/p>\n<p style=\"text-align: justify;\"><strong>These four types of picture file formats are the ones usually utilized for online use. There are a few others, but these are probably the only ones you will ever hear about or use. At least, for the next couple of years.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most Commonly Used File Formats for Web Design If you\u2019ve ever tried to save an image in Photoshop or another similar program, you must have noticed that you have an endless amount of picture file formats to choose from. But which image file formats do you use for web design? In this article, I will &#8230; <a title=\"File Formats Used for Web Design\" class=\"read-more\" href=\"https:\/\/www.normanbalberan.com\/blog\/file-formats-used-for-web-design\/\" aria-label=\"Read more about File Formats Used for Web Design\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":153,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,1],"tags":[56,54,52,53,55],"class_list":["post-152","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tools","category-web-development","tag-file-format","tag-gif","tag-jpeg","tag-png","tag-swf"],"_links":{"self":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/comments?post=152"}],"version-history":[{"count":0,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/152\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media\/153"}],"wp:attachment":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media?parent=152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/categories?post=152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/tags?post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}