Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I just have made an ad banner in photoshop (width 1000px, height 250px) and sent it to the developer, but after an hour he said that the file that I have sent to him opens very slowly because it weights too much (it was saved in PNG and weighed 600KB)
After that I resaved it in JPEG, with medium size and it started weighing 80KB, but the developer said that when he puts it on the web site, it loses the quality and he can see the pixels.
What can be done to resolve this problem?
NOTE on Image Supplied You are getting good but incomplete guidance from your webmaster. The image above with all that detail will be heavy as a PNG (as you discovered) and can afford to be "fuzzy" EXCEPT for the text. We would use a jpeg for the rug, pillows, and sofa and ask the developer to use CSS to write the text into HTML. Text is such a BEAR as we note below that it is best handled with layers and CSS and any web developer charging you money should know how to layer your text in instead of forcing you to put text in a jpeg where it looks bad. CSS + your jpeg will get the image weight where you need it and look great.
More on Image Types, DPI and Strange Effects Now let's talk TYPE of image files for a minute.
JPEG = smaller file sizes but compressed and so can be fuzzy or out of focused especially where text is concerned as noted in a solid previous answer
Gif = Good for animations, but we rarely use anymore
PNG = leaves your pixels alone, i.e. no compression, but produces large files as a result so best to be aware of your file sizes since BIG files may slow down page load times causing a host of ills (hurts SEO, traffic, engagement).
We use PNG's mostly these days and try to never have a single image with more than 100K of weight. If we have 5 images on a page then we shoot for 100K for all five. Sometimes we WANT fuzzy and in those cases we use jpegs, but not great for any image with text.
We also play with IMAGE > SIZE a lot these days. Some will say 72 dots per inch (dpi) is the only screen resolution that makes sense and we would disagree. When we have small images that need to be resized we pack dpi UP (usually to 96, 144 or 300). 300 dpi is print resolution so we rarely use it online since the weight of the image is HEAVY and screens won't show much of the extra detail anyway.
One Postscript Note - logos are good 300 dpi examples. Your logo may be used and abused by others so packing in DOTS helps prevent your logo from looking BAD when someone takes your 300 x 200 logo file down to 50 x 50. We like logo files with and without transparent backgrounds and with enough dpi in them that almost any manipulations doesn't make the file look jaggy or horrible. And the added benefit is if someone wants to grab a logo off the web and print it they can. Good idea to have many logo size variations, but make sure some are "vector" or able to be manipulated without losing form (Adobe Illustrator creates vector files).
CSS and tools like Font Awesome make it easy to create images with little to almost no "weight". You can see font awesome icons on almost any Curagami.com post including the group icon we used in our asynchronous plan post yesterday. Pretty sure font awesome is server side so there is almost NO weight on pages that use or include them. We love Font Awesome because layering CSS can be a bear to learn, but we were using font awesome icons in minutes.
But when we need to manipulate images or have programs that are manipulating images automatically we rarely use 72 dpi anymore since a 72 dpi jpeg with text looks BAD on a retina screen (iPads, Macs) and "bad" rarely translates to "conversion".
Summary To solve the image problem above use a jpeg for the main image (the rug, sofa and pillows) and shoot for the 50K to 100K depending on what other images are on the page. Ask your developer to layer in the text using Cascading Style Sheets or CSS.
If you are seeing strange effects check IMAGE > MODE and make sure your mode is set to RGB.
Set your DPI based on what will make your images look the best across the kinds of devices viewing your content with IMAGE > SIZE and use jpegs when you need to compress out some image weight and there is no penalty for fuzziness.
Use PNG files for things that need to be CLEAR and CLEAN while being mindful of the SIZE of the file you asking your server to send to visitors.
You can save it specifically for the web in Photoshop by going to:
File > Save for Web and Devices
or
CTRL + ALT + SHIFT + S
Once you've opened up the screen, depending on the amount of colours that your image uses you want to choose either PNG 24 or PNG 8, if your image uses little colours then use the PNG 8 option.
You could also try GIF image file, see if this does anything, however a image of that size shouldn't be saving in a 600KB file.
Please let me know how you get on!
