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.
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
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/
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
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
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
COMPRESS IMAGES SO THAT THEY LOAD QUICKER,
   BUT BE CAREFUL NOT TO DISTORT THE ORIGINAL IMAGE
COMPRESSED VS
UNCOMPRESSED                         LEVELS OF
    IMAGE                           COMPRESSION
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
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
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
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
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
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
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
HOTLINKING

COULD COPY THIS…..
AND GET THIS!
QUESTIONS???

Ca 260 powerpoint project

  • 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 PHOTOOP 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 imagesare 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 SOTHAT THEY LOAD QUICKER, BUT BE CAREFUL NOT TO DISTORT THE ORIGINAL IMAGE COMPRESSED VS UNCOMPRESSED LEVELS OF IMAGE COMPRESSION
  • 9.
    BANDWIDTH The transmission capacityof 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 itis 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? Flickris 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 userscan 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 TheURL 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 andFlikr 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
  • 16.
  • 17.
  • 18.