Filename conventions and types for images and graphics used in a WordPress blog.
- Use of non-ascii and language-specific characters, in particular Cyrillic
- Image types – jpg, png and others
- Filenames – length and naming
- Duplicate images
As a rule of thumb, for blog images use jpg format with names which are easy to interpret, using only A-Z, 0-9, hyphens and no spaces.
Good:
- Lenin-Statue-Kiev-Falling-1504-1.jpg
- Lenin-Statue-Kiev-Falling-1504-2.jpg
- jpg format, resized to 920 px (pixels) wide, file size 100kb
Bad:
- 3452@indecipherable_52morecharactersincyrillic_andafewmore ampersands and spaces too.png
- Copyof3452@indecipherable_деньгиуристическездки Погулять по улицам__que.png
- png format, 3.5 megabytes (but resized by WordPress during upload to a mere 500kb)
Sceenshot of typical Media Library in WordPress
The image above shows three duplicates which may have been caused by different editors working on the same project, or on different projects using similar images.. or any number of other reasons. Below, I’ll demonstrate why this is a problem.
FTP page showing how a single file can take up well over a megabyte of server space in WP Uploads directory.
Note the png files listed as paint.net.Image*. WordPress will take the original file and create a number of pre-defined sizes of the same image, anywhere from 3 or 4 to a good many – in this case, 10. An image of 499.kb was uploaded (more on that below) and from that WP created 9 more files for a total of some 1.5 megabytes.
FTP page showing images with very long file names.
Long File Names
The image above demonstrates an FTP page showing images with very long file names. As you can see, they run out of space in the viewing field. Another problem with such long filenames is related to database manipulation- sometimes the tools just cannot process the file.
FTP page showing image names with indecipherable names and ampersands.
Indecipherable Image Names
The image above gives absolutely no clue as to what the image may be related to. It also contains non-ASCII characters – often referred to as illegal characters.
Such filenames make a programmers’ task much more difficult when manipulating the database or optimising the images in the the WordPress uploads directory. The illegal characters will often create havoc when some utility programs fail to interpret them.
Image types
Images types most commonly found on the web are jpg, png and gif.
JPG files are often named jpeg, as demonstrated in this screenshot: http://dropbears.com/gallery/blog/empr-screenshot-img-library-5-ftp.htm
They are one and the same. There is no difference between an image named img.jpg and img.jpeg – stick to jpg as the image designation. Reasons include filtering – calling all *.jpg will miss *.jpeg unless specifically added, and as it’s a reasonably uncommon format it is indeed very easy to miss. A case in point may be that the programmer wishes to run a script to check whether all jpgs are devoid of bad code hidden within, but forgets to process jpegs.
PNG files – Portable Network Graphics. These are wonderful things, but like everything, have their place. For most purposes, particularly when writing an article for a blog, avoid them. Avoid them like the plague. Typically, a png file will be 10 times larger than the same sized image in jpg format.
An example of this is shown in above with the paint.net.Image listings. That image is 500mb. There is a duplicate image in the uploads directory with a meaningful name and in jpg format. It displays exactly the same but is only around 120k, so it takes up perhaps 360k in total compared to the 1.5 mb of the png.
GIF files. Once common, they are fast fading from the virtual landscape. Unless you have a very good reason to use them, don’t. Usually a png will be far superior to a gif, if a jpg won’t do.
Example of non-ASCII Cyrillic characters in image names
Non-Ascii characters.
The image above includes examples of names using Cyrillic characters, and those images are prefixed with an image size. As WordPress adds an image size suffix, all but the original have somewhat confusing names.
It is important to stick to ascii and WP filename conventions, that is, stick to hyphens rather than underscores except in php code. Using Cyrillic and other non-ASCII characters causes havoc when manipulating the database, organising and editing files in many programs, and the like. ASCII characters suitable for file names are the numbers 0-9, letters A-Z, hyphens and underscores.
For more information read this:
http://www.mtu.edu/umc/services/web/cms/characters-avoid/
Related
Imsanity Plugin
Imsanity automatically resizes huge file uploads. Are contributors uploading huge photos? Tired of manually scaling? Imsanity to the rescue!
Imsanity also provides a bulk-resize feature to selectively resize previously uploaded images to free up disk space.
https://wordpress.org/plugins/imsanity/
Notes:
paint.net.Image – the name of the image type is often dependent on the default program which loads that type of file. In this case, the program which handles png files is, obviously, paint.net.
bmp image format. Don’t. Just don’t. Ever. Never. Anywhere.
Resources
Article on image types at StackOverflow:
http://stackoverflow.com/questions/2336522/png-vs-gif-vs-jpeg-when-best-to-use