Ett av de största gripes som designers och utvecklare står inför idag arbetar med en lyhörd design. Medan denna designstil är en välsignelse för användare överallt, så att innehållet visas korrekt över alla enheter, kan det vara lite av huvudvärk att designa för det.
Detta är särskilt fallet när man tänker på hur bilderna passar (eller inte) i den responsiva designmodellen. Som designers vet väl, sker en av två saker vanligtvis när de arbetar med bilder i lyhörd design. Antingen blir bilderna super stora och så sakta ner sidorna, eller de hamnar med en mängd olika bildstorlekar för att försöka rymma olika skärmar, vilket är rent kaos. Antingen verkligheten är inte tillräckligt bra ur designers perspektiv.
Nu finns det ett bildserviceföretag som verkar lyssna på dessa designers frustrationer.
Nyligen debuterade en intelligent responsiv bildbrytningslösning, som går direkt till hjärtat av de problem som konstruktörer har upplevt när man försöker lista ut de korrekta bilddimensionerna för sin responsiva webbplats.
Istället för att konstruktörer fortsätter att antingen utforma bilder som är för stora eller för många, kommer de nu att kunna lita på teknik som hjälper dem att automatiskt hitta de optimala bilddimensionerna som krävs för den bästa visningsupplevelsen på både mobil- och webbapps i en utbud av skärmstorlekar. Responsive Image Breakpoints Generator är ett verktyg med öppen källkod låter konstruktörer interaktivt studera sina bilder och skapa lyhörda bildbrytningspunkter.
Så här fungerar det: designers kan snabbt och enkelt skapa de bästa matchade brytpunkterna för varje bild de laddar upp till verktyget, baserat på deras givna trösklar. Retina display anpassningar och flera bildformat anpassningar ger designers ytterligare utrymme för att anpassa sina bilder.
Verktyget uppmuntrar konstruktörer att bestämma bildbreddsvärden som allvarligt minskar filstorlekar, vilket alltid är välkommen att se till att webbplatser inte förlorar sin hastighet. Företagets algoritmer tolkar bilderna för att alltid hitta de bästa brytpunkterna. Detta ger designers friheten att komma med en samtida bild, liksom img, HTML5-element baserat på de beräknade brytpunkterna.
Den här friheten innebär att designers har en responsiv bild brytpunktsgenererings förmåga genom ett API, vilket gör det enkelt för dem att omedelbart skapa brytpunkter för alla populära bildformat: JPG, GIF, WebP och PNG. Dessa kan skapas antingen i deras ursprungliga format eller ett nytt format som bestäms i bildtransformationsinställningar.
Tack vare det här verktyget har designersna nu lyxen att inte behöva förlita sig på sina bästa gissningar när det gäller att få sina bildstorlekar rätt för sina lyhörda designsidor.