Images on the web – a client guide

Over the past few years many clients have asked me all sorts of questions about uploading images on their websites. The main reoccurring question is:

‘How big should the image be?’

Unfortunately there is no easy answer to this question, which is why I’ve written this post! Hopefully it should clear up a few things.

TL;DR = 2800px wide .jpg

Quick Guide

  • Filenames: just use lowercase, no spaces (use hyphens instead), no special characters. Also a good idea to include some identifying info (project name, subject matter).
  • File type: the vast majority of images on the web are .jpg – this is because it can retain quality whilst also being light on file size. Use SVG (vector) wherever possible, and only use .pngs when the image needs to have areas of transparency.
  • Photos: Start with the highest quality image you can get – going down in dimensions and file size is easy, but increasing the dimensions of a small image always looks blocky and blurry.

Image sizes on the web

The modern standard for displaying images in HTML is with a ‘set’ of the same image at different sizes. This allows the browser download the appropriate size. You don’t need to download a huge 2500px image when viewing on an iPhone.

The important thing to know is the server or CMS will (or should) generate the various resized images behind the scenes – the website admin just needs to upload an image of sufficient quality for the highest resolution (and the code will do the rest).

Alt Text

All images on the web should have suitable ‘alt text’. ‘Alt Text’ should describe the content of the image. It is used by screen readers, SEO (google) crawlers and will be displayed if the image fails to load. It’s often overlooked, but it’s important for both SEO and visually-impaired users.

Small (file size) vs. Small (pixel size)

When a developer is talking about images being small or large, they may be talking about one of two things:

  • the dimensions of the image (measured in pixels).
  • the file size of the image (measured in kilobytes).

The file size is the amount storage space the file takes up. A computer, USB stick, phone or TV recording box has only a certain amount of storage space on it, and can only fit a certain number of items on it. You can think of it like a fridge, all the items in it take up a different amount of space, but once it’s full, it’s full.

The dimensions of the image is the number of pixels wide and tall it is. If you keep zooming into a picture on the web, eventually you’ll see the tiny squares of solid colour – these are the pixels. Every pixel is made up of a blend of Red, Green and Blue (which is why you’ll often hear RGB mentioned when talking about images.) The smaller dimensions of the image, the smaller the file size – simply because there are less pixels in the image. But if you have a small dimensioned image and it’s stretched too large the single pixels are stretched over multiple pixels and the image appears blocky. It can really ruin the impression of a website if the images are blurry and unclear.

So then, a balance needs to be struck. You don’t want an image to be too large, as it’ll take too long to download, but equally you don’t want it too small as it’ll look bad.

file size too large so slow to download image
image with a large file size can take ages to download and ruin the user experience of the site
low resolution image
low resolution original images, when displayed large can look blocky or blurred

Size vs Quality

When you visit a website, your internet browser must download all the assets that make up that webpage (html, css, js, images, videos, etc) from the server to your machine. Put simply, the bigger the files are, the longer the files take to download, and the slower the site. We all know how frustrating a slow website can be, and statistics show users don’t hang around – if it takes too long, they will give up and go somewhere else. This is the main consideration on the web – being fast is not just a nice to have, it’s vitally important, and images (and videos) are often the biggest asset to download.

The trade-off on compressing images, or using small images

Blender – object snapping to edge of another object when moving

Every time I find something that drives me mad with Blender, I’m going to make a quick post about it. This is more a reference for me than anything else, but perhaps someone will find it useful.

I had a frustrating 30 mins where moving one object through another one was seemingly glitching it’s position. In fact, it was repositioning the object (i was moving) to align to the edge of the other object (that it was moving through). This wasn’t a glitch, it was because the magnet or ‘Snap’ was turned on.

Turn off ‘Snap’ or the little magnet icon at the top of the screen to stop this happening.

Updating the URL in post content

When moving the content from an old WordPress site you need to update the URLs of any links to uploaded media. It’s easy to miss this step, but it’s also an easy fix.

Make sure you run the following SQL Query:

UPDATE wp_posts SET post_content = replace(post_content, 'www.old-url.wip', 'new-url.wip');

A new development process

Happy to launch a site for a close friend today: third-design.co.uk is the new site for Architect Technician Samuel Fitzgerald.

For this build I worked my preferred development process. The majority of site builds follow a similar process of: wire-framing, design and finally build. For this site, as I was taking on both the design and build, instead of wire-framing, I went straight to building out a prototype once the initial research and sketching (with a pencil!) was done.

The main advantage of this process is speed. In my experience, you simply get to where you want to be quicker and the main reason for that is content. Wire-framing, and designing, without content can be a frustrating process for the designer, but a very common one in my experience. A site is defined by it’s content and should work to present the content in the best possible light, in all device sizes.

By going straight to building a prototype, the client can start populating the site immediately with their images and copy, and the process of refinement can begin at this point.

I’ve had countless projects where fundamental decisions are made at the conventional build stage, way after the wire-frames and design stages have been signed-off. This isn’t (always) the client’s fault. The disconnect between low and high fidelity designs and an actual site means that you don’t really know what you’re getting until it’s too late, and your swiping around your new site.

For Third-design, I took a: prototype, refinement, design, and then final build approach – the build stage being actually refining and refactoring the prototype.

Although not always possible, I will be suggesting this process to all future projects.

Fixed: SVG as background image not displaying remotely

Had a really weird bug the other day where an .svg image was not displaying as a background image.

Locally, everything was fine (running a local server, using MAMP) but when I pushed to the server, the .svg would not show.

The file was on the server, not corrupted, with the correct SVG URL in the CSS – I couldn’t for the life of me see what the issue was.

I then noticed in developer tools that the content type for the SVG was coming up as text/XML.

Adding the following line to the .htaccess fixed the issue for me:

AddType image/svg+xml .svg .svgz

What the SSL? Getting Secure Socket Layers on your site

zapp.haus has just gone live, but it’s not got that lovely green padlock yet…

Secure Socket Layers

SSL (which stands for Secure Socket Layers), is a cryptographic internet protocol that ensures an authentic connection when moving data on the internet.

Is SSL new?

No! It’s been around since 1995! But it’s become near essential in recent years, largely due to Googles push for securing websites. In 2018, Google started to punish insecure sites in Google search results, and in the address bar of the Chrome browser.

So SSL is a nightmare to setup right?

Nope. These days, it’s really simple and can often be automated by your website host. AutoSSL is a free alternative to paid SSL certificates. Plus, it’s now included in web panels such as cPanel and CentOS.

Forcing HTTPS

Once SSL is installed, it’s best practice to redirect users to secured access of your site. So if the user navigates to http://zapp.haus, the site redirects them to httpS://zapp.haus (note the S in https:// )

To do this on an Apache / WordPress setup, add this redirect rule to your .htaccess file:

#REDIRECT TO HTTPS
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{ENV:HTTPS} !=on
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]
</IfModule>

Sketching the Zapp Branding

The name ZAPP came from the concept of future and fun. I want to create fun, fast, impressive websites and I needed a name that could convey this. After many scribbled out lists, Zapp was decided upon, as a memorable name that hit the mark.

Next came the logo sketching

At this point the idea was just get down all my thoughts and to not be too critical of what ended up on the page.

I liked the Z and using the shape to evoke a lightning bolt, inspired by the Bowie logo. But the pared back lines were the ones that really spoke to me. I wanted to develop those, to create something playful – but not too Death Metal!

In Illustrator, I attempted to work the logo into a collection of lines to see if that would work. My thinking was lots of straight lines would lend the logo to lots of interesting animation possibilites.

I liked this approach, but I was concerned about legibility issues at small sizes.

This felt like a strong approach, but I was concerned it was lacking in personality. Back to the sketch book…

This started to feel strong. Back to Illustrator, and this where I ended up… What do you think?