Crop and THEN Upload
The photos you take on your camera or phone for your website are hopefully at the highest resolution possible. That does not mean that you should upload that file to your website. Keeping these large photos in a safe place other than your website is important; on your computer, an external hard drive, the Cloud. Make smaller copies to upload that will not slow down your web load speed. Upload the reduced files instead of uploading the larger images and then trying to crop or reduce them in the site. Most pages of your website (except the homepage slideshow) will only need a size no bigger than 600 pixels in one of the dimensions. In this article, you will find options and tips to help you resize and crop photos for the web.
Upload the reduced files instead of uploading the larger images and then trying to crop or reduce them in the site. Most pages of your website will only need a size no bigger than 600 pixels in one of the dimensions.
Homepage Graphics
For home page photo, you will need at the very least 1600 pixels in width.
Trends for website homepage images have us installing larger photos that span the width of the screen. Either they are covering the whole screen, top to bottom, or a full width strip. The full width strip looks great, but is a challenge since it messes with the original ratio.
These images show how drastically an image may have to be cropped in order to fit the layout that also gives room for the services and navigation bar. The first photo is the original image, and the second photo is after it was cropped for the home page slide show. Ask your web design team what pixel size is needed for your particular website.
You can either ask your graphic designer to crop your images for best display, or you can try it yourself. Sometimes your money will be better spent on a professional, rather than pulling your hair out trying to do it yourself…But if you really want or need to DYI, here are some suggestions.
Photoshop is my tool box of choice. It can do it all. It can also be expensive to purchase (or rent as they have moved to the Cloud) and since it is a very deep piece of software, it can be a challenge to get up and running. There are lots of You Tube tutorials to help with photo cropping.
Because Photoshop may not be in your wheelhouse, I found some free image resizer apps that you can use to do the basics.
Free Image Resizers
Web Resizer will allow you to resize, crop, enhance, and add a border. I like this site because of the cropping feature. It allows you to see and move the crop edges. For the vertically cropped slide show images we use in some web design layouts, this is perfect. It can’t compare to what Photoshop can do, but if you want to edit the images yourself without Photoshop, here is an option. For a deeper explanation, and instructions, this article by Row Boat Media will help.
Shrink Pictures is a site where you can upload your photos to be size reduced for your website or social media site. This site does not have the capability to crop or change the size ratio. It gives you a few pixel size dimensions and picture quality choices. After you resize, you can download a copy to your computer, or copy the url to share on Facebook. Here is a short tutorial video that explains the steps- Shrink Pictures Tutorial Video
From an Expert
Photografica has an article that explains the why and how to you web photo questions. For the purpose of sizing for your website, read the first few paragraphs, and then skip the “Resampling” section and move down to “Resizing Images for Web”. Because there are so many questions, and sometimes conflicting solutions in image sizes pertaining to print and web, it is hard to not get confused. The author is an accomplished instructor, giving basic descriptions for pixels, DPI and PPI that should make it all a bit more clear. Skim and find what you need in this article.
360 WEB DESIGNS is proud of our Graphic Department. We have packages to cover image content resizing and graphic design. Contact us for more information.
