Freelance web designer
Built with finesse

Let's talk plan design build review publish produce results

File types associated with my web design
(doesn't get anymore exciting than this)

There are countless file types (well, the ones I can think of in this blog) used for documents, items and other sources to build a website. In this blog post I break down what some mean and some examples of the extensions used in my web design … as mentioned already, hold onto your hats this’ll be a rollercoaster.


Unless you’re a web designer, font designer, or you really know your business and your file types, you’re probably unaware of these extensions. TTF stands for TrueType Font, and OTP stands for OpenType Font. They are both used for fonts, for my web design I have tools and processes to upload fonts so my clients are able to have their fonts used on their site. These file types can also be recognisable on operating systems for example on my MacOS, simply double-clicking the file type would install the font onto my MacBook / iMAC so I can use the intended font for documents and more! Let’s get too nerdy and boring however.


Portable Network Graphics and Joint Photographic Experts Group files are two of many many image file types, but the main one I use is PNG for high quality imagery such as for logos for photos. JPEGs are common too for imagery, however sometimes I feel they can reduce quality most of the time. If I find a low quality JPEG it’s not the end of the world however, I can always convert to PNG. Images (especially PNGs) do have drawbacks, but not site destroying ones. For instance, the more you use, the greater the sizes used which could affect page loading speeds. I do however have ways and tools to prevent this, through image optimisation. Read more about image optimisation in the .WEBP font type below, as .WEBP is linked.


Standing for Web Picture, it is not commonly known to non-designers, this is a newly introduced file type for imagery such as logos and photos, and I usually convert imagery I use for sites that contain a large amount of photos / images used (for example for e-commerce sites) to reduce the file sizes; this is through image optimisation.


The initials stand for Scalable Vector Graphics, and this file type is used mainly for icons, this ranges from menu icons (through mobile design, the Hamburger menu, my site has one at the top of this page), to social media icons. I have thousands of icons at my disposal which break down and show as eye-catching for sites, they can also be linkable and colours can be altered.


Used for Favicons (which stands for Favourite Icon) these are tiny images that are displayed on the tabs and bookmarks of websites. Usually I set a [noticeable] logo of the specific site for these, rather than the general WordPress icon (which I commonly see from a lot of sites I come across… doesn’t take long to change but clearly designers forget!).


Portable Document Format, this is a very well known document file type and widely used. I use them for linkable documents to use on websites, as well as for pretty much all of my admin documents from invoices to procedures and client contracts. PDFs are great file types to ‘cement’ documents such as .PAGES and .DOC files, what I mean is, if you’ve written a document out in a specific way with mountains of text and maybe some tables and images, well once converted to a PDF, the info remains as saved and in position and usually cannot be edited (unless you have premium tools and software with the capability to do so). PDFs are brilliant for my client contracts, I use a great electronic signature piece of software and once I’ve created a contract, I can simply upload the PDF and show the client where to sign and hey presto, easy as that (for me and my client!).


Now, I’m a huge Apple fan, always have been and I much prefer the OS to Microsoft and forever will. Especially when Pages is a thing and exists, if you’re not familiar with the software, it’s basically the Mac equivalent to MS Word, but it’s absolutely not equivalent (not being biased) as you know in Word when you move a picture a millimetre to the left or a piece of text and it’s suddenly moved to page 348? Pages doesn’t do that, and is way more kinder to you. I have multiple Pages files used for my web design, and some Doc files too however those Doc files are only provided and received from my clients!


Any Excel fans out there? (or for you Apple fans: the Excel equivalent Numbers), it’s not an Excel file per say however it stems from it. CSV stands for Comma-separated Values, and contain data in text format, as opposed to .XLS files are in tabular form with rows and columns. I have clients that provide me with .CSV files for their websites and databases to work with importing and exporting, for example my client Wayland Chamber of Commerce, they require an export of their online directory from their clientele businesses yearly so they can produce online and printed directories. It works well with the setup we have for this and they receive an export almost immediately from myself when requested!

.MP4 / .MOV

We all love a video, and I have plenty of video files in forms of MP4s and MOVs received from clients or some of my own. Confession / top TCQC tip time: If I come across a large video file needing to be added onto a website, or multiple video files needed, I usually opt to upload the file onto my TCQC YouTube Channel account, and then simply linking / embedding the URL of the video onto the website. That way, the video isn’t ‘hosted’ on the website preventing slow loading speeds and memory used up.


We all know what a ZIP file is, it compresses / combines one or more files into one ZIP file and can then easily be sent via email or another transfer process such as WeTransfer (which I usually recommend to clients). ZIPs are great as they also reduce file size also (hence the word ‘compression’).


I’ve not used any GIFs in any of my clients’ websites, for professional reasons, and that”ll remain the case unless requested by my client. I’m only including it as I have used a couple of GIFs in some blog posts of mine. GIF stands for Graphics Interchange Format, and they’re static and animated images… mainly used in modern times for memes!

(mainly me listening to my 8000+ songs when designing...
for motivational purposes of course)

Finally, this file type is used for my web design 95% of the time during my design / admin / testing processes… my music library. I don’t need motivation for my web work because I love every minute, but having music in the background drives me even more and is therapeutic in a way. Fun fact, my favourite band is Angels & Airwaves which their frontman is my fave artist Tom DeLonge, so I tend to have their albums on repeat! Closely followed by Feeder and Bloc Party.

Have a project in mind? Get in touch