search

AlphaAndTheOshea / Parking-App-UNA

GNU General Public License v3.0
0 stars 1 forks source link

OH User Story: Importance of Having Quality Images On An App/Website #25

Open OliveHamm14 opened 3 years ago

OliveHamm14 commented 3 years ago

User Story
Story Points= S-M

As a dev/designer I want to see quality images on sites or apps I work on so that it will keep the users interested/happy. Having a plain black and white (html style) app can get boring, and that is just no fun.

Description

Being apart of the photoshop team in this group and partial creator of the images used, it is important to me to see good quality graphics on our app. Searching/creating acceptable images that fit in the category as "good quality" then using those in the app allows the users to enjoy their experience more. Happy users = happy developers.

Approach

To avoid having poor quality images you should:

  1. Search for images with a high pixel sizing. For example an image that is around 1200px X 1200px is a good quality picture (you really do not want to go much lower than the example, however staying in the 1000 range or above is considered good quality). The lower your pixel count, the fuzzier you image could look. Think about this, screen monitors come in a huge range of sizes, and the image on the website can be set up to fit the users screen. The farther an image has to stretch the less quality your image will have. By using larger sized photos the less loss in quality the photo will experience.
  2. If you are creating your own image via camera, photoshop, or etc. you need to make sure your image is sized correctly before creating it. For cameras, you need to make sure you have a good lens on it to get better quality pictures.
  3. For photoshop images you can create your own canvas in the software before making your image. This should be located in your presets in the software. Also make sure your resolution is at a good number, in photoshop setting your dpi to 300 will help make your images better quality.

Test

Resolution/Dimension (for PC)

  1. Select the file you want to use. Right-click on the image and then select "Properties."
  2. A window will appear with the image's details.
  3. Go to the "Details" tab to see the image's dimensions and resolution.
  4. Standard resolution for web images are 72dpi but for printing it is 300dpi

Resolution/Dimension (for Mac)

  1. Simple: Right click on the file in the Finder.
  2. Click Get Info
  3. Under the "More Info" you will see the dimensions and resolution of the image.
  4. Standard resolution for web images are 72dpi but for printing it is 300dpi

Chart References

Application Ideal Image Size(in pixels) Resolution(in pixels/inch)
For mobile phones and portable devices with small screens: 320 x 240 pixels 72 ppi
For emails, online sharing sites and viewing on standard computer monitors: 1024 x 768 pixels 72 ppi
Viewing at full-screen size on LCD monitors with 5:4 aspect ratio 1280 x 1024 pixels 72 ppi
Viewing on standard definition TV sets with 4:3 aspect ratios: 720 x 576 pixels 72 ppi
Viewing on widescreen standard definition TV sets: 1280 x 720 pixels 72 ppi
Viewing on high definition TV sets: 1920 x 1080 pixels 72 ppi
Sensor Resolution (megapixels) Typical Image Resolution (pixels) Maximum Print Size Print Resolution Maximum Output Size
2.16 1800 x 1200 6 x 4 inch 300 dpi Snapshot prints
3.9 2272 x 1704 7.6 x 5.7 inch 300 dpi ‘Jumbo’ snapshot prints
5.0 2592 x 1944 8.6 x 6.5 inch 300 dpi 8 x 6 inch enlargements
7.1 3072 x 2304 10.2 x 7.7 inch 300 dpi A4 sized prints
8.0 3264 x 2448 13.6 x 10.2 inch 240 dpi A4 sized prints
10.0 3648 x 2736 18.2 x 13.7 inch 200 dpi A3 sized prints
12.1 4000 x 3000 20 x 15 inch 200 dpi A3+ sized prints
14.7 4416 x 3312 22.1 x 16.6 inch 200 dpi A2 sized prints
21.0 5616 x 3744 31.2 x 20.8 inch 180 dpi A1 sized prints
OliveHamm14 commented 3 years ago

image Example of Bad and Good Resolution on a photo

OliveHamm14 commented 3 years ago

image An example of how sizing can effect pixels on your image/canvas.