I am a graphic designer who works with both Photoshop and illustrator. I want to build a website to promote myself and my work. I want to upload my artwork to create a galley and I have watched the videos for beginners and I would like to know what is what is the maximum and best pixel size that I should uses when I insert them into a galley. Another words, what in the best height and width to save my work after I use save to web in Photoshop?
I was looking for similar info a few days ago. I didnât find anything definitive, but in @bonâs foundation tutorial, his image was 1500 pixels wide and then put through Squash or image optim or âsave for webâ in Photoshop. JPEG for photos and PNG for graphics or anything where you want a transparent background.
A recent search should show the longest thread in history about whether or not you should warehouse.
Hopefully that might help until someone much cleverer comes along.
Hi, Steven,
I donât pretend to have all the answers on this topic, but I am a photographer so I tend to put quality of image before and above a small file size. However, the balance of the two must always be taken into account.
First thing you need to address is the way you prepare your raster-images for Internet. Be aware that not only pixel size affects the âweightâ of an image file. Things like sharpness, brightness and contrast also play a role. Generally, the more of them, the heavier a file becomes. So, if you need big dimensions, consider lowering sharpness, brightness and contrast (sharpness influences file size the most, or at least, is the easiest to manipulate).
Next, image dimensions â they should be same as intended dimensions for displaying in a browser. Itâs best not to let RW decide their size and proportions. So, as far as I know, the maximum size should be 1,200px wide. Personally, I donât use photos for banners, but those who do, use the maximum width of 1500px.
And finally, the resolution â this is a standard 72ppi. Even when you prepare your images for Retina-type of screens, you use the same resolution. You just double the dimensions of your images.
In any case, save your raster-images as JPEGs. PNGs are always heavier. They have only one advantage over JPEGs â they support transparency.
So, now only one thing remains to take care of: post-processing. That is compressing your raster-images in one of the many apps, like Squash, Image Optim, etc. The more you compress the file size, the worse image quality you get. There is no way to avoid that, hence the need for a compromise. You may also consider stripping the imageâs meta data and color profile, since browsers do not do a good job using them. That will save additional bytes. Some say file size should be kept under 200kB. For me personally, this limit is way too low to get good quality, but it is a thing you will have to decide for yourself.
As far as vector-images go, I donât have much experience, but I know that the best file format to use is SVG, because, like a true vector format, it can be resized up or down without loosing quality and it has a very small file size. If, for any reason, you can not use SVG for vector images, perhaps second best is GIF format (never use GIF for photos!).
Remember, this is my workflow. You need to experiment with your own, to arrive at the optimal results. But I do hope this guide will work well as a starting point for you.
1 Like
In websites, screen widths of the users vary a great deal depending on the device size they are using.
Rob @Rovertek has given some great advice, but the real answer is thereâs no set answer. Itâs a balancing act of image quality vs. load speed of the page. Pages that take to long to load might have excellent quality images, but most users might not wait around to find out. Pages that load fast, but have a poor quality of pictures wonât impress the viewers.
Just a couple things Iâll point out that are mistakes often made by people new to web development.
Never use more than 72 ppl resolution, browsers wonât render any higher than that, so itâs just wasted page weight.
Resize your images! Never load any image larger than the width that it can be displayed. If the theme youâre using has a maximum width of 1000px loading, an image 2000px wide will be four times the weight, and the first thing the browsers will do is shrink it to fit. This is lossless optimizing and should be done before using any of the compression tools like Rob mentioned.
Keep in mind the largest display size might be on the smaller screen sizes. An image that is in a two column stack on larger screens will likely be one column on smaller screens.
You mentioned gallery, and many of the gallery options offer different images for thumbnails, then the main image selected. Use that feature if you can. The thumbnail images can be resized much smaller so the page will load faster. Then when the user selects an image, it will load the larger image(s) one at a time.
2 Likes
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.