0

enter image description hereI 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?

  • 1
    PNG is not a suitable format for the image you have, you should save as a JPG. – Cai Mar 29 '16 at 14:48
0

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.

  • Thanks for the contribution, Martin, and welcome to GraphicDesign! Let us know if you have any questions about how the site works – Zach Saucier Mar 29 '16 at 15:38
  • Thank you Martin, very thorough and comprehensive answer! – U. Dzh Mar 29 '16 at 16:06
  • No worries @U.Dzh glad to help. Marty – Martin Smith Apr 4 '16 at 13:22
0

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!

  • before saving my file in jpeg, i actually tried to save it using Save for Web option, but that time i used PNG-8, which resulted in weird effect (noisy effect, tiny dots, dont know how to explain it), i will try to do it in PNG-24 and will let you know – U. Dzh Mar 29 '16 at 14:17
  • PNG-8 is used for images which don't have many colors. It produces a palette of 256 colours, so if you have multiple colors within the image then that will be the cause of the noisy effect that you have been experiencing. PNG-24 does the same but offers more colors. It should fix your problem. @U.Dzh – miotk Mar 29 '16 at 14:20
  • @U.Dzh selecting your file type will also depend greatly on the composition of the banner. Is it mostly text and graphics? Use PNG. Are there photographs used in the banner? Use JPG. – Manly Mar 29 '16 at 14:23
  • 1
    The amount of layers is irrelevant as you are wanting lossy compression here for a banner. When you save an editable file on your computer, then yes, keep the layers, but for a banner you want a flattened image. – Bagseye Mar 29 '16 at 15:04
  • 1
    I just have tried to bump up the the rate when i am saving the file as jpeg from medium to high and maximum (played between them) and i got a 198KB file and sent it to the developer, he said it works now, so im happy, so thank you Morgan and miotk for your advices, it helped me a lot, now i guess i know what to do next time. – U. Dzh Mar 29 '16 at 15:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.