How to use images on web

What are recommended sizes of the images, so they won’t look blurry? Should I use JPG or PNG on my website? What is a vector? This simple guide is intended for future web administrators.

 

JPG/PNG – raster images; You will use this 95% of the time

Raster images consist of huge number of colored squares (reffered to as “pixels”). You can picture it (no  pun intended) as a form of a very detailed mosaic. This type of images makes most of the web, be it photographs, posters or illustrations.

The quality of the image is determined by two factors: its dimmensions (width, height) and density of the pixels reffered to as DPI (dots per inch). For web, 72 DPI is enough. For print however you need to be at 300.

Advantages and disadvanteges

Raster images can convey a lot of detail with relatively small file-size. They are also quite easy to display pretty much on any device.

You can’t enlarge them however – they would appear blurry (or pixelated), as there is finite number of pixels on them. Options in digital manipulation – such as changing color or creating animations – are not as flexible, compared to vector graphics. More on that later.

Formats

JPG/JPEG is ideal for 95% of your image needs: photographs, illustrations, posters, etc. JPGs can’t be transparent however – if there are no pixels present, JPG simply shows a white background.

PNG can do transparency and show sharp details. This is as close to vector as you can get which makes it suitable for various subtle graphics on web: logos, borders or backgrounds. File-size is bigger than of JPG’s though, so they can slow down your website.

GIF is an obsolete image format almost completely replaced by PNGs. It contains only 256 colors (in most use-cases) and handle details poorly. It can, however, animate a set of frames in an endless loop. This way you can share a video in a form of image, which is quite practical (and usually contains cats).

A few principles; Also what you should never do

  • If you intend to use raster image as a “full-page graphic”, its minimum width should be 1200px, optimal is 1400px. Anything bellow that would appear blurry.
  • PDF or word document (.doc, .docx) is not an image! Please, do not receive (or send) embedded images to other formats. It is impossible to extract them without a huge loss of quality – and it is also an unnecessary pain. For convenience, compress images to a .zip (or .rar) archive instead.
  • Do not use any other image formats, as jpg/jpeg/png were created specifically for web needs. Other image formats would not display at all, or come with their own set of problems.
  • Never accept a logo in form of a raster image! Logos should always be vectors.

Note about performance

Higher image quality means bigger filesize. If filesize is too big, it can slow down the website.

You don’t have to worry about it too much though: When you upload an image to WordPress, it gets automatically resized to 6 versions with different dimmensions. On front-end, my code decides which image version is sent to a user (small for phone, medium for tablet, big for retina display), so it’s as fast as possible but still looks good. That means, that you only need to care if the original is big enough.

If you really want to have a fast website though, you can always compress images by tools such as Optimizilla before upload. Those tools make the images even smaller without any quality loss.

Vector – images made of lines

Vector graphic uses math to draw lines between dots in the picture. Raster image from previous chapter would have 72 dots in an inch. Vector however would have just 4 and set of instructions how to connect them with lines and fill the inner area with color.

Advantages and disadvanteges

Any vector image is basically a geometry equation. Because of that, you can enlarge them as much as you want without any quality loss (they never get blurry). You can also easily manipulate them – change their shape, adjust their colors or even animate them. All of this makes vectors very suitable for logos, icons, fonts or similar simple graphics.

If you need to convert raster image to vector, it needs to be drawn by hand in some graphic program (such as Adobe Illustrator or Corell Draw). That makes vector graphics very impratical for detailed realistic images, such as photographs. Vectors are also not as easy to display as raster images, the only suitable vector format for web is SVG.

Formats

Most common vector formats are AI, EPS or CWS. Vector can also be exported to PDF – but not every PDF is a vector graphic!

As I said before, vector images are not as easy to display as their raster counterparts. The only format suitable for web is SVG and you can only display it on dedicated places (for example you can’t have a Facebook profile picture in SVG).

SVG usage

You can convert any common vector format to SVG – with online tool such as Convertio it’s pretty much matter of a single click. To increase its compatibility for web, it is good to optimize the resulting SVG through a SVGO optimizer.

Interestingly enough, you can edit SVG’s appearance in a text editor! Open any SVG with a programme such as NotePad or TextEdit and look for attributes such as fill (color of inner areas) or stroke (borders around paths).

Thank you!
Just a second.

My blog

Categories
Tags
Listening

Getting the tracks.

Just a second.