Member Avatar for l00pylou

I am putting (or trying to) a new menu item on a friends website which someone else created

I have created the gifs for the multif statement using an existing one as a template for size/colour etc.

The menu item i have created seems pixelated - what am i doing wrong, you can view it here,

thanks

http://www.geocities.com/l00pylou10@ymail.com/classic_tan.html

  • 2 Contributors
  • 2 Replies
  • 75 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by l00pylou

Dani AI

Generated

Good troubleshooting by and thanks to for the follow-up. Below are focused checks and export tips that are commonly useful when small UI GIFs look blocky, plus alternatives that keep buttons and icons crisp on modern screens.

  • Pick the right format: GIF is fine for simple, flat art but has a 256-color limit and only on/off transparency. For smooth gradients, soft edges, or semi‑transparent antialiasing, use PNG (24/32-bit) or SVG for vector shapes.
  • Palette and dithering: when you must use GIF, choose an adaptive/optimized palette and try different dithering algorithms and amounts — small tweaks can reduce banding without adding visible noise. Preview at 100%.
  • Pixel-grid and antialiasing: snap vector artwork to whole pixels before rasterizing and avoid fractional positioning; for very small UI elements, turning off antialiasing sometimes produces cleaner edges.
  • Hi-DPI and scaling: supply 2x (or SVG) assets rather than relying on browser scaling to avoid blurred pixels on Retina/Hi‑DPI displays.
  • Workflow: keep an editable source (PSD/AI), export once with chosen settings, and run a separate optimization pass (lossless tools) if needed. Also prefer HTML/CSS text for labels where possible—crisp, accessible, and easier to maintain.

For a brief primer on choosing web image formats, see the MDN guide to image formats: Image formats - MDN.

Recommended Answers

All 2 Replies

Member Avatar for peter_budo

Looks like you put too much compression. Am I right to say you created the bottom part first and then tried to add the top section?

Member Avatar for l00pylou

I think IH ave solved it, the canvas/image size in the HTML was different to that of the image

it looks a lot better now

thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.