{"id":828,"date":"2019-08-14T15:00:35","date_gmt":"2019-08-14T13:00:35","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=828"},"modified":"2021-05-27T10:58:14","modified_gmt":"2021-05-27T08:58:14","slug":"resize-image-in-photoshop","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/resize-image-in-photoshop\/","title":{"rendered":"How to Resize Images in Photoshop"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Resizing an image, any type of image, is an essential skill that is useful to just about everyone, in particular to all website owners and admins. As an administrator, you need to make sure everything\u2019s up to date and that it runs smoothly. Certainly, one of the biggest challenges you may face is keeping your website optimized. You want the page to load fast, so as to prevent the bounce rate from soaring. What can immensely jeopardize the page load time are images, especially if you use the wrong size.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Say you\u2019ve set the width of your page to be 1300 pixels. In that case, you shouldn\u2019t upload images that are wider than the value you\u2019ve set for the page as a whole. The browser will have to resize them on its own, which will either cause the page to load slowly or it won\u2019t even load properly. In order to avoid optimization issues, it\u2019s for the best to learn how to resize images in Adobe Photoshop. This is truly a simple task and it will spare you a lot of trouble. In fact, this, along with increasing the resolution of your photos<\/a>, is an essential item in the skill set of every blogger and WordPress admin.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]There are three basic ways to change the dimensions of your images: resizing, cropping, and changing the canvas size<\/strong>. We\u2019ll now show you how to accomplish each of these three methods.[\/vc_column_text][vc_empty_space height=”68px”][vc_column_text]<\/p>\n

How to Resize Images in Photoshop<\/h2>\n

[\/vc_column_text][vc_column_text]We\u2019ll start, obviously, by opening the image file. Resizing images in Adobe Photoshop starts from the menu at the top of your screen. Go ahead and select Image > Image Size<\/strong><\/em>. In the newly opened dialogue box, you\u2019ll be able to change the resolution of your image<\/a> as well as set the desired dimensions.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Resize <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can change the image size in pixels or inches, whichever you prefer. Using pixels makes more sense if you\u2019re resizing the image for online use, while inches are more convenient if you\u2019re resizing for print.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Change <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you wish to preserve the original proportions of your picture,<\/strong> don\u2019t forget to highlight the Link<\/em> icon<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To resize your image<\/a>, change the dimensions either in the Width<\/em> or in the Height<\/em> field<\/strong>. If you enabled the Link<\/em> icon, by changing one, the other will automatically and proportionally adjust.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Another important thing you shouldn\u2019t forget about is the Resample Image<\/strong><\/em> option. You should use it when you want to change the number of pixels in your image. More pixels equals better quality, so if you\u2019re making your image dimensions larger, you\u2019ll probably want to keep this option enabled. Otherwise, when you resize image, you\u2019ll just stretch the current pixels to a larger dimension, making your image blurry.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Resample <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]By adding pixels to your image, you\u2019ll make it sharper (so-called upsampling<\/strong>), and by eliminating pixels, you\u2019ll reduce its quality (downsampling<\/strong>).[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you wish for the pixel resolution to remain intact regardless of the image size being changed, make sure to uncheck the Resample Image<\/em> option.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When you\u2019re done with resizing, click OK.[\/vc_column_text][vc_empty_space height=”68px”][vc_column_text]<\/p>\n

How to Crop Images in Photoshop<\/h2>\n

[\/vc_column_text][vc_column_text]Cropping allows us to remove certain areas we no longer need or want to display from the images. To do it in Photoshop, open the image file you want to edit, select the Crop<\/em> tool from the Tools<\/em> panel<\/strong> on the left side of your screen. Once you click on the icon, crop borders will show up around the edges of your image. The next thing you should do is to bring your cursor to any of the crop handles. You can left-click on them, and then drag them to resize the crop box. As you do this, you\u2019ll be able to see inside the crop box the part of the image that won\u2019t be cropped out.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Crop <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Crop <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Don\u2019t forget to select the Delete Cropped Pixels<\/em> option from the Options<\/em> bar<\/strong> at the top of your screen. This will permanently discard all the pixels that stayed outside your crop area. But in case you want to keep them, just uncheck this box.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Delete <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To save the changes you made, click the Save<\/em> button from the Options<\/em> bar.[\/vc_column_text][vc_empty_space height=”81px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”top-picks-banner”][vc_empty_space height=”28px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”80px”][vc_column_text]<\/p>\n

How to Change the Canvas Size in Photoshop<\/h2>\n

[\/vc_column_text][vc_column_text]When you wish to add extra space around your photo, you should resize the size of the canvas<\/strong> on which the image is placed. By doing this, you\u2019ll have more space to add some extra details and decorative elements, since the size of the image itself won\u2019t change.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]From the Image<\/em> menu select the Canvas Size<\/em> option<\/strong>. In the dialogue box you\u2019ll be able to see the current size of your canvas. There are two ways in which you could resize it. One is to simply enter the new dimensions in both the Width<\/em> and Height<\/em> fields<\/strong>. Or, you can check the Relative<\/em> box<\/strong>. This will allow you to specify how many pixels you\u2019d like to add or remove from your canvas.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Once you\u2019re happy with the canvas size, click OK<\/em> to apply the changes.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Canvas <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Change <\/div>\n<\/div>[vc_empty_space height=”79px”][vc_column_text]<\/p>\n

Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]Optimizing your images for the web requires a lot of work. But, if you want your website to load faster and be fully responsive, you need to be careful with your image sizes. If you\u2019re using WordPress, then you\u2019re probably familiar with the photo resizing option this CMS offers by default. But you should know that if you decide to use it, you\u2019ll only change the size of the image that\u2019s going to be displayed on your site. On the other hand, the file itself will keep its original dimensions, which might continue to cause optimization issues. It\u2019s always best to create and upload properly optimized photos right from the get-go. Now that you know how to resize images in Photoshop, go ahead and put this knowledge into practice and make some beautiful and lightning-fast pages![\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Resizing an image is an essential skill that is useful to just about everyone, in particular to all website owners and admins. As an administrator, you need to make sure everything\u2019s up to date and that it runs smoothly. <\/p>\n","protected":false},"author":4,"featured_media":1199,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[30,4],"class_list":["post-828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-creative","tag-tips"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=828"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/828\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/1199"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}