![\"\"](\"\/wp-content\/uploads\/image-9-cafe-photoshop-100.jpg\")
<\/p>\nIt wasn\u2019t long ago that we shared a post that described the most common formats used to share image media online or via your email. The idea is to make sure the images you generate are contained in the smallest amount of space possible (or a smaller file size) to make them quick and easy to share and download\u2014the trick is to do it without sacrificing any image quality.<\/p>\n
Let\u2019s go over how to do just this while using the most common image editing program out there: Adobe Photoshop (although the same process should work for just about any application you use).<\/p>\n
<\/p>\n
Let\u2019s assume that we want to feature an image of a coffee shop on your website. Loaded in Photoshop, that image would look like this:<\/p>\n
<\/p>\n
See the percentage<\/strong> displayed next to the file name? In our example, it says 16.7%<\/strong>. This means that the image we\u2019re looking at on screen is zoomed out to the point that 16.7 percent of its pixels are visible\u2014not that pixels are off-screen, but that the image is zoomed out to the point that not all the details are visible.<\/p>\n (By the way, there are a few different ways to zoom in and out while using Photoshop. The easiest? Holding down CTRL and Spacebar while left-clicking<\/strong> to Zoom In<\/strong>, and holding down CTRL, Alt, and Spacebar while left-clicking<\/strong> to Zoom Out<\/strong>.)<\/p>\n Let\u2019s take a look at the same image, viewed at 100% Zoom<\/strong>:<\/p>\n From here, it\u2019s clear that we\u2019re only looking at a small portion of the entire image when zoomed-in to 100 percent.<\/p>\n So, what does this tell us?<\/em><\/strong><\/p>\n In so many words: this is a big<\/strong> image.<\/p>\n Remember, zooming in and out doesn\u2019t change the size of the image\u2014all we did was change how much of the image is displayed on the screen. At this zoom, this image in particular scales beyond the space available on our hypothetical monitor.<\/p>\n This is actually a good sign, as it shows us the quality of our image is good, with a lot of potential if we were to print it. However, for use on a website, this massive image is just too big.<\/p>\n Most of the images you\u2019ll come across on stock websites or that have been taken with digital photography will be of simply massive design.<\/p>\n Another reason this is good? You should exclusively shrink images down to resize them. Assuming it\u2019s possible in the first place, blowing up a small image properly will require a graphic designer\u2019s touch to prevent too much loss in terms of image quality.<\/strong><\/p>\n Before anything else, you also want to make sure to save an untouched copy of the original image<\/strong>, like we said in part one.<\/p>\n This step can be tricky without some background in graphic design. For your website, exactly where the image is going will play some role. You may need to just eyeball it or go through some trial and error to figure out the right size.<\/p>\n However, there\u2019s also a pretty neat trick you can do with the Firefox browser, as long as you\u2019re replacing an image that\u2019s already there.<\/p>\n If you\u2019re eyeballing it, here\u2019s some comparisons:<\/p>\n If you\u2019re reading this blog on your desktop, here are the sizes that each dimension will appear as onscreen (unfortunately, these don\u2019t really apply to smartphone displays):<\/p>\n In the bottom left corner of Photoshop, below your image, you\u2019ll find the Zoom percentage. Click the percentage<\/strong> and make sure it is set to 100%<\/strong>. You can also change it by Zooming In<\/strong> by holding down CTRL and Spacebar while left-clicking the image<\/strong> and Zooming Out<\/strong> by holding down CTRL, ALT, and Spacebar while left-clicking the image<\/strong>. <\/p>\n This is a good way to get a good appreciation for how large or small the image will actually appear and make it easier to estimate its size accurately.<\/p>\n Clicking on the Image Menu<\/strong>, go to Image Size<\/strong>.<\/p>\n You should see a window like this:<\/p>\n As you\u2019re in the Image Size<\/strong> window:<\/p>\n Finally, the time has come to save the image. In the last blog, we discussed different image formats to consider using. As we\u2019re working with a photograph, JPEG is probably the best bet.<\/p>\n In Photoshop, go to File > Export > Export As<\/strong>. After clicking it, the Export As<\/strong> window should appear:<\/p>\n There, you\u2019ll see a preview of your image. Zoom your image to 100 percent<\/strong> using the + and –<\/strong> icons at the bottom center.<\/p>\n Under File Settings<\/strong>, make sure your Format<\/strong> is set to JPG<\/strong>.<\/p>\n Set the Quality<\/strong> by dragging the slider to the left while keeping an eye on the preview image. If you start to notice the image degrade in quality, stop, and nudge the slider to the right to correct it.<\/p>\n Each image will be a little different, but you should usually be able to set the quality<\/strong> somewhere between 40-and-70 percent without degrading how the image looks. This is more important than you\u2019d think, as the quality<\/strong> slider is what determines the file size of the image. Users will be able to download the image faster if the file size is kept as low as possible but going too low will cause the image to look over-compressed.<\/p>\n Look to where high-contrast colors meet in your image to check for degradation. Look for light and dark objects. With the quality too low, weird artifacting and shapes will start to appear around hard edges.<\/p>\n Once satisfied with your work, click Export<\/strong> and you\u2019ll be prompted to give your new image a file name. Remember to change it so you don\u2019t save over the original!<\/p>\n Hopefully, this guide has helped teach you a little something. To learn more handy tips and tricks, make sure to check back to our blog\u2014and for more practical assistance, give our IT experts a call at (215) 525-3223.<\/p>\n","protected":false},"excerpt":{"rendered":" It wasn\u2019t long ago that we shared a post that described the most common formats used to share image media online or via your email. The idea is to make sure the images you generate are contained in the smallest amount of space possible (or a smaller file size) to make them quick and easy to share and download\u2014the trick is to do it without sacrificing any image quality. Let\u2019s go over how to do just this while using the most common image editing program out there: Adobe Photoshop (although the same process should work for just about any application you use).<\/p>\n","protected":false},"author":4,"featured_media":4722,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[111,112,101,86],"class_list":["post-4719","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":"\n<\/p>\nStep 1 \u2013 Figuring Out the Size<\/h2>\n
\n
\n
![\"\"](\"\/wp-content\/uploads\/100px.jpg\")
<\/p>\n![\"\"](\"\/wp-content\/uploads\/200px.jpg\")
<\/p>\n![\"\"](\"\/wp-content\/uploads\/400px.jpg\")
<\/p>\n![\"\"](\"\/wp-content\/uploads\/600px.jpg\")
<\/p>\nStep 2 \u2013 Have Photoshop Zoomed to 100%<\/h2>\n
Step 3 – Resize Your Image Accordingly<\/h2>\n
![\"\"](\"\/wp-content\/uploads\/image-10-cafe-image-size.jpg\")
<\/p>\n\n
Step 4 – Save Your Newly Resized Image<\/h2>\n
![\"\"](\"\/wp-content\/uploads\/image-10-cafe-export.jpg\")
<\/p>\n