Photo optimization involves altering images on web pages to reduce loading time. This is important because users have low patience levels and may leave sites that take too long to load. There are programs like Photoshop, Imageoptimizer.net, and Xat.com that allow users to optimize photos through resizing, cropping, compression and other techniques. Guidelines for photo optimization include converting graphics to stylized text, setting resolution to 72ppi, cropping images to required size, minimizing color depth, and using thumbnails. Resizing changes the pixel size or crops the image, while compression reduces file size without degrading quality through formats like JPEG, GIF and PNG. Bandwidth speed affects loading time, so adequate bandwidth is important
2. PHOTO OPTIMIZATION
What is it?
Changing/altering components of your graphic(s) to reduce the
loading time of a web page.
Why is this important?
The patience level of online visitors is very low, so they tend to click
out of those sites that take more time to download.
3. PHOTO OPTIMIZATION PROGRAMS
1) Adobe Photoshop- Photo editing programs range from recreational
photo takers to professional photographers and graphic designers
2) Imageoptimizer.net- Free online photo optimizer, users can easily
such properties as quality width and height of the picture before it is
compressed
3) Xat.com- Online program that users can download and try before
they buy it. Allows users to just play around with photo optimization and
manipulation
4. GUIDELINES OF PHOTO OP
Some of the points that the web developers of a website design
company follow are:
Conversion of graphic text into stylized text.
Changing the resolution of all images to 72 Pixels per Inch (ppi).
Cropping the images to the actual size required.
Specifying the actual height and width of all images.
Minimizing depth of color when it is not needed for quality.
Using thumbnails where required.
*http://www.quality-web-solutions.com/blog/how-to-do-photo-optimization/
5. RESIZING AND COMPRESSION
Object: Balance size with appearance
1) Resizing- changing the size
Pixels
Cropping
2) Compression- minimizing the size in bytes of a graphics file without
degrading the quality of the image to an unacceptable level.
Image File Formats (JPEG, GIF/PNG)
*http://searchcio-midmarket.techtarget.com/definition/image-compression
6. RESIZING
Pixels: digital images are composed of pixels- the smallest controllable
elements of a picture represented on the screen
http://vimeo.com/10829255
Cropping: cutting away some at the edges, to include less area in the
final image
Cropping discards those trimmed pixels, making the image dimensions
smaller, but primarily, it changes the scene included, and often the
shape too
Instagram
7. COMPRESSION
Image File Formats
1) JPEG (Joint Photographic Experts Group) - generally used for
photographs
2) GIF (Graphics Interchange Format) - commonly used for line art
and other images in which geometric shapes are relatively simple
3) PNG (Portable Network Graphics) – replaces GIF as a patent-free
image compression file format
8. COMPRESS IMAGES SO THAT THEY LOAD QUICKER,
BUT BE CAREFUL NOT TO DISTORT THE ORIGINAL IMAGE
COMPRESSED VS
UNCOMPRESSED LEVELS OF
IMAGE COMPRESSION
9. BANDWIDTH
The transmission capacity of an electronic communications device or
system; the speed of data transfer: a high-bandwidth Internet connection
The more bandwidth you have the faster you can receive the data.
Example: If your bandwidth is 1Mbps and the image you want is 5mb in size
then it should take about 5 seconds for you to get the image.
Kbps-Kilobits per second. (Normally used for dialup)
Mbps- Megabits per second
MBps- Megabytes per second(Not usually used in residential internet plans)
Gbps- Gigabits per second. Hardly used for internet plans. The costs make them
unpractical for families and small businesses
10. BANDWIDTH(CONTINUED)
Even though it is expensive companies must make sure they have an
adequate amount of bandwidth.
Too little bandwidth means people who may have dialup or any other slow
internet connection may be waiting too long to download content
11. INSTAGRAM
W H AT I S I T ? F E AT U R E S
• Free photo-sharing program • Confines photos to a square
and social network that was shape, similar to Kodak Instamatic
launched in October 2010 and Polaroid images
• Variety of effects(Earlybird- Faded,
• Enables users to take a blurred, focuses on yellow and beige)
photo, apply a digital filter to
it, and then share it with • Add-Ons(Instamap- app available
other Instagram users they for iPad that allows users of
are connected to
Instagram to find photos based on
their location or a hashtag)
• Currently has 100 million
registered users • Cropping
12. WHAT IS FLICKR?
Flickr is a free photo sharing website that is linked to a
yahoo account
Users can add tags to categorize their photos and they can
comment directly on the photo
User can “favorite” the photos to make it easier to find later
13. PRIVACY
Flickr users can make photos public or private and designate who can
see them.
Any public photo can be viewed by anyone with or without a flickr
account
Flickr users can also send guest passes to people who don’t have a
flickr account
14. FLICKR GUEST PASS
The URL from the photo or set of photos that the user wants to
share.
Users copy the URL into an email and send it to the person they want
to share photos with
A user can expire guest passes whenever they choose
15. EMBEDDING
1) Instagram and Flikr pictures can be embedded into websites and blogs
using their bandwidth.
• Use widgets and/or plugins
2) Remember to balance size with appearance.
3) DON’T COPY AND PASTE URLS FROM OTHER SOURCES!!!
• Hotlinking- direct linking to a another web site's files