Table of Contents
Types Of Images
There are loads of different image formats, and each one has its own perks. Here are the main ones you’ll come across:
JPEG (.jpg): The most common image format on the web. It’s great for photos because it compresses well, keeping the file size low, but you do lose a bit of quality with every save.
PNG (.png): Ideal for images that need transparency (more on that later) and for sharper, non-photo images like logos. It doesn’t lose quality with compression, but the files are bigger than JPEGs.
GIF (.gif): Famous for short animations, but it’s also used for simple images with a limited colour palette. It’s not good for detailed images but fine for icons or small graphics.
SVG (.svg): This is a vector-based format, meaning it scales perfectly without losing quality. It’s great for logos, icons, or illustrations that need to stay sharp no matter the size.
WebP (.webp): A modern format that offers both high quality and small file sizes, making it perfect for the web. The downside? Some older browsers don’t support it.
ICO (.ico): Specifically used for favicons—those tiny icons you see in browser tabs. The ICO format can contain multiple image sizes in one file, making it perfect for scaling from small favicons to larger sizes for bookmarks or shortcuts.
JPEG 2000 (.jp2): A more advanced version of JPEG, offering better compression and quality. However, it’s not widely supported by browsers, so it’s rarely used online.
AVIF (.avif): A newer format that offers fantastic compression and quality, even better than WebP, but browser support is still catching up. Keep an eye on this one!
JPG XL (.jxl): Another next-gen format offering better compression than JPEG, with a focus on better image quality and efficiency. Like AVIF, it’s still in the early stages of adoption.
BMP (.bmp): An old-school format that’s uncompressed, meaning huge file sizes. You won’t use this on the web—it’s mainly for Windows-based systems and not suitable for fast-loading websites.
TIFF (.tif): Best known in the world of printing, TIFF images are high-quality and can handle lots of detail, but they’re enormous. Great for professional photography, but definitely not for the web.
Open vs. Closed Image Formats
Open formats (like PNG, JPEG, SVG, or WebP) are publicly documented, meaning anyone can use or create software that supports them. These formats are versatile and widely supported.
Closed formats (like PSD or AI) are proprietary and tied to specific software, like Adobe Photoshop or Illustrator. These are great for editing but not ideal for the web, as not everyone can open or use them without the right tools.
For websites, stick to open formats like JPEG or WebP, which browsers can handle with no fuss.
What is Image Resolution?
Resolution refers to the amount of detail in an image, measured in PPI (pixels per inch) or DPI (dots per inch). Higher resolution means more detail but also a bigger file size.
For websites, 72 PPI is the standard—it looks sharp enough for screens and keeps the file size manageable.
For printing, you’d use a higher resolution, like 300 DPI, to ensure the image looks crisp.
If you use unnecessarily high resolution on your site, it’ll slow things down without any visual benefit. Keep it light for the web!
What is Image Transparency, and When Is It Used?
Transparency means part of an image is invisible, usually the background, so it blends seamlessly with your website’s design.
PNG is the most common format for transparent images. It’s perfect for logos or icons where you don’t want a solid background.
GIF can handle transparency too, but it’s not as smooth—edges can look jagged.
SVG supports transparency since it’s vector-based, making it perfect for scalable graphics.
When should you use transparent images?
Logos: If you don’t want a white or coloured box around your logo when placing it on different backgrounds.
Icons: To ensure they blend into the design without ugly borders.
What is Image Optimisation?
Image optimisation is all about reducing the file size of an image without making it look terrible. Why? Because big images slow down your website, and no one wants to wait for a page to load! Here are some easy ways to optimise:
Compressing images: Tools like TinyPNG or Squoosh can help you shrink the file size without losing much quality.
Resizing images: Don’t upload a massive 4000px-wide image if all you need is 800px.
Choosing the right format: Use JPEG for photos, PNG for graphics with transparency, and consider WebP or AVIF for better quality and smaller files.
Optimised images mean faster page loads, better user experience, and a cheeky SEO boost too.
Why Do Image Size and Resolution Matter for Website Design and Performance?
Big images are a killer for website performance. Larger file sizes mean slower load times, which frustrates users and tanks your SEO.
Use the right size: Upload the exact dimensions you need. If the display size is 800px, don’t upload a 4000px image.
Keep resolution in check: For web images, 72 PPI is more than enough. Save the high-res files for print.
Balancing image size and resolution helps your website load quickly without compromising on image quality.
What’s a CDN, and When Should You Use It for Images?
A Content Delivery Network (CDN) is a global network of servers that store and deliver your website’s content (like images) based on a user’s location. The closer the user is to a server, the faster the content loads.
Why use a CDN for images?
Speed: It speeds up load times, especially for users far from your main server.
Performance: A CDN spreads the load, reducing strain on your server.
Global reach: If your site has an international audience, a CDN ensures fast access to images for everyone.
You’d want to use a CDN if your site has a lot of traffic, heavy images, or users in different regions around the world.
In a Nutshell
Image formats: Choose wisely—JPEG for photos, PNG for transparency, SVG for scalable graphics, ICO for favicons, and WebP or AVIF for the best quality and size balance.
Optimisation: Keep file sizes small to speed up your site.
Resolution: Stick to 72 PPI for the web; don’t go overboard.
Transparency: Useful for logos and icons to make them blend smoothly.
Open formats: Are flexible and work everywhere, while closed formats require specific software.
CDNs: Help deliver images faster to users across the globe, improving site performance.
Mastering these basics ensures your site stays fast, sleek, and visually stunning!
