Please enable JavaScript.

Coggle requires JavaScript to display documents.

Advanced Images (How to add images? (HTML and CSS. (CSS, you can add it as…

- - - - Photoshop
        
        make sure you click "Save for Web & Devices" to reduce the file size.
      - Pixlr
        
        an online image editor, then saving the file for the web.
        
        Directions for Pixlr
        
        Load the image into the workspace.
        
        Go to Image -> Image Size and constrain the width to 1920px. Keep in mind that the height might still be taller than 1080px at this point.
        
        Click on the “crop” icon and constrain the “output size.” Constrain the width to 1920px and the height to 1080px. This will create a fixed box with the dimensions 1920 x 1080px.
        
        Drag a box around the region of your image you want to keep, then hit enter to enact the changes.
        
        Save your images for the web. You may reduce the quality of your images to about 80% to reduce file size without losing too much image quality.
        
        BUT
        What file type do you save the images as? Do you keep the default file type? When should you choose a different one?
        
        JPG vs. PNG?
        
        JPG
        
        The JPG format was designed to compress large images into small file sizes
        it does that well enough that it's become the de facto standard for web images.
        As a result, JPGs are best suited for large photographic images, but smaller images with details may become blurred or pixelated by the compression.
        
        PNG
        
        PNG files are larger in size, but they can reproduce details well.
        PNGs have another feature, which is transparent backgrounds.
        Well suited for images like logos, UI elements and icons.
        
        Use JPGs for large images, but use PNGs when crisp details matter and/or you need transparency, such as in the case of icons, logos, and other UI elements.
        
        Another other popular format you've no doubt come across is GIF, which is still used for animated images but not widely used when building websites.
- - - - https://css-tricks.com/almanac/properties/z/z-index/