Image Clarity: High-Resolution Photography
You can find the file size and image size right on your computer. Finding the resolution requires a more advanced photo program like Photoshop, but most basic image editing programs will automatically save images at a lower, web-friendly dpi. If you have a nice digital camera, you might be taking photos that are several megabytes large—way bigger than what you need for your website. Stock photos from high-quality sites tend to come with large file sizes too. If your image is over 1MB, there are a few things you can do:. Resizing an image is easy using Pixlr. Consistency will also help when lining up your text, columns, and other information on your page.
To see what we mean, take a look at the examples below. One is oriented vertically, while the others are horizontal. This makes the page look a little disorganized. In this example, the photos are mismatched and sized differently, so the page looks a bit sloppy. The top photo of the bright white coffee mug sort of felt out of place, so I replaced it with one that was similar in style and color to my two other photos.
Once I had them all the same size and style, I uploaded them into a Columns Element on my website. In this example, I chose photos that are the same style and cropped each one to be the same size. This makes my page look more consistent. Since the photos are all the same size and oriented the same way, they all fit perfectly in one column, with my paragraphs in another.
No adjustments or guesswork needed! Ok, now that your photos are resized and looking great, how can you optimize them for search engines?
If this sounds familiar, take a moment to rename your images before you upload them to your website. Because doing so will give your SEO a boost. Divide those dimensions by your print size and you'll get They are different because the aspect ratio length to width is different a common problem - so the smaller number applies, your digital photo will print to ppi on 8" x 10" paper with a bit of cropping.
It would meet the request for ppi at 8" x 10" more pixels are okay. We could also look at it the other way - if the request is for a photo that will print to ppi on 8" x 10" paper, we can multiply ppi by those dimensions and we'll get x pixels or 7. So, to meet the request, you'll need a digital photo that is at least 7. In fact the simplest and best request for a digital photo would be a high quality photo see the What is a High Resolution Photo section below for a definition of high quality , at X Megapixels, in a specified file type.
This has not been the case for several decades and today that legacy term is only directly applicable to scanning, where one scanning "dot" equals 1 pixel and even then it's not correct since a scanner is really scanning PPI - but most scanning software still uses the term DPI. It's also not applicable to modern printers since they use a blended dot and they completely remap your image to convert it into print. This setting in a digital photo is simply a conversion calculator, showing you what the printed size will be at any given PPI, or, given a specific printed size, what the PPI will be.
2. Use the right file type: JPEG or PNG
It is a useful setting for graphic artists who are used to working on virtual paper and can be a useful setting to you simply to know what your print resolution might be for different paper sizes rather than having to use a calculator. But, it has nothing to do with the digital resolution of the photo, those are its pixel dimensions. This is also a very dangerous setting in most photo software since it can be used to re-size the photo which can lead to much grief and misery if not done properly. Please read the Change Size section of this website before you even consider touching the number in this section of your photo software.
What is a High Resolution Photo?
A " dpi photo" is sometimes referred to as a high resolution photo. Again this is a badly misused term, the resolution of a digital photo are its pixel dimensions and technically high resolution would refer to the resolving power of the pixels, the number of pixels mapping real world dimensions in the field of view of the photo. But a request for a high resolution photo generally means a high ppi usually or greater when printed. The benchmark of ppi being "high resolution" was made many years ago - it's not as true now as it was in the past I would argue that ppi is often sufficient for most printing.
But for sake of argument we can use ppi since that's what most people request. There are pros and cons of each , but for most cases you can remember the following:. Photographs should usually be saved as JPEGs.
Graphics and logos should be saved as PNGs. If the majority of the image is a photograph, you can stick to a JPEG. There are also free online tools like Zamzar that will convert files for you.
How to Optimize Images & Photos for Web (Without Losing Quality)
With web images, you want to find the right balance between size and resolution. The higher your resolution, the larger the file size will be. In the world of print, high resolution images are a good thing. If you use a low-quality image and try to blow it up to be big enough, it will look fuzzy. So how do you strike the right balance between size and quality? What you need for print is usually much much larger than what you need for a website.
You can find the file size and image size right on your computer. Finding the resolution requires a more advanced photo program like Photoshop, but most basic image editing programs will automatically save images at a lower, web-friendly dpi. If you have a nice digital camera, you might be taking photos that are several megabytes large—way bigger than what you need for your website. Stock photos from high-quality sites tend to come with large file sizes too.
How to Optimize Images for Better Web Design & SEO
If your image is over 1MB, there are a few things you can do:. Resizing an image is easy using Pixlr. Consistency will also help when lining up your text, columns, and other information on your page. To see what we mean, take a look at the examples below. One is oriented vertically, while the others are horizontal.