How to edit an image for use on the web
mages can be edited through photo editing software that is installed on your computer, or on a photo editing website. For images that you are planning to use on a website, it is a good idea to start off with an image that is good quality and larger than you’ll want, then crop and or re-size it for the area of the website that you’ll be using it on. Feel free to use a program that is already installed on your computer, or a website that you’ve used before, or you can review the list of available photo editing software and websites below and choose the one that will work best for you and your needs!
ADOBE PHOTOSHOP
Photoshop is by far the best photo editing software out there, although it is a bit pricy and it is a bit difficult to use without formal training. There is a less-expensive version called Elements that doesn’t offer as many features, but works for basic editing needs. These are available for both Mac & PC.
GNU IMAGE MANIPULATION PROGRAM (GIMP)
GIMP is considered a free alternative to Photoshop and allows you to edit images at a professional level. This is also available for Mac & PC.
PHOTOSCAPE
PhotoScape is a free photo editing software that will allow you to do the basics as well as create slideshows and animated GIFs and more! This does, however, have built-in advertisements for recommended software.
PICASA
Picasa, a Google program, is more of a slideshow creator and photo organizer, but has basic photo editing tools, like cropping & resizing, available. This is available for both Mac & PC.
PIXLR
Pixlr has many editing tools and is similar to Photoshop. There is a full version called Pixler Editor that has a lot of editing options, and also a basic version for quick edits called Pixlr Express.
FOTOR
Fotor offers a very user-friendly, easy-to-use editing interface. This online application offers photo editing tools, in addition to collage and greeting card creators!
PICMONKEY
Pic Monkey offers many photo editing tools, however there are some advanced options that are only available for people who have paid for the upgraded version.
BEFUNKY
BeFunky not only has basic editing tools, but also offers fun elements like Cartoonizer, Inkify paints, & grunge frames as well as a collage maker.
KNOW YOUR AREA
Before you adjust your image, you’ll want to know where it is going to be used on your website so that you know how it should be sized. Is it a banner image, an image to go in a sidebar, a blog post or news article image, a slideshow image, a product image, or an image that will be used within the content on a page? Once you know where the image will be used, then you’ll need to know how large that area is &/or what size the image should be to go in that area of the site. As your developers, we should be able to give you the maximum width in pixels that images should be for areas of your site &/or exact dimensions, depending on where they’ll be used.
FILE SIZE
File size is important for the web. Not only is re-sizing your images appropriately for the area that it will be used for important, but also the actual file size itself is important. Larger images will take longer to load on a page and will also take up more room on the server where your website is being hosted. Cropping and resizing your image should help reduce that file size.
CROPPING VS RESIZING
When you crop or re-size an image, you reduce the number of pixels. That is why starting off with a larger, good quality image is important. Cropping is when you take an image and decide that you want to only keep a smaller portion of that image. Here is an example of what happens when you crop an image:
Resizing and image smaller is when you take an image and just reduce the size and amount of pixels, but keep the full image. A resized image will be smaller, but still proportionate to the original image. Here is an example of what happens when you resize an image:
The three file types best suited for the web are GIF, JPEG, & PNG. Your photo editing software or website that you choose to use should allow you to save your image as any of these file types. Depending on what type of image you’re saving and what it will be used for will help you decide which format is best. GIFs are often smaller and are best for line art, icons, and images with few colors and less detail. You don’t want to use this format is you have a complex image or photo. JPEGs are best for photos or images with many colors and lots of detail, but is not best for line art. PNGs are also best for photos or images with many colors and lots of detail, but is not best for line art. PNGs will also allow you to have transparent backgrounds for graphics or icons.
