By Nathan E. Malpass, Last updated: January 18, 2024
I am trying to decipher which is best to use between a jpeg and a png file type for my pictures. I plan on doing some editing on these photos and would like to upload some of them on my social media accounts while others will be published on numerous websites.
- anonymous photographer.
Part 1: Why is there a need to resize a jpeg?
The year 2018 is a very advanced time for the people of Generation X and older. It used to be, that if you wanted to take a photograph, you would first need a camera, and film, and then have the film developed, and finally, have your developed negatives turned into photographs. I can imagine that some of the millennials of today would not even realize that that is how things used to be.
Today, it seems that everybody has a mobile phone, some of which with cameras that shoot in higher resolutions than some of today’s digital cameras. While the more advanced digital cameras nowadays shoot in really high definition. And where do these pictures appear, online of course. Social media mostly, as well as websites on just about every topic or theme you could think of.
The problem with that is that high definition photographs may be too large for online usage. If a photograph is not resized in order to accommodate where it is being uploaded, the user may spend too much time waiting for the photo to download. In other cases, websites have limits also as to how big a photograph it can upload and if the size of the photo is too big, then when it appears on the web page, it will ruin the look of the page and may even send all the texts of the page to other areas of the screen just to fit the photo.
Particularly with how fast everything seems to operate nowadays, imagine uploading an image with very high file size on Facebook, Twitter, Instagram, SnapChat or any other social media site, do you see your friends waiting 5 whole minutes just to see the photo? Chances are they’ll probably click away and look at something else instead of waiting that long.
Part 2: Choosing how to resize your images for online use.
There are a number of media software that one can use in order to save a digital image. There are GIF’s, PNG’s, and as previously mentioned, JPEG’s. The differences in these mostly lie on how the file is compressed and viewed on your device. These differences affect how long you would wait to view an image online and how you would view that image on a particular site.
Finding the balance is key and though there are no golden rules that one can follow, repeated experience in compressing photos and choosing how to do so will become easier once you have some practice up your sleeve.
Here are 2 vital tips that you can use to get started in knowing what will work best:
Tip # 1: Never save your photos at 100%. Doing so first and foremost takes us massive space in your hard drive and the quality between 100% and even 90% is not all too different yet there would be a large drop in your file size. Remember also that saving at 100% does not exactly give you the most optimized image quality.
Many times it is even best to save your images at lower than 90%. Some websites have requirements that only allow you to upload images at even 60%, which is already considered of high quality. Adobe Photoshop has a saving preset that defines the image percentage of quality as Low - 10%, Medium - 30%, High - 60%, Very High - 80%, Maximum - 100%.
Web developers often require their publication teams to only upload images between 50%-70% and these are for sites that are already high in photo presentations. News sites that consist of mostly text and merely have a small supporting image save at percentages much lower than 70%.
Tip # 2: But remember not to save your images too low either. As I said earlier, depending on where you will be uploading your image would also depend on how large, or small, an image should be. You will want to upload the highest file size possible in order to have the best quality without causing the image to destroy the overall viewing of a website.
At 30%, you would likely be losing some image quality, while developers may argue that 50% would be the absolute lowest quality one should resize to in order to suit their site. Trying out different sizes is probably your best bet here in order to test and detect what would look best on the site you are uploading to. Besides, trying out different file sizes would be educational and teach you what really does work best considering the different sites you may be uploading to.
Part 3: Options for compressing your photos.
Let’s start by understanding the inverses between compression and quality. For example, if a photo has a compression of 60%, what you will have is 40% quality. Conversely, you could also say that 70% quality would mean that you have 30% compression. Another way to look at it would be to say that if you have 100% quality, then you would have 0% compression.
Luminance, or brightness, is typically a setting that should be held at the highest possible value. This is commonly known as chroma subsampling. Users may find it interesting to note that Adobe Photoshop does not always utilize this and their “save for web” option only uses chroma subsampling when saving at 50% or below in their quality value.
Part 4: Web media and how they differ in use from one need to another.
First of all, it is important to note that there are all sorts of media images that one may put on a web site. A button is different from an icon is different from a supporting image is different from a full size supporting photo, and so on. Having said that, it would not be wise to compare a badge from a news article main image.
Websites also give you the option to upload an image with relatively low file size on the main page of the article, with a clickable link to a page that only contains the photo which can be of greater quality. You can also build the page to have multiple thumbnails that way you can also feature many links to numerous photos of high quality. However, by doing so, you are also creating 2 sets of images in the media library, which may be a contradiction to how the website prefers to build their pages.
A good rule of thumb is to always keep in mind that you are putting together a page with numerous graphics all put together and it is always best to consider how you can best optimize them as a single unit. It would be quite tedious to locate images if these scattered all over a web developers page, so think and plan how to organize your files.
There may also be cases where your developer will ask you to upload your images on sites like Flickr, where you no longer need to host the image but simply link it into your page instead. But remember, by doing so does not mean that you no longer need to consider your file sizes and compressions, it is still vital to plan on what would work best considering the images you are uploading.
Part 5: Adobe Photoshop is not the be all and end all of all media software.
Saving space is quite crucial for all developers and as an image contributor, it is your duty to learn how to do so to the best of your abilities while not allowing your work to suffer by accidentally uploading images that do not suit the project. Luckily, there are a few types of software out there that allow us to resize images to suit our needs. Have a look below at some of our options.
IrfanView is a free software built for Windows that allows you to view and resize any set of large photos. One of the advantages of working with IrfanView is because it allows you to convert batches of photos from multiple directories. Imagine the ease in optimizing hundreds of photos with the same command!
IrfanView also supports plugins from 3rd party developers and one such PlugIn is the Radical Image Optimization Tool, otherwise known as RIOT. One of its main advantages is that it allows you to edit your compression parameters in a dual image view.
Seeing both images at the same time will certainly help you compare and adjust accordingly to what you will be needing for your file. Another major advantage in using IrfanView is that it allows you to remove any additional metadata like EXIF which add to your file size and is rarely needed when uploading these images online.
If you are a Mac user, one of your software options is ImageOptim. ImageOptim has been known to even be better than Adobe Photoshop and runs on OS X. One of its functions includes dragging and dropping files or folders into the software to help you optimize numerous photos. Another advantage of using ImageOptim is that it allows you to run commands straight from its terminal.
However, there have been a few issues with its software, one of which includes rendering pixelated images in certain browsers, particularly, OPERA. That being said, it would be best to try this out on the different browsers like Chrome, Safari, and Firefox. If so, you still have the option of downloading ImageOptim 1.3.0 which converts cleaner images.
One software that can be used with both Windows and OS X if FoneDog. It is also free and can convert JPEG’s and PNG’s without losing as much quality. Considering that files are often quite large, FoneDog allows you to shrink images in order to help you save space on your mobile phones and computers.
FoneDog allows you to convert 20 photos at a time which makes it easier to operate as compared to other software on the market making it a better option for users who have multiple photos that need resizing. These are more commonly needed by web developers and contributors who create photo galleries and use thumbnails in their web pages.
Part 6: The long hard road on choosing between JPEG and PNG.
Though there are a few other types of image file types, there really are only two kings that are most commonly used and they are JPEG’s and PNG’s. One may argue that it doesn’t matter which one you use as they are both identical, but upon closer inspection, you will see that they really do have a few differences.
Likewise, you could also say that one is not particularly better than the other, as ultimately, it depends on your image quality needs and file sizes designed for your specific circumstances. Below are a few examples of each of their strengths and weaknesses. Hopefully, this will help you best decide what you need.
JPEG, is otherwise known as the team that developed the format, stands for Joint Photographic Experts Group. They have become the standard in digital photography and online sharing optimization thanks in part to their great balance of quality and file size. Depending on the settings and programs used, it is difficult to state the exact ratio differences, but typically, a JPEG image has a 10:1 compression ratio.
In other words, if you have an image that is 10MB and you convert it into a JPEG file type, it would save to roughly 1MB. Also, ideally, and in some cases, you should not see a difference in its quality, but naturally, this would also depend on the content of the image.
In order for JPEG to achieve this, they use what is called the discrete cosine transform, or DCT. The exact formulas used to define how this is done is quite complicated but in short, its algorithm scans the whole picture, then chooses which pixels are similar to those beside it of order to merge those pixels together into tiles.
This extremely effective method of downsizing a file size, however, comes with the risk of never being able to take back the information you have since given away considering that once tiled, the pixels are no longer accessible.
It is for this reason that JPEG is not the best file type to use when creating an archived set as you will incur a loss of quality with each time you open and edit the image.
However, there are non-destructive photo editors like Adobe Lightroom, which allows you to work around this problem considering you never delete the original file as this software saves edits as metadata as opposed to writing over the original image.
Users should also take heed in knowing that JPEG’s are also not the best of file types or the one to rule them all as they tend to blur when used with text-heavy images or images with sharp lines.
PNG
- Portable Network Graphics. This lossless file format is an alternative to the GIF, which stands for Graphics Interchange Format. JPEGs rely on DCT compressions whereas PNG’s use LZW compressions, which is a two-stage process that takes strings of bits found within the data of an image and matches longer sequences to shortcodes that are stored within the image file. By doing so, a smaller file with a higher quality becomes your end result.
The lossless compression remains to be the largest advantage when arguing JPEG versus PNG but PNG also handles high contrast pictures very well and it is because of that that PNG is often the default format for screenshots. This pixel per pixel representation can definitely be very helpful as opposed to JPEG’s style of compressing pixels into groups.
With PNG’s creation specifically designed for web-based usage, it has certainly proven its worth. JPEG’s certainly rack up the majority of images online but PNG has an entire niche that JPEG cannot consider competing against plus remain to be the only option when needing to render an image over the other parts of a website.
Part 7: So is a PNG better than a JPEG?
In a word, no. The answer is that neither the JPEG nor the PNG is better than the other. The answer is ultimately found in answering what your needs are and from those needs you can then detect which one would best suit you. And remember, your answer with one need may differ from your answer from another need.
If you’d like to share a photo from your mobile phone to your social media accounts, you will probably go with the JPEG file type as it is smaller in size, built for photography, and is an accepted file format on possibly every single platform there is online.
If however, you are taking a screenshot of an image that you know you will alter and modify later with the need to archive your actions, then PNG will be your better option. Your file size will certainly be larger but you will no longer have to worry about losing vital information that you will not be able to get back.
JPEG’s are a popular file type but one would need to find the perfect balance between compression quality and the substance of the images. In spite of increased internet speeds worldwide, reducing the sizes of images is still vital when uploading photos.
However, when archiving photos and having the need to continue going back to the original photo, PNG’s are your better option as these retain the quality of your images without having your pixels suffer as a result of each edit made.
/