Join Sue Jenkins for an in-depth discussion in this video Best practices for image resizing, part of Productivity Tips for Web Designers.
- Hello, everyone. This is Sue Jenkins with Productivity Tips for Web Designers. Today, you'll discover some best practices for resizing images correctly for the web. Resizing images is something every designer should know how to do. Without it, images may be too large or too small or in the wrong color space or the wrong resolution for the desired output. This is especially important for designers creating graphics for the web. For instance, if you take digital photographs with your cellphone, tablet, or digital camera, chances are, your device will save those images as high res jpeg files, unless you've manually set your device to save them in some camera raw format.
Stock art, too, might be high resolution, as well as images that you create with your scanner. No matter what the source of your digital files, you'll need to resize them before you create your optimized graphics for the web. The main reason you resize for the web is to ensure that your images use the correct resolution and pixel dimensions appropriate for a website. If you don't do it, the file size and dimensions will be far larger than needed, resulting in gigantic files that take way too long to download and view in a browser.
In general, you'll likely start the process of resizing with either a large jpeg at 72 pixels per inch or a 300 dpi image saved as a jpeg, tiff, pdf, or psd. To view the resolution and size of your document, you'll go to the image menu and choose image size. This brings up the image size dialog box, which gives you information about your particular image. This example is quite large at 18.2 megabytes and 45 inches by 27 inches, which is way too large to put on a website.
If you click the drop down button next to dimensions, you can view the size in other units like inches and percents. Under the fit to menu, you can choose different presets that control how your image is going to scale when it's resized. For instance, if you knew that you needed to use an image as a banner that's 960 pixels wide, you might choose that first option 960 by 640 at 144 ppi, which is pixels per inch. Remember, though, the more pixels you have, the greater the resolution.
144 is definitely larger than we need for our web browser and the file is still pretty big at 6.31 megabytes, but if a visitor were to print this image from a webpage, the printed quality would certainly be better than if the image were 72 ppi. Of course, if printing isn't an issue and we want to save on file size, we can edit the resolution down to 72 pixels per inch. That will reduce the file size before optimization. If you've noticed that as you were changing the dimensions and resolution in the preview window, the whole little preview of your image will update to reflect the changes here.
Another thing you can do is you can resize this window, and as you resize the window, your resize preview area changes. Another thing you could do is if you wanted to isolate a particular area of your image, you can click anywhere on your image behind the image size dialog box to zone in on that space and check the quality. Whether you choose one of the presets or not from the fit to menu, you can always at any time enter in your own dimensions here for width, height, and resolution.
As for the resample options in the resample menu, by default, Photoshop has the interpolation method set to automatic. That chooses the best method based on your input. Resampling is a way of changing the amount of data in your image by adjusting the number of pixels or resolution. What this really means is when you up sample, or enlarge your image, you're really telling Photoshop to guess how the image should look and add pixels to the file.
Conversely when you down sample, or reduce the size of your file, you're telling Photoshop to delete pixels from the file. If you want to change the size or resolution without altering the pixels in your image, you'll want to deselect the resample option before you change any of the image values in the dialog box. In addition to automatic, you can choose any of these resampling options from the menu. There's two for enlargements, one for reduction, and three others for special circumstances like working with gradiance.
In general, you may want to avoid the nearest neighbor and the bi-linear because these two options tend to create average quality results. Likewise, enlargements are not typically going to yield good results for you when you scale an image any more than double its size. If you really need to go larger than two times the original, try a Photoshop plug in like Alien Skins Blow Up software. Once you have all the settings the way you like them in the dialog box, click okay to close it and your image will be resized.
If your image suddenly appears to be teenie tiny in your workspace like mine does, all you need to do is double click your zoom tool to reset the view to 100 percent. Let's take a look now at a image that starts at 300 dots per inch. The same method applies when you're resizing a larger image. You'll go up to the image, image size menu and modify. Choose your resolution first, then adjust the width and height to suit your needs. In addition to using the image size dialog box, you can also resize using your crop tool.
To do that, select your crop tool and before you do anything else, you'll go up to your control bar and choose width times height times resolution. Then you can input your values. For instance, if I needed this high resolution image for a web banner, I can input 960 for my width and 250 for my height and then set the resolution to, say, 72 pixels per inch. I can then reposition my image so that I get the sliver of it that I really want for my website and then press enter or return on my keyboard to accept the change.
One final word of advice when resizing your images for the web and for print, always work on a duplicate image rather than your original. You can make a duplicate by going to the image menu and choosing duplicate. Working on the duplicate preserves your original copy just in case you ever need to get the full resolution image for another project. Resizing your images for the web is a vital step in the pre-optimization process. Follow these suggestions when resizing your images to help insure that your graphics are the right size and resolution for the web.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.