2 of 7

Image size and the web

GIF, JPG and PNG are the three main file types for web optimization

https://www.abetterlemonadestand.com/optimizing-images-for-web/

•JPEGs are the most popular file type for images on the web.

•Best for photos, huge color palette

•PNGs

•Can handle transparency- great for logos and headers

•PNG 8 limited color palette 256 colors,

• Not great for complex images and photos

•PNG 24 higher quality but will increase file size

•GIFs

•option for small image sizes. Much like PNG-8, GIF files are restricted to only 256 colors.

•GIFs should never be used for product photos.

3 of 7

Varying screen sizes and resolution

•A pixel in itself has no size or physical representation, it can only carry value through its relationship with the screen physical size, creating the resolution, or PPI. Understand this and screen density will have no secret for you.

•Resolution, pixel and physical size

4 of 7

Screen resolution and devices

5 of 7

Practical application

6 of 7

Let’s resize some images!

Download the images_resize file from the class website.

To resize on a Mac in Preview https://www.cultofmac.com/456958/resize-images-mac-preview/

You’ll want to save the resized file. If you don’t want to keep your original version as a backup, go to File > Save. If you want to make a copy with a different name, go to File > Rename.

To resize on a PC Windows 10.0, Microsoft Paint Application > home tab, resize

7 of 7

Batch resizing

On a Mac

https://appleinsider.com/articles/18/05/03/how-to-batch-resize-your-image-collection-using-preview-in-macos

Limitations of Preview in Batch resizing. If you have access to Photoshop, you can batch resize in Photoshop too.

On a PC