Skip to content

Optimizing images & video for content

HTML

You can write html directly in any markdown file. This means also that you can embed CSS in your HTML tags to do formatting. Try to avoid this to keep your pages clean and uniform. If you need to change the look of your website, look for how to Customize your Mkdocs theme section.

You can still use html for things Markdown doesn’t provide, like alignment, image sizing, embedding content etc.

Easily compress images for web

A handy tool TinyPNG/JPEG is a great online tool to quickly compress your images with out losing quality. Just drag-drop you images and download the newly compressed version.

File sizes - optimize your files for the web

Google provides an excellent guide on optimizing files and images for the web:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

File formats

  • Prefer vector formats: vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high-resolution world.

  • Pick best raster image format: determine your functional requirements and select the one that suits each particular asset.

  • Experiment with optimal quality settings for raster formats: don't be afraid to dial down the "quality" settings, the results are often very good and byte savings are significant.

  • Remove unnecessary image metadata: many raster images contain unnecessary metadata about the asset: geo information, camera information, and so on. Use appropriate tools to strip this data.


Last update: October 1, 2020