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 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 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

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

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”

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/

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

Contact me about: Images for Web, by:

WhatsApp Email