{"id":4728,"date":"2021-02-22T05:46:03","date_gmt":"2021-02-22T10:46:03","guid":{"rendered":"https:\/\/nexela.wpenginepowered.com\/?p=4728"},"modified":"2023-03-20T15:30:41","modified_gmt":"2023-03-20T19:30:41","slug":"how-to-work-with-web-based-images-part-1-file-types","status":"publish","type":"post","link":"https:\/\/nexela.com\/?p=4728","title":{"rendered":"How to Work with Web-Based Images, Part 1: File Types"},"content":{"rendered":"

If you operate online at all, being able to properly manage your pictures is extraordinarily useful. This week, we\u2019ve put together a guide that will hopefully give you the information to understand the basics about manipulating images for use online. <\/p>\n

<\/p>\n

Yes, Image Size Matters<\/h2>\n

Of course, there are many reasons that you may need to reduce the dimensions of an image. The obvious one is for storage. The larger an image is, the more disk size it will take up. Some platforms like social media and email won\u2019t accept images that are too large. In fact, most hosted email services limit any attachments to around 10 MB or .01 GB. Some of the better ones like Gmail or Outlook will extend those capabilities, but most won\u2019t go over 25 MB or .025 GB. That\u2019s not exactly a massive amount of data. <\/p>\n

When creating images for a website, images that are larger will take longer to view, and can often have consequences to the formatting or the speed of your entire website. Additionally, if your visitors have a capped data plan, you aren\u2019t doing them any favors with large image sizes. <\/p>\n

Be Sure to Keep Your Original!<\/h2>\n

So while we are about ready to talk about resizing your pictures to make them smaller, more manageable files, we would be remiss if we didn\u2019t remind you to always keep your original image. Not only is this often the version with the highest quality, once you scale down, it\u2019s extremely difficult to get that quality back. Here is a rhyme to help you remember:<\/p>\n

Once you make it small, there\u2019s no going back at all.<\/em><\/p>\n

This brings us to the next rule:<\/p>\n

You Can\u2019t Scale Up<\/h2>\n

This is extremely important to understand. If you have a large image and want to reduce its size, you won\u2019t have much problem doing so; but, if you have a small image and want to blow it up, you are in for a rude awakening. Any image you try to make larger will lose resolution as you blow it up. Let\u2019s take a look at an example. We start with a small image of a cafe:<\/p>\n

\"\"<\/p>\n

It\u2019s a good photo, but let\u2019s say for the sake of argument it\u2019s the only version we have and we want to blow it up to put it as our Facebook cover image or some other reason. The goal is to show people the menu and the text on the sign next to the cash register.<\/p>\n

When we increase the size of the image, blam, it\u2019s a nightmare. You can\u2019t see anything and it just looks unprofessional in every sense of the word. <\/p>\n

\"\"<\/p>\n

Our image looked good at the small size, but now it\u2019s a catastrophe. Sure, this was done for effect and most images won\u2019t get distorted this quickly, but rest assured, they will be distorted, and will look unprofessional. A graphic designer can probably do a lot with this to make it passable, but you are just an average business owner and don\u2019t need to incur huge design fees for a simple social media image or photo on your website.<\/p>\n

Digital imagery isn\u2019t like film. With film, the tiny negative on the film holds all of the details, and as long as you have the original film, you can blow the image up. It\u2019s pretty straightforward, but digital doesn\u2019t work that way. When you take a picture with a digital camera, whether it be on your phone or whatever, the image taken will be a large image with a solid resolution. <\/p>\n

It\u2019s best to try and hold on to the largest version of an image, since that\u2019s almost certainly going to have the most detail and give you the most flexibility. For some photographers, this would be called the RAW format\u2014a format that most high-end digital cameras use. RAW images are massive, and usually not used on the web or for sharing (for the reasons outlined earlier)\u2014you can sort of think of this format as the original film version of a photo.<\/p>\n

It\u2019s quite possible that unless you are the photographer, you won\u2019t encounter RAW files very often, but we figured we\u2019d mention it, nonetheless. <\/p>\n

\u201cWorking Image\u201d Formats<\/h2>\n

So keep your original file, and that doesn\u2019t always mean the original, original. Allow me to explain:<\/p>\n

When you take a picture, the file size will be huge, so to get it to be manageable you\u2019ll want to resize it (more on that later). When you first resize it to edit it in any fashion, that is called your \u201cworking image\u201d and you will want to also keep a copy of that on file. Why? You\u2019ll know when you mess up the alteration on the first image and then you have to go in and resize another copy to work on again. This process can get annoying, so keep your working image to keep from having to retrace your steps. Also, it allows you to add layers onto the file.<\/p>\n

JPEG and PNG files, which are typically used as the end result, don\u2019t allow you the ability to build layers. It effectively flattens the image. You won\u2019t notice any difference, but in Photoshop (or any imaging platform) you won\u2019t have the flexibility you will initially. <\/p>\n

Most graphic designers have this hammered into their heads pretty early on, but it\u2019s always worth mentioning. If you are working in Photoshop, save your work as a PSD<\/strong> before you worry about saving any other image format.<\/p>\n

So, What Image Format Should I Use?<\/h2>\n

Let\u2019s quickly go over the image file types you will likely encounter when altering images. <\/p>\n

    \n
  • JPEG<\/strong> – Also seen as .jpg, it is the most common type of image file. It\u2019s short for Joint Photographic Experts Group, and was developed to be a small, portable file size while still preserving overall image quality. A JPEG file can hold massively large images\u2014they max out at about 218 square inches at print resolutions. JPEG files tend to have a small file size compared to most other formats, and most image editing software gives you the ability to determine the tradeoff of image detail and quality over file size. More likely than not, you\u2019ll be working with JPEGs.<\/li>\n
  • PNG<\/strong> – This image format is often used for graphics and illustrations, as opposed to photographs. PNG stands for Portable Network Graphics. They can have a fairly conservative file size, but they don\u2019t lose much data or details when you save and compress them. This means their file size tends to be a little larger. One big advantage of a PNG is that it has the ability to have transparency. This is important for logos and other graphics that you might put over a background. PNGs are also really good for high-end illustration, if you are willing to sacrifice a smaller file size for quality and sharpness.<\/li>\n
  • GIF<\/strong> – You might pronounce it like the first three letters of the word \u201cgift,\u201d or like the popular peanut butter brand that choosy moms choose. Either way, the GIF format is designed to be one of the smallest file sizes, but it has some major limitations, and an infamous feature. GIFs are perfect for low-quality, small images. They base their file size on the number of colors in the image\u2014a simple illustration with only a small handful of colors is ideal. GIFs are most effective when you are working with small icons and illustrations, but they aren\u2019t efficient for photos. They support transparency, but not as well as PNG. GIFs really shine because they can be animated. They don\u2019t tend to look as good as an actual video file, and they can\u2019t provide audio, but this feature is pretty unique to the GIF. Unless you are sharing an animated GIF, however, you probably won\u2019t use this format very often.<\/li>\n<\/ul>\n

    Image Transparency<\/h3>\n

    So what does transparency mean when dealing with online images? Below we have a simple graphic. If we save it as a JPEG<\/strong> and put it over a tan background, it puts a white box around the image.<\/p>\n

    \"\"<\/p>\n

    If we save it as a PNG<\/strong>, that white box goes away and it lays the graphic over the background color. Typically you will want to have transparency to an image when you purchase it from a stock image repository, but all capable graphic designers can make an image transparent for you. Here\u2019s what our image looks like as a PNG:<\/p>\n

    \"\"<\/p>\n

    Of course this means we have to pay attention to the color and brightness of the background behind the image. For example if our graphic was light grey and we put it on a white background, this is the result:<\/p>\n

    \"\"<\/p>\n

    If we\u2019re putting the same light grey image over a high contrast background (for example, maybe the area on our website we want to place the graphic is dark green), it\u2019s going to look pretty good.<\/p>\n

    \"\"<\/p>\n

    The same sort of thing has to be considered if you are placing the graphic over top of another image\u2014will it be legible? In this case, you\u2019ll want to make sure your background isn\u2019t too busy.<\/p>\n

    \"\"<\/p>\n

    We\u2019ve given you a lot to digest, and it never hurts to get a professional in there to help you if you feel you need to. To summarize, most of the time you\u2019ll use a JPEG, which does NOT support transparency, but when you need a transparent image, you\u2019ll likely use a PNG.<\/p>\n

    Of course there are other formats out there. A WEBP image format has great potential, but as of now, it isn\u2019t currently supported by all web browsers. A new competitor to the PNG is the SVG, which is a scaling image for simple graphics and icons. It\u2019s possible that in a few years, we\u2019ll be seeing more use cases for these formats, but right now, your best bet for 99 percent of your image work will be JPEG, followed by PNG.<\/p>\n

    Check back for part two of our image editing series later on this week. <\/p>\n","protected":false},"excerpt":{"rendered":"

    If you operate online at all, being able to properly manage your pictures is extraordinarily useful. This week, we\u2019ve put together a guide that will hopefully give you the information to understand the basics about manipulating images for use online. <\/p>\n","protected":false},"author":4,"featured_media":4739,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[111,112,101,86],"class_list":["post-4728","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-free-resource","tag-images-101","tag-internet","tag-tip-of-the-week"],"yoast_head":"\nHow to Work with Web-Based Images, Part 1: File Types | Philadelphia, PA | Nexela<\/title>\n<meta name=\"description\" content=\"When working with photos and images, it\u2019s important to use the proper format and best practices before sharing them online.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nexela.com\/?p=4728\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Work with Web-Based Images, Part 1: File Types | Philadelphia, PA | Nexela\" \/>\n<meta property=\"og:description\" content=\"When working with photos and images, it\u2019s important to use the proper format and best practices before sharing them online.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nexela.com\/?p=4728\" \/>\n<meta property=\"og:site_name\" content=\"| Philadelphia, PA | Nexela\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PhiladelphiaITsupport\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-22T10:46:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-20T19:30:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/nexela.com\/wp-content\/uploads\/120870339_image_editing_400.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eric Disengof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@NexelaInc\" \/>\n<meta name=\"twitter:site\" content=\"@NexelaInc\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eric Disengof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/nexela.com\/?p=4728\",\"url\":\"https:\/\/nexela.com\/?p=4728\",\"name\":\"How to Work with Web-Based Images, Part 1: File Types | Philadelphia, PA | Nexela\",\"isPartOf\":{\"@id\":\"https:\/\/nexela.com\/#website\"},\"datePublished\":\"2021-02-22T10:46:03+00:00\",\"dateModified\":\"2023-03-20T19:30:41+00:00\",\"author\":{\"@id\":\"https:\/\/nexela.com\/#\/schema\/person\/5435031473121f8542dd2002ae241a9d\"},\"description\":\"When working with photos and images, it\u2019s important to use the proper format and best practices before sharing them online.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/nexela.com\/?p=4728\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/nexela.com\/#website\",\"url\":\"https:\/\/nexela.com\/\",\"name\":\"| Philadelphia, PA | Nexela\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/nexela.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/nexela.com\/#\/schema\/person\/5435031473121f8542dd2002ae241a9d\",\"name\":\"Eric Disengof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/nexela.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/85f06e5e0c52138765f1a62466ec5a0779caee9daf1f1a3e2eca775fef7006e2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/85f06e5e0c52138765f1a62466ec5a0779caee9daf1f1a3e2eca775fef7006e2?s=96&d=mm&r=g\",\"caption\":\"Eric Disengof\"},\"url\":\"https:\/\/nexela.com\/?author=4\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Work with Web-Based Images, Part 1: File Types | Philadelphia, PA | Nexela","description":"When working with photos and images, it\u2019s important to use the proper format and best practices before sharing them online.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nexela.com\/?p=4728","og_locale":"en_US","og_type":"article","og_title":"How to Work with Web-Based Images, Part 1: File Types | Philadelphia, PA | Nexela","og_description":"When working with photos and images, it\u2019s important to use the proper format and best practices before sharing them online.","og_url":"https:\/\/nexela.com\/?p=4728","og_site_name":"| Philadelphia, PA | Nexela","article_publisher":"https:\/\/www.facebook.com\/PhiladelphiaITsupport","article_published_time":"2021-02-22T10:46:03+00:00","article_modified_time":"2023-03-20T19:30:41+00:00","og_image":[{"width":400,"height":400,"url":"https:\/\/nexela.com\/wp-content\/uploads\/120870339_image_editing_400.jpeg","type":"image\/jpeg"}],"author":"Eric Disengof","twitter_card":"summary_large_image","twitter_creator":"@NexelaInc","twitter_site":"@NexelaInc","twitter_misc":{"Written by":"Eric Disengof","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/nexela.com\/?p=4728","url":"https:\/\/nexela.com\/?p=4728","name":"How to Work with Web-Based Images, Part 1: File Types | Philadelphia, PA | Nexela","isPartOf":{"@id":"https:\/\/nexela.com\/#website"},"datePublished":"2021-02-22T10:46:03+00:00","dateModified":"2023-03-20T19:30:41+00:00","author":{"@id":"https:\/\/nexela.com\/#\/schema\/person\/5435031473121f8542dd2002ae241a9d"},"description":"When working with photos and images, it\u2019s important to use the proper format and best practices before sharing them online.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nexela.com\/?p=4728"]}]},{"@type":"WebSite","@id":"https:\/\/nexela.com\/#website","url":"https:\/\/nexela.com\/","name":"| Philadelphia, PA | Nexela","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nexela.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/nexela.com\/#\/schema\/person\/5435031473121f8542dd2002ae241a9d","name":"Eric Disengof","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nexela.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/85f06e5e0c52138765f1a62466ec5a0779caee9daf1f1a3e2eca775fef7006e2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85f06e5e0c52138765f1a62466ec5a0779caee9daf1f1a3e2eca775fef7006e2?s=96&d=mm&r=g","caption":"Eric Disengof"},"url":"https:\/\/nexela.com\/?author=4"}]}},"_links":{"self":[{"href":"https:\/\/nexela.com\/index.php?rest_route=\/wp\/v2\/posts\/4728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nexela.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nexela.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nexela.com\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/nexela.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4728"}],"version-history":[{"count":0,"href":"https:\/\/nexela.com\/index.php?rest_route=\/wp\/v2\/posts\/4728\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nexela.com\/index.php?rest_route=\/wp\/v2\/media\/4739"}],"wp:attachment":[{"href":"https:\/\/nexela.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nexela.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nexela.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}