Summary 6

Images & Layout

Topic 1 - Where Images Go

Images are a very important part of displaying a website's message and purpose, and due to the shear amount that could end up on it, it's good to make a seperate folder to house all of them (and subfolders if there's enough) and keep everything in order. Adding images to code the normal way allows them to either stay in their own element separate from text, or be placed in the middle of it, though doing that may cause formatting problems for the visual structure of the site. It's also important to make sure that the images being used are the right size, as conflicting sizes could cause the image to stretch or make the page load longer if it's way too big.

Topic 2 - Types of Images

There are several differnt image formats that are better for different things, as no one type is superior to all the others. JPEGs are very good for images that need a wide color range, while GIFs are better for fewer colors, as while JPEGs can use more colors, they usually require a bigger file size, and bigger files take longer to load on the web. GIFs can also house transparency in them, but only in straight edges, so if there is an image that has rounded or diagonal sections, it's better to use a PNG as it can keep that transparency in check (though these also have bigger file sizes than GIFs).

Topic 3 - Positioning & Floats

CSS has several differnt options for positioning elements in a website that can be changed depending on the size of a user's screen (or window) resolution that helps the information be more orderly and less disconnected at different sizes. The 'float' parameter allows an element to anchor itself to either the left or right side of the screen, floating to the side of elements that also have that setting, with ones higher in the code being closer to the edge. 'Position' on the other hand allows an element to have a set location with several versions of placement that can make it stay on screen in a fixed position (fixed), exist outside the base hierarchy in it's own area(absolute), or change location based on where it would normally sit (relative).