Images for Web

Formats

  • JPG: Use JPG for photos with millions of colours as JPG uses lossy compression that can reduce the image file size much more than PNG which uses lossless compression, so never use PNG for photos
  • PNG-24: Use PNG-24 (millions of colours) for images with transparencies or graphics/logos with not many colours
  • PNG-8: Use PNG-8 (256 colours) for graphics/logos with few colours

JPG Photos

  • JPG Compression: Use around 40% or 50% depending on the image itself, to reduce the image file size
  • JPG Progressive: Save JPG in progressive mode, so the image will load from blur to sharp, instead of loading the whole image at once
  • JPG Degradation: Avoid JPG degradation by opening/saving  the same JPG as you will loose quality every time you do this process, instead use a master in lossless format like PSD or PNG-24

Colour

  • Colour System: Use always RGB, Grey Scale or Indexed colour, never CMYK (this is for printing purposes, ink)
  • Colour Profile: Use always sRGB colour profile and do not embed the colour profile when you save the image as this will increase the file size unnecessarily when most browsers use sRGB as default colour profile

Dimension

  • Image Resolution: DPI (dot per inch) is not relevant for web images (this is for printing purposes, inch is a printing unit)
  • Image Dimensions: An image for web has got 2 dimensions: width in pixels and height in pixels
  • Resampling pixel dimensions: You can Downsample (reduce pixels) of an existing image but you cannot Upsampe (increase pixels) it as you will get a pixelated or blur image, this is true for printing and web images
  • Website representation: When you present an image in a website you specify its width and height, so present always the image as its real dimensions, that is, at the maximum dimension that is going to be presented in the biggest responsive scenario on the website, never bigger as you can slow down your website unnecessarily, and never smaller as when the image is presented bigger will look like burred

SEO (Search Engine Optimisation)

  • Image File name: Use correct human readable text for your image file names using keywords and search phrases relatives to the business of the website for SEO purposes. Do not use special characters and use hyphens instead of spaces. ie: glass-of-water.jpg
  • Image Alt tag: Use correct human readable text for your image alt tags for SEO purposes. ie: alt=”glass of water”

Website Mock-up Image

  • CSS framework:  You need to agree in the CSS framework that the web developer is going to use, such as Bootstrap and then adapt your design to the different breakpoints (devices) and grid system (columns) of this framework
  • Consistency:  For human usability there has to be consistency in the design of common semantics HTML elements such as headings, paragraphs, lists, etc… but it is very important to have consistency specially for links and buttons
  • Image backgrounds are not good for small devices as will make texts difficult to read and they are difficult to position and scale for the different device scenarios
  • Social share buttons are for shareable pages, like article or subpages
  • Logos: where possible is best to use SVG vector logos as these will be sharper in small device mobiles
  • Fonts: Please use Google fonts: https://fonts.google.com/

WordPress

  • Image sizes: WordPress produce several images sizes from your original uploaded main (full) image, like thumbnail size, medium size, large size and other theme custom sizes, so when change theme do not forget to recreate these sizes, there are plugins to do this automatically
  • Plugins: Having active too many plugins can slow down your website considerably
  • Page builders: using page builders, such Elementor, instead of a customised theme will down your website considerably

Digital Images »

Leave a Reply

Your email address will not be published. Required fields are marked *